如何在Flutter Flow中实现跨页单选的多行关联单选按钮？

核心实现思路（无需自定义函数） #

利用Flutter Flow的状态管理变量，给现有按钮绑定单选互斥逻辑，同时保留你需要的布局样式：

• 步骤1：创建状态变量存储选中值
  打开左侧的「State Management」面板，新建一个String或int类型的变量（例如命名为selectedOption），初始值设为null或默认选项（比如"1"）。

• 步骤2：给每个按钮绑定点击与选中状态
  保留你当前的按钮布局，对每个按钮（对应选项1-6）做如下设置：

  1. 点击事件：添加「Set State」动作，将selectedOption赋值为当前按钮对应的选项值（比如选项1的按钮就设为"1"，选项2设为"2"，以此类推）。
  2. 选中样式切换：在按钮的样式设置中，使用「Conditional Styling」（条件样式），判断selectedOption == "当前选项值"，满足时设置选中状态的样式（比如高亮背景色、边框），不满足时用默认样式。

• 步骤3：实现单选互斥
  因为所有按钮共享同一个selectedOption变量，当某一个按钮被点击时，变量会被更新为对应值，其他按钮的条件样式判断会自动不成立，自然实现整页仅能选中一项的互斥效果。

• 步骤4：获取选中项
  随时可以直接调用selectedOption变量获取当前选中的选项值：

  • 提交数据时，直接将该变量作为参数传递；
  • 需要实时响应选中动作时，可在按钮的点击事件中，在设置状态后添加额外动作（比如显示提示、触发API请求）。

补充说明 #

你之前尝试的复选框无法实现单选，是因为复选框本身是为多选场景设计的，Flutter Flow中没有原生的单选复选框组逻辑，用自定义按钮绑定状态变量的方式，既能保留你想要的布局，又能完美实现单选需求。

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