如何在Flutter中实现该Tab样式UI？含内容切换与分隔线实现

一、Tab样式UI：自定义或第三方包？ #

两种方案都能满足需求，按需选择：

1. 自定义实现（轻量场景首选） #

基于Flutter原生TabBar+Tab就能改造出目标样式：

• 自定义TabBar的indicator属性，实现选中态的背景色、圆角等效果
• 给Tab嵌套Row、Column等组件，组合图标与文字，调整间距和样式
  示例代码：

TabBar(
  tabs: const [
    Tab(icon: Icon(Icons.person), text: 'Profile'),
    Tab(icon: Icon(Icons.group), text: 'Team'),
    Tab(icon: Icon(Icons.settings), text: 'Settings'),
  ],
  indicator: BoxDecoration(
    color: Colors.blue.shade100,
    borderRadius: BorderRadius.circular(8),
  ),
  labelColor: Colors.blue,
  unselectedLabelColor: Colors.grey,
  isScrollable: true,
)

2. 第三方包（复杂样式/动效场景） #

如果需要更丰富的预设样式或动效，可以用这些包：

• tab_indicator_styler：快速实现圆角渐变、下划线粗细调整等多种指示器样式
• flutter_svg：配合自定义SVG图标，实现更细腻的Tab视觉效果

二、点击Tab切换右侧内容 #

核心通过TabController关联TabBar与TabBarView，实现同步切换：

1. 在State类中初始化并销毁控制器：

late TabController _tabController;

@override
void initState() {
  super.initState();
  _tabController = TabController(length: 3, vsync: this);
}

@override
void dispose() {
  _tabController.dispose();
  super.dispose();
}

2. 关联Tab栏与内容区域：

Row(
  children: [
    // 左侧Tab栏
    SizedBox(
      width: 160,
      child: TabBar(
        controller: _tabController,
        tabAlignment: TabAlignment.start,
        // 其他样式配置...
      ),
    ),
    // 垂直分隔线
    VerticalDivider(width: 1, color: Colors.grey.shade300),
    // 右侧内容区域
    Expanded(
      child: TabBarView(
        controller: _tabController,
        children: const [
          ProfilePage(), // 自定义页面组件
          TeamPage(),
          SettingsPage(),
        ],
      ),
    ),
  ],
)

点击Tab时，TabController会自动同步切换TabBarView内的页面。

三、添加垂直和水平分隔线 #

1. 垂直分隔线 #

两种实现方式：

• 原生组件：VerticalDivider(width: 1, color: Colors.grey.shade300)
• 自定义容器：Container(width: 1, color: Colors.grey.shade300, height: double.infinity)

2. 水平分隔线 #

同样有两种方式：

• 原生组件：Divider(height: 1, color: Colors.grey.shade300)
• 自定义容器：Container(height: 1, color: Colors.grey.shade300, width: double.infinity)
  可放在Tab栏底部、内容区域顶部等位置，示例：

Column(
  children: [
    TabBar(...),
    Divider(height: 1, color: Colors.grey.shade300),
    Expanded(child: TabBarView(...)),
  ],
)

内容的提问来源于stack exchange，提问作者Hadi Khan