Android jetpack compose TabRow：在 TabRow 中设置对齐方式答案

【问题标题】：Android jetpack compose TabRow : setting alignment in TabRowAndroid jetpack compose TabRow：在 TabRow 中设置对齐方式
【发布时间】：2022-07-27 00:09:56
【问题描述】：

我正在尝试实现如下图所示的目标。我尝试使用默认选项卡的 TabRow 并且它的中心对齐。我无法在这里实现左对齐。我按照自定义选项卡方法尝试了 TapRow Google's website 但标签仍然居中对齐（我猜它的 TapRow 问题而不是标签）。

在 Tabrow 中，使用 fillMaxWidth 修饰符，其整个行被填充并居中对齐，并且使用 .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"
                }
            )
        }
    }

}

这是预期的（左对齐）：

这是它现在的显示方式（居中对齐）：

【问题讨论】：

你可以将你的 TabRow 放在一个 Box 中，然后更新 TabRow 的修饰符以在 CenterStart 中对齐

标签： android tabs android-jetpack-compose

【解决方案1】：

@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"
            }
        )
    }
}

谢谢！

【讨论】：

【解决方案2】：

您可以将 ScrollableTabRow 与 edgePadding = 0.dp 一起使用，而不是 TabRow

【讨论】：