TopAppBar 在 Compose 和 TabRow 中没有自动调整高度不起作用

Question

基本上，我有两个可组合的函数，它们创建一个 TopAppBar 并添加一个包含在应用栏中的选项卡布局：

@Composable
fun ZCryptAppBar(
    modifier: Modifier = Modifier,
    title: @Composable RowScope.() -> Unit
) {
    Column(Modifier.fillMaxWidth()) {
        TopAppBar(
            title = {
                Column {
                    Row { title() }
                    Row {
                        TabLayout()
                    }
                }
            },
            modifier = modifier,
            backgroundColor = MaterialTheme.colors.primary,
            contentColor = Color.White
        )
    }
}

@Composable
fun TabLayout() {
    var selectedTab by remember {
        mutableStateOf(0)
    }
    TabRow(
        modifier = Modifier.fillMaxWidth(),
        selectedTabIndex = selectedTab,
        backgroundColor = MaterialTheme.colors.primary,
        tabs = {
            Tab(
                selected = selectedTab == 0,
                onClick = { selectedTab = 0 },
                text = { Text(stringResource(R.string.encrypt)) },
                icon = {
                    Image(
                        painterResource(id = R.drawable.ic_padlock_black),
                        stringResource(R.string.descr_icon_padlock)
                    )
                }
            )
            Tab(
                selected = selectedTab == 0,
                onClick = { selectedTab = 0 },
                text = { Text(stringResource(R.string.decrypt)) },
                icon = {
                    Image(
                        painterResource(id = R.drawable.ic_padunlock_black),
                        stringResource(R.string.descr_icon_padunlock)
                    )
                }
            )
        }
    )
}

但是我在这里遇到了两个问题：首先，当我点击一个标签时，什么也没有发生，并且应用程序停留在同一个标​​签中。

其次，TopAppBar 似乎不会自动调整其高度，因为选项卡名称和图标都被裁剪了：

Answer 1

TopAppBar 实现了Material design specs 并具有56.dp 的固定高度。

你可以使用：

Column(Modifier.fillMaxWidth()) {
    TopAppBar(
        title = {
            Column() {
                Row { Text("Title") }
            }
        },
        backgroundColor = MaterialTheme.colors.primary,
        contentColor = Color.White
    )
    TabLayout()
}

然后在你的TabLayout 中使用：

       Tab(
            selected = selectedTab == 0,
            onClick = { selectedTab = 0 },
            //.....
        )
        Tab(
            selected = selectedTab == 1,
            onClick = { selectedTab = 1 },
            //.....
        )

Answer 2

@Composable
fun ZCryptAppBar(
    modifier: Modifier = Modifier,
    title: @Composable RowScope.() -> Unit
) {
    Column(Modifier.fillMaxWidth()) {
        TopAppBar(
            content = {
                Column {
                    Row { title() }
                    Row {
                        TabLayout()
                    }
                }
            },
            modifier = modifier,
            backgroundColor = MaterialTheme.colors.primary,
            contentColor = Color.White
        )
    }
}

@Composable
fun TabLayout() {
    var selectedTab by remember {
        mutableStateOf(0)
    }
    TabRow(
        modifier = Modifier.fillMaxWidth(),
        selectedTabIndex = selectedTab,
        backgroundColor = MaterialTheme.colors.primary,
        tabs = {
            Tab(
                selected = selectedTab == 0,
                onClick = { selectedTab = 0 },
                text = { Text(stringResource(R.string.encrypt)) },
                icon = {
                    Image(
                        painterResource(id = R.drawable.ic_padlock_black),
                        stringResource(R.string.descr_icon_padlock)
                    )
                }
            )
            Tab(
                selected = selectedTab == 1,
                onClick = { selectedTab = 1 },
                text = { Text(stringResource(R.string.decrypt)) },
                icon = {
                    Image(
                        painterResource(id = R.drawable.ic_padunlock_black),
                        stringResource(R.string.descr_icon_padunlock)
                    )
                }
            )
        }
    )
}

复制和粘贴时，忘记更改值是很常见的。有趣的是它经常发生，我自己做了很多次。试试看

哦，顺便说一句，你在这里使用了错误的变体 ``TopAppBar``` 剪辑的原因可能是您将所有内容都塞进了栏的标题中。改用“内容”应该可以解决这个问题。如果没有，请尝试 Modifier.wrapContentSize()

标签没有改变，因为您在两个标签中应用了相同的逻辑。