[英]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.