You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

目标UI:
目标UI

内容的提问来源于stack exchange,提问作者Salman Akbar

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.26 04:37:06