[英]Android jetpack compose TabRow : setting alignment in TabRow
我正在尝试实现如下图所示的目标。 我尝试使用默认选项卡的 TabRow 并且它的中心对齐。 我无法在这里实现左 alignment。 我根据谷歌的网站尝试了带有自定义标签方法的 TapRow,但标签仍然居中对齐(我猜它的 TapRow 问题而不是 Tab)。
在 Tabrow 中,使用 fillMaxWidth 修饰符,其整个行被填充并居中对齐,并且 with.width=xx.dp 方法,其缩小的 tabrow 但仍然居中对齐。 我要左对齐。 我怎样才能做到这一点?
这是我的代码:
@Composable
fun HomeCategoryTabIndicator(
modifier: Modifier = Modifier,
color: Color = MaterialTheme.colors.onSurface
) {
Spacer(
modifier
.padding(horizontal = 10.dp)
.height(4.dp)
.background(color, RoundedCornerShape(topStartPercent = 100, topEndPercent = 100))
)
}
@Composable
fun MyTab(
onClick: (String) -> Unit,
title: String
) {
Column(
Modifier
.padding(10.dp)
.wrapContentHeight()
.wrapContentWidth()
.clickable {onClick(title)},
verticalArrangement = Arrangement.SpaceBetween
) {
Text(
text = title,
style = MaterialTheme.typography.body1,
modifier = Modifier.align(Alignment.CenterHorizontally)
)
}
}
@Composable
private fun HomeCategoryTabs(
categories: List<HomeCategory>,
selectedCategory: HomeCategory,
onCategorySelected: (HomeCategory) -> Unit
) {
val selectedIndex = categories.indexOfFirst { it == selectedCategory }
val indicator = @Composable { tabPositions: List<TabPosition> ->
HomeCategoryTabIndicator(
Modifier.tabIndicatorOffset(tabPositions[selectedIndex]),
color = MaterialTheme.ts.colors.primary,
)
}
TabRow(
modifier = Modifier.width(330.dp),
selectedTabIndex = selectedIndex,
indicator = indicator,
) {
categories.forEach { category ->
MyTab(
onClick = {
onCategorySelected(category)
},
title = when (category) {
HomeCategory.Market -> "Market"
HomeCategory.Sector -> "Sector"
HomeCategory.News -> "News"
HomeCategory.Ideas -> "Ideas"
HomeCategory.Events -> "Events"
}
)
}
}
}
@Anand Chaudhari 嗨!
对于左对齐,您需要使用ScrollableTabRow并将边缘填充设置为 0。
您的代码示例:
ScrollableTabRow(
edgePadding = 0.dp
selectedTabIndex = selectedIndex,
indicator = indicator,
) {
categories.forEach { category ->
MyTab(
onClick = {
onCategorySelected(category)
},
title = when (category) {
HomeCategory.Market -> "Market"
HomeCategory.Sector -> "Sector"
HomeCategory.News -> "News"
HomeCategory.Ideas -> "Ideas"
HomeCategory.Events -> "Events"
}
)
}
}
谢谢!
您可以将ScrollableTabRow与edgePadding = 0.dp
一起使用,而不是TabRow
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.