Flutter学习笔记（一）：widget认识

在flutter所有的控件的现实都是通过widget来呈现出来的，当然数据和对应的widget是绑定的关系，这样类似一小程序中数据和控件的绑定关系，在数据修改是，flutter通过setState 来刷新数据。

Widget 分为 有状态 和 无状态 两种，在 Flutter 中每个页面都是一帧。无状态就是保持在那一帧。而有状态的 Widget 当数据更新时，其实是绘制了新的 Widget，只是 State 实现了跨帧的数据同步保存。

无状态StatelessWidget

继承 StatelessWidget，通过 build 方法返回一个布局好的控件,不会涉及到页面数据在操作过程中发生修改，可以进行数据的展示等操作，

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter'),
    );
  }
}

有状态StatefulWidget

你需要创建管理的是主要是 State ， 通过 State 的 build 方法去构建控件。在 State 中，你可以动态改变数据，这类似 MVVM 实现，在 setState 之后，改变的数据会触发 Widget 重新构建刷新。下方实现的就是在勾选单选框式同步的展示其勾选状态，

class CheckBoxAndSwitchPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _CheckBoxAndSwitchState();
  }
}

class _CheckBoxAndSwitchState extends State<CheckBoxAndSwitchPage> {
  bool _switchSelected = false;
  bool _checkboxSelected = false;
  bool _radioSelected = false;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("选择框"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Checkbox(
                  value: _checkboxSelected,
                  onChanged: (value) {
                    setState(() {
                      _checkboxSelected = value;
                    });
                  },
                ),
                Text("$_checkboxSelected"),
              ],
            ),
            Row(
              children: <Widget>[
                Switch(
                    value: _switchSelected,
                    onChanged: (value) {
                      setState(() {
                        _switchSelected = value;
                      });
                    }),
                Text("$_switchSelected"),
              ],
            )
          ],
        ),
      ),
    );
  }
}