Jetpack Compose 减少选项卡的内部填充

Question

我想减少单个选项卡的填充。下图显示了我想要的：

我得到了什么：

我目前正在使用版本 0.16.0 的“accompanist-pager”和“accompanist-pager-indicators”。

代码：

@Composable
fun Tabs(tabNames: List<String>, pagerState: PagerState, scrollToPage: (Int) -> Unit) {
  TabRow(
    selectedTabIndex = pagerState.currentPage,
    backgroundColor = Color.White,
    contentColor = Color.Black,
    divider = {
      TabRowDefaults.Divider(
        thickness = 4.dp
      )
    },
    indicator = { tabPositions ->
      TabRowDefaults.Indicator(
        modifier = Modifier.customTabIndicatorOffset(tabPositions[pagerState.currentPage]),
        height = 4.dp,
        color = EmeraldTheme.colors.primary
      )
    }
  ) {
    tabNames.forEachIndexed { index, name ->
      Tab(
        text = {
          Text(
            text = name,
            maxLines = 1,
            style = globalSearchDefaultTextStyle,
            fontWeight = if (pagerState.currentPage == index) FontWeight.Bold else FontWeight.Normal,
            color = if (pagerState.currentPage == index) EmeraldColor.Black100 else colorResource(globalSearchR.color.darkGrey20),
          )
        },
        selected = pagerState.currentPage == index,
        onClick = {
          scrollToPage(index)
        }
      )
    }
    Row { Spacer(Modifier.weight(1f, true)) }
  }
}

Answer 1

使用当前版本的

TabRow

（或

ScrollableTabRow

），您将无法做到这一点。您需要创建自己的

TabRow

可组合项。

此外，您可能应该使用

ScrollableTabRow

而不是

TabRow

，因为

TabRow

为其

width

均匀分配整个可用

Tabs

。所以内容填充并不那么重要。

您几乎可以复制粘贴

ScrollableTabRow

的整个代码，但要修改设置

tabConstraints

的位。

它不应该再使用

minTabWidth

：

val minTabWidth = ScrollableTabRowMinimumTabWidth.roundToPx()

Answer 2

您可以使用java反射来更改ScrollableTabRowMinimumTabWidth的值。 您可以在这里投票 -> https://issuetracker.google.com/issues/226665301

try {
    Class
        .forName("androidx.compose.material3.TabRowKt")
        .getDeclaredField("ScrollableTabRowMinimumTabWidth").apply {
            isAccessible = true
        }.set(this, 0f)
} catch (e: Exception) {
    e.printStackTrace()
}

Answer 3

自定义选项卡是正确的选择。

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.material.Tab
import androidx.compose.material.Text

Tab(selected, onClick) {
    Column(
        Modifier.padding(10.dp).height(50.dp).fillMaxWidth(),
        verticalArrangement = Arrangement.SpaceBetween
    ) {
        Box(
            Modifier.size(10.dp)
                .align(Alignment.CenterHorizontally)
                .background(color = if (selected) Color.Red else Color.White)
        )
        Text(
            text = title,
            style = MaterialTheme.typography.body1,
            modifier = Modifier.align(Alignment.CenterHorizontally)
        )
    }
}

https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#Tab(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx. compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)

Answer 4

解决此问题的快速方法是在修改器中设置固定宽度