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),
  ),
);

请记住，如果要在对话框或底部表单中使用它，则需要将其包装在有状态的构建器中，因为状态不会更新

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);
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Flutter复选框未更改/更新/工作

2 个答案: