Flutter:Checkbox onChange即使更改值也不会更新UI

时间:2019-11-11 10:59:11

标签: flutter

我正在扑朔迷离地构建一个To App,我想通过使用复选框来更改个人待办事项的布尔值。尽管该值确实发生更改,但它不会反映在UI中。我做错什么了吗?

开始时,我没有使用布尔值来更改Todo的completed属性的值。我试图使用复选框更改它,但是它似乎没有用,这就是为什么我放了一个布尔值。

导入'package:flutter / material.dart';     导入'./todo.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'To do app',
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.green,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.light,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List _myTodos = [
    Todo(title: 'Take the dogs for a walk', completed: false, id: '1'),
    Todo(title: 'Go out for a run', completed: true, id: '2')
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('To do app'),
        centerTitle: true,
      ),
      body: _myTodos.isEmpty
          ? Text(
              'Press the button to add a new Todo',
              style: TextStyle(fontSize: 20),
            )
          : Column(
              children: _myTodos.map((todo) {
              bool completed = todo.completed;
              return Row(
                children: <Widget>[
                  Checkbox(
                    value: completed,
                    onChanged: (bool newValue) {
                      print(completed);
                      setState(() {
                        completed = newValue;
                        print(completed);
                      });
                    },
                  ),
                  Text(
                    todo.title,
                    style: TextStyle(fontSize: 16),
                  )
                ],
              );
            }).toList()),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        elevation: 8,
        child: Icon(Icons.add),
      ),
    );
  }
}

1 个答案:

答案 0 :(得分:0)

谢谢大家的回答。我发现了我的问题。在Todo课堂中,我将完成的值设置为final,因此,当我按下它时,无法更改它。