Jetpack Compose 减少选项卡的内部填充
Jetpack Compose Reducing internal padding of Tabs
我想减少单个选项卡的填充。下图显示了我想要的:
我得到了什么:
我目前正在使用版本为 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)) }
}
}
使用当前版本的 TabRow
(或 ScrollableTabRow
)您将无法执行此操作。您需要创建自己的 TabRow
可组合项。
此外,您可能应该使用 ScrollableTabRow
而不是 TabRow
,因为 TabRow
会为其 Tabs
均匀分配整个可用的 width
。因此内容填充并不重要。
您几乎可以复制粘贴 ScrollableTabRow
的整个代码,但要修改设置 tabConstraints
.[=22= 的位]
不应再使用 minTabWidth
:
val minTabWidth = ScrollableTabRowMinimumTabWidth.roundToPx()
自定义选项卡是正确的选择。
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)
)
}
}
我想减少单个选项卡的填充。下图显示了我想要的:
我得到了什么:
我目前正在使用版本为 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)) }
}
}
使用当前版本的 TabRow
(或 ScrollableTabRow
)您将无法执行此操作。您需要创建自己的 TabRow
可组合项。
此外,您可能应该使用 ScrollableTabRow
而不是 TabRow
,因为 TabRow
会为其 Tabs
均匀分配整个可用的 width
。因此内容填充并不重要。
您几乎可以复制粘贴 ScrollableTabRow
的整个代码,但要修改设置 tabConstraints
.[=22= 的位]
不应再使用 minTabWidth
:
val minTabWidth = ScrollableTabRowMinimumTabWidth.roundToPx()
自定义选项卡是正确的选择。
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)
)
}
}