Flutter 分析初始页面架构源码 main.dart

Flutter 分析初始页面架构源码 main.dart

// import 导入类库，与java类似
import 'package:flutter/material.dart';

import 'text_example.dart';
// void main()就是程序的入口函数
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // 这个Widget是应用的根布局，类似于页面容器
  // 这个类就相当与用Java编写Android时的Application类，StatelessWidget表示无状态控件，
  // MaterialApp可以理解为ui的风格，而其中theme就是主题，比如primarySwatch表示主题色调，上面颜色为blue。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是您的应用程序的主题。
        // 尝试使用“ flutter run”运行 应用程序。会看到该应用程序具有一个蓝色的工具栏。然后，在不退出应用程序的情况下，
        // 尝试将下面的primarySwatch更改为Colors.green，然后调用“ hot reload”（在运行“ flutter run”的控制台中按“ r”，
        // 或者直接在其中保存对“ hot reload”的更改） Flutter IDE）。请注意，计数器没有重置为零。应用程序未重新启动。
        primarySwatch: Colors.blue,
        // 这使视觉密度适应其上运行应用程序的平台。对于台式机平台，控件将比移动平台上的控件更小，更靠近（更密集）。
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),  //这段代码代表主页，主页的标题就是Flutter Demo Home Page
      home: TextExample(),
    );//MyHomePage(title: 'Flutter Demo Home Page'),
  }
}
// 它继承至StatefulWidget，StatefulWidget与StatelessWidget相反，是一个有状态的控件，
// 如果你的页面需要动态的更新UI，那么就必须继承这个StatefulWidget有状态的控件，
// 相反，如果你只是静态的展示图片，文字等，就继承至StatelessWidget无状态控件就行。
class MyHomePage extends StatefulWidget {
  // 这个构造函数，其中的title就是通过上面的MyHomePage(title: ‘Flutter Demo Home Page’)赋值的，而且只能赋值一次，因为他的类型为final String。
  MyHomePage({Key key, this.title}) : super(key: key);

  //此小部件是应用程序的主页。它是有状态的，表示它具有一个State对象（定义如下），该对象包含影响其外观的字段。
  // 此类是状态的配置。它保存由父级（在此例中为App小部件）提供并由State的build方法使用的值（在本例中为标题）。 Widget子类中的字段始终标记为“ final”。
  final String title;
  // 这里可以简单的理解为所有实现有状态控件StatefulWidget的类都必须重写该方法，
  // 而前面的“_”在dart语言中代表私有，类似于Java中的private，只能内部访问。
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  // 一个私有的自增方法，用于点击按钮后，增加上面的整形变量值的操作（_counter++表示自增）：
  void _incrementCounter() {
    setState(() {
      // 对setState的此调用告诉Flutter框架此状态有所更改，这导致它重新运行下面的build方法，
      // 以便显示内容可以反映更新的值。如果我们在不调用setState（）的情况下更改_counter，则不会再次调用build方法，因此似乎什么也没有发生。
      _counter++;
    });
  }
  // 我们主页的详细布局控件
  @override
  Widget build(BuildContext context) {
    // 每次调用setState时都会重新运行此方法，例如，由上面的_incrementCounter方法完成。
    // Flutter框架已经过优化，可以快速重新运行构建方法，因此可以重建任何需要更新的内容，而不必单独更改小部件的实例。

    //其中Scaffold可以看作是Material Design中的一个模板，通过它你可以定义appBar,body,drawer等控件。
    return Scaffold(
      // 上定义标题栏的，可以看到这里定义了标题栏的标题，就是MyHomePage刚传入进入的标题，widget其实就是MyHomePage。
      appBar: AppBar(
        // 在这里，我们从由App.build方法创建的MyHomePage对象中获取值，并使用它来设置应用栏标题。
        title: Text(widget.title),
      ), // body代码，相当于HTML中的内容，也相当于主页控件的内容，body:center代码内容居中，其中child定义的控件层级，Column代表一行，那么顾名思义Row就表示一列。
      body: Center(
        // 采用单个子项，并将其放置在父项的中间。
        child: Column(
          // Column也是一个布局小部件。它获取一个子项列表，并将它们垂直排列。默认情况下，它会调整自身大小以水平适合其子项，并尝试与其父项一样高。
          // 调用“调试绘画”（在控制台中按“ p”，从Android Studio中的Flutter Inspector中选择“ Toggle Debug Paint”操作，
          // 或在Visual Studio Code中选择“ Toggle Debug Paint”命令）以查看每个小部件的线框...

          // 列具有各种属性，可控制其自身大小以及子元素的位置。
          // 在这里，我们使用mainAxisAlignment将子项垂直居中；这里的主轴是垂直轴，因为列是垂直的（交叉轴将是水平的）。
          // 表示child内部控件也居中显示（mainAxisAlignment翻译成中文就是主轴对准的意思），children: 表示子控件，是一个List类型。
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 文本的内容是“You have pushed the button this many times:”
            Text(
              'You have pushed the button this many times:',
            ), //显示开头类定义的一个私有的整形变量_counter，这里引用的方式与jQuery很像，
                // 其样式为style: Theme.of(context).textTheme.display1。
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      // 最后是一个自增的浮动按钮，在Java编写的Android程序中同样也有floatingActionButton控件，
      // 详细这里很好理解，这里定义了点击该按钮的操作方法onPressed:为上面自增的函数_incrementCounter，tooltip代表长按按钮显示的文字效果，
      // 这里为英文的自增。接着就是这个按钮的图标为child: Icon(Icons.add)。
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // 该逗号结尾使自动格式化更适合构建方法。
    );
  }
}