flutter如何实现segment分段功能

在Flutter中如何实现类似iOS的UISegmentedControl分段选择控件？想找一个性能好且支持自定义样式的解决方案，官方提供的CupertinoSlidingSegmentedControl不太符合需求。请问有哪些推荐的第三方库或自定义实现方案？最好能支持动态分段数量、选中状态样式定制和滑动切换效果。

2 回复

Flutter中实现分段功能常用CupertinoSlidingSegmentedControl或第三方库flutter_segment。
Cupertino风格示例：

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

Material风格可用ToggleButtons或flutter_slidable。

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


在Flutter中实现分段功能（Segment Control）可以通过以下方式：

1. 使用 CupertinoSlidingSegmentedControl（iOS风格）

import 'package:flutter/cupertino.dart';

class SegmentExample extends StatefulWidget {
  @override
  _SegmentExampleState createState() => _SegmentExampleState();
}

class _SegmentExampleState extends State<SegmentExample> {
  int _selectedSegment = 0;

  @override
  Widget build(BuildContext context) {
    return CupertinoSlidingSegmentedControl<int>(
      groupValue: _selectedSegment,
      children: {
        0: Text('选项1'),
        1: Text('选项2'),
        2: Text('选项3'),
      },
      onValueChanged: (value) {
        setState(() {
          _selectedSegment = value!;
        });
      },
    );
  }
}

2. 使用第三方包 flutter_segmented_control

在 pubspec.yaml 中添加：

dependencies:
  flutter_segmented_control: ^2.0.0

使用示例：

import 'package:flutter_segmented_control/flutter_segmented_control.dart';

SegmentedControl(
  selectedIndex: _selectedIndex,
  children: {
    0: Text('全部'),
    1: Text('进行中'),
    2: Text('已完成'),
  },
  onValueChanged: (index) {
    setState(() {
      _selectedIndex = index;
    });
  },
);

3. 自定义分段控件

class CustomSegmentControl extends StatefulWidget {
  @override
  _CustomSegmentControlState createState() => _CustomSegmentControlState();
}

class _CustomSegmentControlState extends State<CustomSegmentControl> {
  int _currentIndex = 0;
  final List<String> _tabs = ['选项1', '选项2', '选项3'];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      decoration: BoxDecoration(
        color: Colors.grey[200],
        borderRadius: BorderRadius.circular(8),
      ),
      child: Row(
        children: List.generate(_tabs.length, (index) {
          return Expanded(
            child: GestureDetector(
              onTap: () {
                setState(() {
                  _currentIndex = index;
                });
              },
              child: Container(
                decoration: BoxDecoration(
                  color: _currentIndex == index 
                    ? Colors.blue 
                    : Colors.transparent,
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Center(
                  child: Text(
                    _tabs[index],
                    style: TextStyle(
                      color: _currentIndex == index 
                        ? Colors.white 
                        : Colors.black,
                    ),
                  ),
                ),
              ),
            ),
          );
        }),
      ),
    );
  }
}

主要特点：

  • CupertinoSlidingSegmentedControl：iOS原生风格
  • flutter_segmented_control：提供更多自定义选项
  • 自定义实现：完全控制样式和交互

选择哪种方式取决于你的设计需求和平台适配要求。

回到顶部