是否可以有一个包含多种类型的选项卡。 （单个图标和文本）与 jetpack compose

Question

我正在尝试创建一个标签：

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

Click to see image

我正在使用这个：

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()
})

}

用户界面

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