如何通过编程方式设置SegmentedButton的ButtonSegment为选中状态？

你可以通过以下两种方式实现根据布尔参数控制SegmentedButton的选中分段：

方式一：StatefulWidget（支持内部维护+外部参数更新） #

适合需要同时响应外部参数变化和用户手动切换的场景：

class SegmentedControlWidget extends StatefulWidget {
  final bool shouldSelectManage;
  final ValueChanged<bool>? onSelectionChanged;

  const SegmentedControlWidget({
    super.key,
    required this.shouldSelectManage,
    this.onSelectionChanged,
  });

  @override
  State<SegmentedControlWidget> createState() => _SegmentedControlWidgetState();
}

class _SegmentedControlWidgetState extends State<SegmentedControlWidget> {
  late MenuOptions menuOptionsView;

  @override
  void initState() {
    super.initState();
    // 初始化选中状态
    menuOptionsView = widget.shouldSelectManage ? MenuOptions.manage : MenuOptions.reports;
  }

  @override
  void didUpdateWidget(covariant SegmentedControlWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 外部参数变化时同步更新选中状态
    if (oldWidget.shouldSelectManage != widget.shouldSelectManage) {
      setState(() {
        menuOptionsView = widget.shouldSelectManage ? MenuOptions.manage : MenuOptions.reports;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return SegmentedButton<MenuOptions>(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.resolveWith<Color?>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.selected)) {
              return const Color.fromARGB(255, 196, 238, 148);
            }
            return null; // 使用组件默认背景色
          },
        ),
      ),
      showSelectedIcon: false,
      segments: const <ButtonSegment<MenuOptions>>[
        ButtonSegment<MenuOptions>(
          value: MenuOptions.manage,
          label: Text('Manage'),
          icon: Icon(Icons.precision_manufacturing_rounded),
        ),
        ButtonSegment<MenuOptions>(
          value: MenuOptions.reports,
          label: Text('Reports'),
          icon: Icon(Icons.paste),
        ),
      ],
      selected: {menuOptionsView},
      onSelectionChanged: (Set<MenuOptions> newSelection) {
        setState(() {
          menuOptionsView = newSelection.first;
          // 可选：将选中状态同步回父组件
          widget.onSelectionChanged?.call(menuOptionsView == MenuOptions.manage);
        });
      },
    );
  }
}

// 确保你已定义对应的枚举
enum MenuOptions { manage, reports }

方式二：StatelessWidget（完全由外部参数控制） #

适合选中状态完全由外部传入参数决定，不需要内部维护状态的场景：

class SegmentedControlStateless extends StatelessWidget {
  final bool shouldSelectManage;
  final ValueChanged<bool>? onSelectionChanged;

  const SegmentedControlStateless({
    super.key,
    required this.shouldSelectManage,
    this.onSelectionChanged,
  });

  @override
  Widget build(BuildContext context) {
    // 根据布尔参数直接计算选中的分段值
    final selectedValue = shouldSelectManage ? MenuOptions.manage : MenuOptions.reports;

    return SegmentedButton<MenuOptions>(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.resolveWith<Color?>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.selected)) {
              return const Color.fromARGB(255, 196, 238, 148);
            }
            return null; // 使用组件默认背景色
          },
        ),
      ),
      showSelectedIcon: false,
      segments: const <ButtonSegment<MenuOptions>>[
        ButtonSegment<MenuOptions>(
          value: MenuOptions.manage,
          label: Text('Manage'),
          icon: Icon(Icons.precision_manufacturing_rounded),
        ),
        ButtonSegment<MenuOptions>(
          value: MenuOptions.reports,
          label: Text('Reports'),
          icon: Icon(Icons.paste),
        ),
      ],
      selected: {selectedValue},
      onSelectionChanged: (Set<MenuOptions> newSelection) {
        // 将用户选择同步回父组件
        widget.onSelectionChanged?.call(newSelection.first == MenuOptions.manage);
      },
    );
  }
}

enum MenuOptions { manage, reports }

使用说明 #

• 当传入的shouldSelectManage为true时，自动选中第一个Manage分段；为false时选中第二个Reports分段
• 如果需要将用户手动切换的结果通知给父组件，可使用onSelectionChanged回调

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