切换按钮不改变状态

Question

我的页面中有三个切换按钮。当我单击任一切换按钮时，它保持不变。

class EditInvoiceDetailsScreen extends HookWidget {
  final Invoice invoice;

  EditInvoiceDetailsScreen(this.invoice, {super.key});

  @override
  Widget build(BuildContext context) {
    final isSelected = useState(<bool>[true, false, false]);
    return Scaffold(
      body: _showBody(context, isSelected),
      appBar: AppBar(
          iconTheme: const IconThemeData(color: Colors.white),
          backgroundColor: AppTheme.light.colorScheme.primary,
          title: Text(
            'edit'.tr(),
            style: const TextStyle(color: Colors.white),
          )),
    );
  }
 Widget _showBody(BuildContext context, ValueNotifier<List<bool>> isSelected) {
    return _step2Body(context, isSelected);
  }

  Widget _step2Body(BuildContext context, ValueNotifier<List<bool>> isSelect) {
    return ToggleButtons(
      onPressed: (newIndex) {
        for (int i = 0; i < isSelect.value.length; i++) {
          isSelect.value[i] = i == newIndex;
        }
      },
      // list of booleans
      borderRadius: const BorderRadius.all(Radius.circular(8)),
      selectedBorderColor: Colors.red[700],
      selectedColor: Colors.white,
      fillColor: Colors.red[200],
      color: Colors.red[400],
      constraints: const BoxConstraints(
        minHeight: 40.0,
        minWidth: 80.0,
      ),
      isSelected: isSelect.value,

      // if consistency is needed for all text style
      textStyle: const TextStyle(fontWeight: FontWeight.bold),
      // border properties for each toggle
      renderBorder: true,
      borderColor: Colors.black,
      borderWidth: 1.5,

      children: const [
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 12),
          child: Text('MALE', style: TextStyle(fontSize: 18)),
        ),
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 12),
          child: Text('FEMALE', style: TextStyle(fontSize: 18)),
        ),
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 12),
          child: Text('OTHER', style: TextStyle(fontSize: 18)),
        ),
      ],
    );
  }

---

Answer 1

代码中的几个错误：

1. final isSelected = useState(<bool>[true, false, false]);

   //这里的useState是什么？

2. isSelected: isSelect.value,

   // 应该是 isSelected: isSelect,

3. isSelect.value[i] = i == newIndex;

   //应该是isSelect[i] = i == newIndex;

4. 你错过了禁用的颜色值

 disabledColor: Colors.black,

disabledBorderColor: Colors.grey,

这里是修改后的代码：

  List<bool> isSelect = [true, false, false];

    ToggleButtons(
                    onPressed: (newIndex) {
                      for (int i = 0; i < isSelect.length; i++) {
                        //If you need single select use this
                        isSelect[i] = i == newIndex;
                        //If you need multi select use this
                        //isSelect[newIndex] = !isSelect[newIndex];
                      }
                      setState(() {});
                    },
                    // list of booleans
                    borderRadius: const BorderRadius.all(Radius.circular(8)),
                    selectedBorderColor: Colors.red[700],
                    selectedColor: Colors.white,
                    disabledColor: Colors.black,
                    disabledBorderColor: Colors.grey,
                    fillColor: Colors.red[200],
                    color: Colors.red[400],
                    constraints: const BoxConstraints(
                      minHeight: 40.0,
                      minWidth: 80.0,
                    ),
                    isSelected: isSelect,
    
                    // if consistency is needed for all text style
                    textStyle: const TextStyle(fontWeight: FontWeight.bold),
                    // border properties for each toggle
                    renderBorder: true,
                    // borderColor: Colors.black,
                    borderWidth: 1.5,
    
                    children: const [
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 12),
                        child: Text('MALE', style: TextStyle(fontSize: 18)),
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 12),
                        child: Text('FEMALE', style: TextStyle(fontSize: 18)),
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 12),
                        child: Text('OTHER', style: TextStyle(fontSize: 18)),
                      ),
                    ],
                  ),