一个选项卡是否可能包含多个类型?(单个图标和文本)与jetpack撰写

Question

我想创建一个标签，它有:

• 开头只有一个图标，右边只有文本

点击查看图片

我正在使用这个:

TabItem.kt

sealed class TabItem(
val index: Int,
@DrawableRes val icon: Int?,
@StringRes val title: Int,
val screenToLoad: @Composable () -> Unit
){
object Camera: TabItem(0, R.drawable.ic_camera, R.string.empty_string, {
CameraScreen()
})
object Chat: TabItem(1, null, R.string.chats, {
ChatScreen()
})
object Status: TabItem(2, null, R.string.status, {
StatusScreen()
})
object Call: TabItem(3, null, R.string.calls, {
CallsScreen()
})
}

UI

TabRow(
selectedTabIndex = selectedIndex,
) {
tabs.forEachIndexed{index, tabItem ->
Tab(
selected = index == selectedIndex,
modifier = modifier.background(MaterialTheme.colors.primary),
onClick = {
onPageSelected(tabItem)
},
icon = {
tabItem.icon?.let { painterResource(id = it) }?.let { Icon(painter = it, contentDescription = stringResource(id = R.string.icon)) }
},
text = {
Text(text = stringResource(id = tabItem.title))
},)
}
}

问题是:

图标为下面的文本留出空间…

我只需要标签中的图标以及其他标签的文本..

Answer 1

我是这样做的:

TabRow(selectedTabIndex = 0) {
Tab(
selected = true,
onClick = { },
text = { Icon(Icons.Filled.AccountCircle, "icon", tint = Color.White).toString() })
Tab(
selected = true,
onClick = { },
text = {
Text(text = "Text")
})
}