Flutter如何从单选ToggleButtons获取选中项的字符串值并跨页传递

核心逻辑 #

现有代码已经通过isSelected布尔列表实现了单选选中的状态标记，只需要给每个状态位绑定对应的选项文本，就能在需要时取出选中项的字符串值。

操作步骤 #

• 抽离独立的选项文本列表，顺序必须和ToggleButtons的children组件严格一一对应，避免匹配错位：

// 列表顺序和ToggleButtons内三个选项的顺序完全对齐
final List<String> genderOptions = ["Male", "Female", "Non-Binary"];

• 编写取值方法，通过isSelected找到选中项的索引，再从文本列表中取出对应值：

String getSelectedGender() {
  // 定位isSelected里值为true的位置
  int selectedIndex = isSelected.indexOf(true);
  // 没选中的时候返回空字符串，可根据业务逻辑补充校验提示
  if (selectedIndex == -1) return "";
  return genderOptions[selectedIndex];
}

• 可以把原来onPressed里的循环单选逻辑简化，不需要每次循环遍历修改所有状态：

onPressed: (int index) {
  setState(() {
    // 直接生成全为false的选中列表，仅把当前点击的位置设为true，实现单选效果
    isSelected = List.generate(isSelected.length, (i) => i == index);
    // 选中选项后启用下一步按钮
    _enableBtn = true;
  });
}

• 跳转下一页时直接把取到的字符串作为参数传递即可，示例代码：

// 触发跳转到下一页面的代码
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => NextPage(
      gender: getSelectedGender(),
    ),
  ),
);

踩坑提醒 #

• 一定要保证genderOptions的顺序和ToggleButtons里的子组件顺序一致，否则会出现选了Male却取到对应位置错配值的问题
• 不要把选项文案硬写在Text组件里，抽成独立列表后，后续调整文案、修改选项顺序都不需要改动取值逻辑

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