Question

我正在设计用于移动应用程序的UI。我该如何实现一个复选框，将其状态从false更改为true，反之亦然？

bool _value1 = false;
new CheckboxListTile(
        value: _value1,
        onChanged: (bool val) => setState(() => _value1 = val),
        title: new Text('Remember me'),
        controlAffinity: ListTileControlAffinity.leading,
        activeColor: Colors.black,
      ),

我没有收到任何错误，但是当我单击复选框时，它没有更改其状态。

编辑：完整的代码是这样的-

bool _value1 = false;
return Scaffold(
  backgroundColor: Colors.white,
  body: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage("assets/background.jpg"),
        fit: BoxFit.fill,
      ),
    ),
    child: Column(
        children: <Widget>[
        SizedBox(height: 258.0),
        username,
        SizedBox(height: 22.0),
        password,
        SizedBox(height: 4.0),
          new CheckboxListTile(
            value: _value1,
            onChanged: (bool val) => setState(() => _value1 = val),
            title: new Text('Remember me'),
            controlAffinity: ListTileControlAffinity.leading,
            activeColor: Colors.black,
          ),
        SizedBox(height: 8.0),
        loginButton,
          SizedBox(height: 58.0),
          new Text(' Version 1.1'),
        ],
    ) ,
  ),
);

其中返回支架位于其中

class LoginPage extends StatefulWidget {
 static String tag = 'login-page';
  @override
  _LoginPageState createState() => new _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {.....}

用户名，密码和登录按钮是其他小部件。

Answer 1

您的代码中的问题是您使用了错误的方式。尝试以下代码：

bool _value1 = false;
new CheckboxListTile(
        value: _value1,
        onChanged: () {
          if (_value1 == false) {
            setState(() => _value1 = true)
          } else {
            setState(() => _value1 = false)
          }
        },
        title: new Text('Remember me'),
        controlAffinity: ListTileControlAffinity.leading,
        activeColor: Colors.black,
      ),

Answer 2

我看到了问题，您必须排除在此之外：bool _value1 = false;每次调用setState时，您都在告诉框架要重建，因此再次调用了build方法，即setState ，就像您再次调用构建方法一样。因此，解决方案将bool _value1 = false;置于build方法之外，因此var可以更改，现在它始终为false。

如何更改复选框的状态？

2 个答案: