颤振复选框未更改/更新/工作

Question

我正在尝试学习 Flutter 中的复选框。

问题是，当我想在 Scaffold(body:) 中使用复选框时，它正在工作。但我想在不同的地方使用它，比如 ListView 中的一个项目。

return Center(
    child: Checkbox(
  value: testValue,
  onChanged: (bool value) {
    setState() {
      testValue = value;
    }
  },
));

但它不起作用，更新和改变任何东西。

编辑：我通过将复选框放入 StatefulBuilder 解决了我的问题。感谢@cristianbregant

 return StatefulBuilder(
    builder: (BuildContext context, StateSetter setState) {
  return Center(
    child: CheckboxListTile(
      title: const Text('Animate Slowly'),
      value: _valueCheck,
      onChanged: (bool value) {
        setState(() {
          _valueCheck = value;
        });
      },
      secondary: const Icon(Icons.hourglass_empty),
    ),
  );
});

Answer 1

不妨试试这些：

return Center(
  child: CheckboxListTile(
    title: const Text('Animate Slowly'),
    value: _valueCheck,
    onChanged: (bool value) {
      setState(() {
       _valueCheck = value;
      });
    },
    secondary: const Icon(Icons.hourglass_empty),
  ),
);

请记住，如果您在对话框或bottomsheet 中使用它，则需要将 Checkbox Widget 包装在 Stateful 构建器中，因为状态不会更新。

Answer 2

复选框要求您将 Scaffold 或 Material 作为其父级。如果没有其中任何一个，您会收到以下有用的错误消息：

The following assertion was thrown building Checkbox(dirty, state: _CheckboxState#1163b):
No Material widget found.

Checkbox widgets require a Material widget ancestor.
In material design, most widgets are conceptually "printed" on a sheet of material.
In Flutter's material library, that material is represented by the Material widget. It is the Material widget that renders ink splashes, for instance. Because of this, many material library widgets require that there be a Material widget in the tree above them.

一旦你有了一个材质的祖先，你可以将 ListView 作为它的子元素，它应该可以正常显示：

class SettingsPage extends StatefulWidget {
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  var _foo = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Toggle Foo'),
              Checkbox(
                value: _foo,
                onChanged: (bool value) {
                  setState(() => _foo = value);
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Answer 3

看来您必须同时使用initState 和dispose。

请参阅下面的代码示例：

class SettingsOrder extends StatefulWidget {
  @override
  _SettingsOrderState createState() => _SettingsOrderState();
}

class _SettingsOrderState extends State<SettingsOrder> {

  List options = [];
  List<bool> newoptions = [];
  int selectedoption;
  bool checkedstatus;
  bool initialcall;

Future getproductlist(selectedoption, checkedstatus, initialcall) async{

    List updatedlist = [];

    final arguments = ModalRoute.of(context).settings.arguments as Map;
    int itempos = 0;
    options.clear();

    if(initialcall == false){
      for(var item in arguments['options']){
        updatedlist.add({
          'checkbox' : newoptions[itempos]
        });
        itempos++;
      }
    } else {
      for(var item in arguments['options']){
        updatedlist.add({
          'checkbox' : checkedstatus
        });
        newoptions.add(false);
        itempos++;
      }
    }

    setState(() {
      options = updatedlist;
    });
    
  }

  @override
  void initState(){
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    getproductlist(0, false, true);

    return Scaffold(
      body: SingleChildScrollView(
        child: Container(
           width: double.infinity,
           child: ListView.builder(
             primary: false,
             shrinkWrap: true,
             itemCount: options.length,
             itemBuilder: (BuildContext context, int index){
              return Container(
                child: Theme(
                  data: ThemeData(
                    unselectedWidgetColor: Colors.grey
                  ),
                  child: CheckboxListTile(
                    controlAffinity: ListTileControlAffinity.trailing,
                    title: Text(options[index]['name']),
                    value: options[index]['checkbox'],
                    onChanged: (newvalue){
                      int indexposition = index;
                      newoptions.removeAt(indexposition);
                      newoptions.insert(indexposition, newvalue);
                      getproductlist(indexposition, newvalue, false);
                    },
                    activeColor: Color.fromRGBO(0, 130, 214, 1),
                    checkColor: Colors.white,
                  ),
                ),
               );
              }
            ),
           ),
          ),
       );
}