Flutter中TabBar自定义顶部圆角指示器实现方案咨询
实现TabBar顶部带圆角的指示器样式
完全可行,通过自定义TabBar的indicator即可实现目标样式,修改后的代码如下:
TabBar( controller: _controller, isScrollable: true, labelColor: Theme.of(context).colorScheme.secondaryContainer, unselectedLabelColor: Colors.black, indicatorSize: TabBarIndicatorSize.label, // 自定义顶部带圆角的指示器 indicator: BoxDecoration( color: Theme.of(context).colorScheme.secondaryContainer, borderRadius: const BorderRadius.only( topLeft: Radius.circular(8), // 可按需调整圆角半径 topRight: Radius.circular(8), ), ), )
注意事项:
- 移除原代码中的
indicatorColor和indicatorWeight,改用BoxDecoration定义样式 - 若需要调整指示器高度,可给TabBar添加
height属性配合使用 - 圆角大小可通过修改
Radius.circular()的数值自定义
当前UI:
目标UI:
内容的提问来源于stack exchange,提问作者Salman Akbar
相关产品推荐
相关产品推荐

