Flutter Counter

如何写一个 Flutter 应用
什么是 Scaffold 组件
如何布局多个组件
如何修饰样式
对比 html 语法

如何写一个 Flutter 应用

我们从一个计数器讲起，首先建立 Counter 类

class Counter extends StatelessWidget {
  Counter(): super();
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Flutter Counter',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: CounterHomePage(title: 'Flutter Counter Home Page'),
    );
  }
}

在内部定义了构造方法，并且重构了 build 方法
其中 build 方法返回了一个 MaterialApp ，这就是 Flutter 提供的根组件，接下来只需提供一个 Widget ，将其赋值给 home 作为主页程序即可
再来看看赋值 home 的组件 CounterHomePage 是怎么写的

class CounterHomePage extends StatefulWidget {
  CounterHomePage({this.title = 'Hello World'}): super();
  String title;

  @override
  CounterHomePageState createState() => CounterHomePageState();
}

这个类继承自 StatefulWidget ，与 Counter 类继承的 StatelessWidget 成对比， Counter 是无状态的组件， CounterHomePage 是有状态的组件
其中重写了 StatefulWidget 的 createState 方法，返回值是用来管理其状态的 CounterHomePageState

class CounterHomePageState extends State<CounterHomePage> {
  int count = 0;

  void incrementCount() {
    setState(() {
        count += 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text(widget.title),),
      body: Center(
        child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('You have pushed the button this many times:'),
      Text(count.toString(), style: Theme
        .of(context)
        .textTheme
        .headline4),
      TextButton(
        child: Text('Open new route'),
        onPressed: () {
          Navigator.push(context, MaterialPageRoute(builder: (context){
          return NewRoute();
          }));
      },)
    ]
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: incrementCount,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

其中该类继承自泛型类 State<CounterHomePage> ，与 CounterHomePage 相关联
需要改变状态的时候，调用 setState 即可，该函数接收一个闭包。
而后， Flutter 框架检测到状态改变，销毁原来 build 的 CouterHomePageState ，而是重新调用 build 来代替
在程序中，改变状态通过 TextButton 的 OnPressed 回调来触发

还有一个程序的入口，主函数没有写

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

至此，我们的第一个计数器应用就搭建完毕了

什么是 Scaffold 组件

在上面的 CounterHomePageState 中，还有个 Scaffold 组件没有讲，这是 Flutter 为我们提供的主页，
官网的描述：Material Design布局结构的基本实现，类提供了用于显示drawer、snackbar和底部sheet的API。
可以编辑他的 appBar , body 属性，其中 body 作为主页的主体，随便放个组件进去就行了

如何布局多个组件

Scaffold 的 body 只能传递一个组件，想把一堆东西塞进去，可以使用 Flutter 提供的 布局组件 该类组件都有一个 children 属性，表示一个 Widget 数组
在上面的例子中， Column 就是一个布局组件，按竖直方向布局组件，并赋值 mainAxisalignment 为 center 表示主轴方向垂直对齐

等等， Column 上面还有个 Center 组件是怎么回事? 他为什么用 child ，而不用 children ?
Center 是一个容器组件，只有一个子元素，用 child 表示

布局类Widget是按照一定的排列方式来对其子Widget进行排列；
而容器类Widget一般只是包装其子Widget，对其添加一些修饰（补白或背景色等）、变换(旋转或剪裁等)、或限制(大小等)。
注意，Flutter官方并没有对Widget进行官方分类，我们对其分类主要是为了方便讨论和对Widget功能区分的记忆

除了 Center 外，其他容器类还有

填充（Padding）
尺寸限制类容器（ConstrainedBox等）
装饰容器（DecoratedBox）
变换（Transform）
Container容器
Scaffold、TabBar、底部导航
剪裁（Clip）

如何修饰样式

像 css 样式一样， flutter 中样式也可以继承，如果要更改，用 Theme 组件包装一下就可以了
其中 Theme 组件

Theme({Key? key, required ThemeData data, required Widget child})

最重要的是 ThemeData 这个结构， child 表示需要修饰的组件

对比 html 语法

对比 html 的标签语法，比如

<div>

</div>

<style>
  div {
  padding: 12px;
  }
</style>

可以用 Padding 组件写为

Padding(
  padding: EdgeInsets.all(12)
);

感觉是把一些属性单独提取出来，做成一个组件，如果需要修饰大量样式，应该用 Theme 组件