flutter - ToggleButton 颜色在 Flutter 中点击时不会改变

Question

在 Flutter 中，我有一个简单的动态生成的切换按钮，但出于某种原因，它们在被点击时没有改变颜色。单击时按钮选择值正常，如打印语句所检查的那样。

var responses = responseArray;
  List<bool> isSelected = [];
  List<Widget> ratingWidgets = [];

  for (int i = 0; i < responses.length; i++) {
    isSelected.add(false);
    ratingWidgets.add(Text(responses[i].toString()));
  }
 
  return Center(
      child: Column(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      SizedBox(
        height: 15.0,
      ),
      ToggleButtons(
        borderRadius: const BorderRadius.all(Radius.circular(8)),
        borderColor: Colors.blue,
        selectedColor: Colors.green, // This is not happening
        color: Colors.red,
        isSelected: isSelected,
        children: ratingWidgets,
        direction: Axis.horizontal,
        onPressed: (int index) {
          setState(() {
            for (int i = 0; i < isSelected.length; i++) {
              isSelected[i] = i == index;
            }
          });
          print(isSelected);
        },
      ),

我也尝试过使用一种方法来生成颜色并设置颜色变量，但这也没有用，我哪里错了？

更新:

产生相同错误的最少代码:

    import 'package:flutter/material.dart';
    import 'package:modal_progress_hud_nsn/modal_progress_hud_nsn.dart';
    
    void main() => runApp(MaterialApp(home: MyApp()));
    
    class MyApp extends StatefulWidget {
      const MyApp({Key? key}) : super(key: key);
    
      @override
      State<MyApp> createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      bool spinnerRun = false;
      List<List<String>> responseArray = [];
    
      @override
      void initState() {
        responseArray.add(["Very good", "Good", "Poor", "Very Poor"]);
        responseArray.add(["Good", "Better", "Best"]);
        responseArray.add(["Yes", "No", "MayBe"]);
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.white,
          body: ModalProgressHUD(
            inAsyncCall: spinnerRun,
            child: Column(
              children: [
                SizedBox(
                  height: 50.0,
                ),
                for (int i = 0; i < 3; i++) getToggleButttonBars(responseArray[i])
              ],
            ),
          ),
        );
      }
    
      getToggleButttonBars(List<String> responseArray) {
        var responses = responseArray;
        List<bool> isSelected = [];
        List<Widget> ratingWidgets = [];
    
        for (int i = 0; i < responses.length; i++) {
          isSelected.add(false);
          ratingWidgets.add(Text(responses[i].toString()));
        }
    
        return Padding(
            padding: const EdgeInsets.all(8.0),
            child: ToggleButtons(
              borderRadius: const BorderRadius.all(Radius.circular(8)),
              selectedBorderColor: Colors.green,
              borderColor: Colors.blue,
              selectedColor: Colors.green, // This is not happening
              color: Colors.red,
              isSelected: isSelected,
              children: ratingWidgets,
              direction: Axis.horizontal,
              onPressed: (int index) {
                setState(() {
                  for (int i = 0; i < isSelected.length; i++) {
                    isSelected[i] = i == index;
                  }
                });
                print(isSelected);
              },
            ));
      }
    }

Answer 1

这里的主要问题是将选定的 holder 放入构建方法中，它将在每次构建时重置为默认值。我认为最好改用 map 或模型类，我正在使用 List<List<bool>>目前在州一级。

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool spinnerRun = false;
  List<List<String>> responseArray = [];
  List<List<bool>> isSelected = [];

  @override
  void initState() {
    super.initState();
    responseArray.add(["Very good", "Good", "Poor", "Very Poor"]);
    responseArray.add(["Good", "Better", "Best"]);
    responseArray.add(["Yes", "No", "MayBe"]);

    for (int i = 0; i < responseArray.length; i++) {
      isSelected.add(List.generate(responseArray[i].length, (index) => false));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: ModalProgressHUD(
        inAsyncCall: spinnerRun,
        child: Column(
          children: [
            SizedBox(
              height: 50.0,
            ),
            for (int i = 0; i < 3; i++) getToggleButttonBars(i)
          ],
        ),
      ),
    );
  }

  getToggleButttonBars(int index) {
    var responses = responseArray[index];

    List<Widget> ratingWidgets = [];

    for (int i = 0; i < responses.length; i++) {
      ratingWidgets.add(Text(responses[i].toString()));
    }

    return Padding(
        padding: const EdgeInsets.all(8.0),
        child: ToggleButtons(
          borderRadius: const BorderRadius.all(Radius.circular(8)),
          selectedBorderColor: Colors.green,
          borderColor: Colors.blue,
          selectedColor: Colors.green,
          color: Colors.red,
          isSelected: isSelected[index],
          children: ratingWidgets,
          direction: Axis.horizontal,
          onPressed: (int j) {
            for (int i = 0; i < isSelected[index].length; i++) {
              isSelected[index][i] = j == i;
            }

            setState(() {});
          },
        ));
  }
}