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),
      ), // 这个尾随逗号使构建方法的自动格式化更好。
    );
  }
}

推荐阅读更多精彩内容