flutter如何实现分段组件

在Flutter中如何实现类似iOS的UISegmentedControl分段组件？我想在应用中添加一个可切换不同内容的分段选择器，但不知道Flutter是否有内置组件支持。如果需要自定义实现，应该用什么Widget组合？最好能支持自定义样式和点击回调，求具体实现方案或推荐好用的第三方库。

2 回复

Flutter中可通过CupertinoSlidingSegmentedControl（iOS风格）或自定义Row与TabBar实现分段组件。需设置onValueChanged回调处理切换逻辑，配合状态管理更新内容。

更多关于flutter如何实现分段组件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以通过以下方式实现分段组件：

1. 使用官方CupertinoSlidingSegmentedControl（iOS风格）

CupertinoSlidingSegmentedControl<int>(
  groupValue: _selectedValue,
  children: {
    0: Text('选项1'),
    1: Text('选项2'),
    2: Text('选项3'),
  },
  onValueChanged: (value) {
    setState(() {
      _selectedValue = value;
    });
  },
)

2. 自定义TabBar实现分段组件

TabBar(
  tabs: [
    Tab(text: '选项1'),
    Tab(text: '选项2'),
    Tab(text: '选项3'),
  ],
  controller: _tabController,
  indicatorColor: Colors.blue,
  labelColor: Colors.blue,
  unselectedLabelColor: Colors.grey,
)

3. 使用第三方包（推荐）

在pubspec.yaml中添加：

dependencies:
  segmented_control: ^2.1.0

使用示例：

SegmentedControl(
  segments: [
    Segment('选项1'),
    Segment('选项2'),
    Segment('选项3'),
  ],
  selectedIndex: _selectedIndex,
  onSegmentChanged: (index) {
    setState(() {
      _selectedIndex = index;
    });
  },
)

4. 完全自定义实现

Row(
  children: [
    Expanded(
      child: _buildSegment('选项1', 0),
    ),
    Expanded(
      child: _buildSegment('选项2', 1),
    ),
    Expanded(
      child: _buildSegment('选项3', 2),
    ),
  ],
)

Widget _buildSegment(String text, int index) {
  return GestureDetector(
    onTap: () => setState(() => _selectedIndex = index),
    child: Container(
      padding: EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: _selectedIndex == index ? Colors.blue : Colors.grey[200],
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text(
        text,
        textAlign: TextAlign.center,
        style: TextStyle(
          color: _selectedIndex == index ? Colors.white : Colors.black,
        ),
      ),
    ),
  );
}

推荐使用第三方包，因为它提供了更好的视觉效果和交互体验，同时支持自定义样式。

回到顶部