Flutter中如何将ToggleButtons集成至现有糖尿病剂量计算代码

核心思路 #

ToggleButtons实现三选一的核心是维护一个长度为3的布尔数组isSelected，用来记录每个按钮的选中状态，点击时更新对应索引的状态并确保同一时间只有一个按钮被选中。

完整代码示例 #

import 'package:flutter/material.dart';

class MealDoseCalculator extends StatefulWidget {
  const MealDoseCalculator({super.key});

  @override
  State<MealDoseCalculator> createState() => _MealDoseCalculatorState();
}

class _MealDoseCalculatorState extends State<MealDoseCalculator> {
  // 维护选中状态，初始默认第一个按钮选中
  List<bool> isSelected = [true, false, false];
  // 对应三个选项的文本，可根据你的需求修改
  final List<String> options = ['正餐', '加餐', '零食'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('糖尿病餐食剂量计算')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 集成ToggleButtons到你的现有布局中
            ToggleButtons(
              isSelected: isSelected,
              // 点击回调，确保同一时间只有一个选中
              onPressed: (int index) {
                setState(() {
                  // 先把所有状态设为false，再把当前点击的设为true
                  for (int i = 0; i < isSelected.length; i++) {
                    isSelected[i] = i == index;
                  }
                  // 这里可以添加选中后的逻辑，比如根据选项切换剂量计算规则
                  switch(index) {
                    case 0:
                      // 正餐逻辑
                      break;
                    case 1:
                      // 加餐逻辑
                      break;
                    case 2:
                      // 零食逻辑
                      break;
                  }
                });
              },
              // 自定义样式，匹配你的界面风格
              selectedColor: Colors.white,
              fillColor: Colors.blue,
              color: Colors.grey,
              borderColor: Colors.blue,
              selectedBorderColor: Colors.blue,
              borderRadius: BorderRadius.circular(8),
              // 生成按钮子组件
              children: options.map((option) {
                return Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
                  child: Text(option),
                );
              }).toList(),
            ),
            // 下面是你原有的其他界面元素，比如输入框、计算按钮等
            const SizedBox(height: 20),
            const TextField(
              decoration: InputDecoration(labelText: '碳水化合物含量(g)'),
              keyboardType: TextInputType.number,
            ),
            // ... 其他现有组件
          ],
        ),
      ),
    );
  }
}

集成到现有代码的步骤 #

1. 状态迁移：如果你的现有页面是StatelessWidget，需要改成StatefulWidget（因为要维护选中状态）；如果已经是StatefulWidget，直接在对应的State类中添加isSelected数组和选项文本。
2. 嵌入布局：把上述代码中的ToggleButtons组件放到你现有界面的合适位置（比如顶部、输入区域上方），替换对应的占位或空白部分。
3. 逻辑对接：在onPressed回调里，根据选中的索引（0/1/2）对接你的餐食剂量计算逻辑，比如切换不同的计算系数、显示不同的输入项等。
4. 样式调整：根据你提供的参考截图，修改selectedColor、fillColor、borderRadius等样式参数，让ToggleButtons和你的界面风格统一。

关键注意点 #

• 确保isSelected数组长度和按钮数量一致，这里是3个选项所以长度为3。
• 点击时通过循环重置所有状态为false，再设置当前索引为true，保证三选一的排他性。
• 如果需要保存选中状态或传递到其他页面，可以把isSelected的状态提升到父组件或使用状态管理工具（比如Provider）。

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