我想实现下面图片所示的效果。我尝试使用默认选项卡和居中对齐的TabRow,但无法实现左对齐。根据Google网站的自定义标签方法,我尝试了TapRow,但标签仍然是居中对齐的(我想这是TapRow的问题而不是Tab的问题)。
在Tabrow中,使用fillMaxWidth修饰符,整个行都被填充并居中对齐,而使用.width=xx.dp方法,则可以减小标签行的大小,但仍然居中对齐。我想要左对齐。我该怎么做?
以下是我的代码:
在Tabrow中,使用fillMaxWidth修饰符,整个行都被填充并居中对齐,而使用.width=xx.dp方法,则可以减小标签行的大小,但仍然居中对齐。我想要左对齐。我该怎么做?
以下是我的代码:
@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"
}
)
}
}
}