年轻人的第一个Flutter程序(1)

import 'package:flutter/material.dart';

// 应用入口方法，Dart2中new关键词可以省略
// runApp里传入的是应用根Widget
void main() => runApp(new MyApp());


// StatelessWidget与StatefulWidget的区别 1️⃣
class MyApp extends StatelessWidget {
  // StatelessWidget中最重要的方法——此方法决定Widget显示什么
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      // title在Android上决定了多任务界面上App的名称
      // 而在iOS上没任何用处，iOS平台上以CFBundleDisplayName为准
      // 来源在WidgetsApp.title的注释上
      title: 'Flutter Demo',
      theme: new ThemeData(
        // App主题色色板
        // 另外原注释还介绍了部分热加载的触发点
        // 在IntelliJ中按Run > Flutter Hot Reload就可以热加载了
        // 或者直接保存文件也可以触发
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // 程序的首页，整个屏幕都由其显示
  // 既然它是StatefulWidget，那么肯定会有一个对应的State，这个State就是下面的_MyHomePageState

  // 继承StatefulWidget的类一般只是保存父Widget传来的值，供对应的State使用
  // 在Widget子类中的字段要用final修饰

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // 调用setState方法通知Flutter framework
      // framework将会重新运行下方的build方法来显示更新后的值
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // 当setState方法调用的时候，build方法都会重新运行
    // Flutter framework已经进行了优化，来更快的重新运行build方法
    // 因此当我们需要更新的时候，rebuild任何Widget都可以，而不是单独改变Widget。

    return new Scaffold(
      appBar: new AppBar(
        // 使用MyHomePage中保存的title作为AppBar的title
        title: new Text(widget.title),
      ),
      body: new Center(
        // Center可以让子Widget在父Widget中居中显示
        child: new Column(
          // Column相当于竖直的线性布局
          // 默认情况下，自身宽会适应子布局的宽，自身高为父布局的高
          //
          // 在Flutter Inspector中选择"Toggle Debug Paint"，可以看到每一个Widget的线框
          //
          // Column有一些属性可以控制自身的尺寸以及如何摆放子元素。比如这里的mainAxisAlignment
          // 关于Column、Row的mainAxisAlignment、crossAxisAlignment 2️⃣
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        // FAB的点击会触发`_incrementCounter`方法，从而刷新UI
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ),
    );
  }
}