Flutter如何实现CupertinoSegmentedControl

在Flutter中如何正确使用CupertinoSegmentedControl组件？我尝试按照官方文档实现，但遇到以下问题：

  1. 如何设置分段控件的默认选中项？
  2. 如何自定义控件的颜色和样式来匹配应用主题？
  3. 当选项数量较多时，控件显示不完整该怎么处理？
  4. 能否给每个分段添加图标而不仅仅是文字？ 希望有经验的开发者能分享具体的代码示例和最佳实践。
2 回复

Flutter中使用CupertinoSegmentedControl实现iOS风格分段控件。需传入Map类型选项，设置当前选中值和onValueChanged回调。示例：

CupertinoSegmentedControl(
  children: {0: Text('选项1'), 1: Text('选项2')},
  onValueChanged: (value) { setState(() => _selected = value); },
  groupValue: _selected,
)

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


在 Flutter 中，CupertinoSegmentedControl 是 iOS 风格的段控件，用于在多个选项之间切换。以下是实现方法：

基本使用

  1. 导入 Cupertino 包：
import 'package:flutter/cupertino.dart';
  1. 定义状态变量和选项：
int _selectedSegment = 0;
final Map<int, Widget> segments = {
  0: Text('选项1'),
  1: Text('选项2'),
  2: Text('选项3'),
};
  1. 在 build 方法中使用：
CupertinoSegmentedControl<int>(
  groupValue: _selectedSegment,
  children: segments,
  onValueChanged: (int value) {
    setState(() {
      _selectedSegment = value;
    });
  },
)

完整示例

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class SegmentedControlExample extends StatefulWidget {
  @override
  _SegmentedControlExampleState createState() => _SegmentedControlExampleState();
}

class _SegmentedControlExampleState extends State<SegmentedControlExample> {
  int _selectedSegment = 0;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Segmented Control'),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CupertinoSegmentedControl<int>(
              groupValue: _selectedSegment,
              children: const {
                0: Text('选项1'),
                1: Text('选项2'),
                2: Text('选项3'),
              },
              onValueChanged: (int value) {
                setState(() {
                  _selectedSegment = value;
                });
              },
            ),
            SizedBox(height: 20),
            Text('当前选择: 选项${_selectedSegment + 1}'),
          ],
        ),
      ),
    );
  }
}

主要属性说明

  • groupValue：当前选中的值
  • children：选项映射（键值对）
  • onValueChanged：选择变更回调
  • padding：内边距调整
  • borderColor：边框颜色
  • pressedColor：按下颜色

注意事项

  • 适用于需要 iOS 风格界面的场景
  • 确保 groupValue 与 children 的键匹配
  • 通过 setState 更新状态以刷新界面

这样即可在 Flutter 中实现功能完整的 iOS 风格分段控件。

回到顶部