main.dart 2019-03-18

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // 这个小部件是应用程序的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是应用程序的主题。
        //
        // 尝试使用“flutter run”运行应用程序。您将看到应用程序有一个蓝色的工具栏。
        //然后，在不退出应用程序的情况下，尝试将下面的primaryswatch更改为colors.green，然后调用“热重新加载”
        //（在运行“flutter run”的控制台中按“r”，或将更改保存到flutter ide中的“热重新加载”）。
        //注意，计数器没有重置回零；应用程序没有重新启动。
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: '主页'),
    );
  }
}

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

  // 这个小部件是应用程序的主页。它是有状态的，这意味着它有一个状态对象（定义见下文），其中包含影响其外观的字段。
  //此类是状态的配置。它保存由父级（在本例中是应用程序小部件）提供的值（在本例中是标题），并由状态的构建方法使用。小部件子类中的字段总是标记为“final”。

  final String title;

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

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

  void _incrementCounter() {
    setState(() {
      // 对setstate的调用告诉flutter框架在这种状态下发生了变化，这会导致它重新运行下面的构建方法，以便显示可以反映更新的值。
      // 如果我们在不调用setState（）的情况下更改了_counter，则不会再次调用build方法，因此不会出现任何情况。
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // 每次调用setState时都会重新运行此方法，例如，使用上面的_incrementcounter方法。
    //
    //flutter框架已经过优化，可以快速地重新运行构建方法，这样您就可以重新构建任何需要更新的东西，而不必单独更改小部件的实例。
    return Scaffold(
      appBar: AppBar(
        // 这里我们从app.build方法创建的myhomepage对象中获取值，并使用它来设置AppBar标题。
        title: Text(widget.title),
      ),
      body: Center(
        // 中心是一个布局小部件。它只需要一个child，并把它放在parent中间。
        child: Column(
          // Column也是布局小部件。它获取子项列表并垂直排列。
          // 默认情况下，它调整自身大小以水平适应其子级，并尝试与父级一样高。
          //
          // 调用“调试绘图”查看每个小部件的线框
          // （在控制台中按“P”，从Android Studio的flutter inspector中选择“toggle debug paint”操作，
          // 或在Visual Studio Code中选择“toggle debug paint”命令）
          //
          // Column具有各种属性来控制它如何调整自身大小以及如何定位子列
          // 这里我们使用mainaxisalignment使子元素垂直居中；
          // 这里的主轴是垂直轴，因为列是垂直的（横轴是水平的）
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '你已经按这个按钮',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            Text(
              '次了',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增量',
        child: Icon(Icons.add),
      ), // 这个尾随逗号使构建方法的自动格式化更好。
    );
  }
}