Jetpack Compose 如何减小单个Tab组件的内置内边距?
解决方法
Jetpack Compose Material库的Tab组件默认自带固定内边距和最小宽高限制,调整方式如下:
在你现有的Tab配置项中新增三个参数:
contentPadding:自定义Tab的内边距,可根据需求调整水平、垂直方向的数值minWidth:设置为0.dp,取消默认的最小宽度限制,避免边距被默认规则撑开minHeight:设置为0.dp,取消默认的最小高度限制
修改后的完整代码如下:
@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) }, // 新增自定义配置,数值可根据实际需求调整 contentPadding = PaddingValues(horizontal = 8.dp, vertical = 6.dp), minWidth = 0.dp, minHeight = 0.dp ) } Row { Spacer(Modifier.weight(1f, true)) } } }
内容的提问来源于stack exchange,提问作者Taha Asif
相关产品推荐
相关产品推荐

