Flutter开始干系列-官方入门计数Demo

直接开始干，没有为什么～

---

分析

Flutter 相关环境搭建好后，创建 Flutter 工程就可以看到官方这个默认的计数器Demo。

导包

这里导入Material UI库

import 'package:flutter/material.dart';

应用入口

• main 函数作为程序入口，通过 runApp 启动 Flutter 应用，传入 Widget 参数（MyApp()）。

• => 为 Dart 单行函数写法。

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

应用结构

• 这里使用 MaterialApp 构建了个 Material 设计风格的应用 MyApp ，在 MaterialApp 中可以设置应用名、主题颜色、默认 Home 界面、语言、路由以及一些调试开关等。

• MyApp 继承 StatelessWidget（无状态组件），直接通过 Build 构建相应的 Widget

class MyApp extends StatelessWidget {
  // 构建应用的根 Widget
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 多任务窗口应用名字
      title: 'Flutter Demo',
      // 应用主题
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // 应用默认显示的界面 Widget
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Home 页实现

• MyHomePage 这个 Demo 真正的页面实现，由 parent 传入 title
• MyApp 继承 StatefulWidget（有状态组件），需要通过 createState 返回相应的 State

class MyHomePage extends StatefulWidget {

  // title 由父类传入，且设置成 final 不可改变
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

• _MyHomePageState 继承 State，泛型为 MyHomePage，通过 build 构建 Widget

class _MyHomePageState extends State<MyHomePage> {

  // 记录点击次数
  int _counter = 0;

  void _incrementCounter() {
    // 调用 setState 将调用 build 重新绘制界面
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // 构建 Widget
    return Scaffold(
      appBar: AppBar(
        // appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center 将子 Wiget 居中，这里即屏幕居中
        child: Column(
          // Column 将一组子 Widget 竖向排列
          mainAxisAlignment: MainAxisAlignment.center,
          // 主轴方向居中
          children: <Widget>[
            // 子组件列表
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
      // 悬浮按钮，按下改变 _counter 计数
    );
  }
}

至此，计数 Demo 分析完毕...

总结

Flutter 中大多数对象都是 Widget，而在这些 Widget 的实现类里都有其简单的使用示例。看了这个 Demo 效果，里面就使用到了如下 Widget ：

1. StatelessWidget

继承自 Widget 的抽象类，当有一个不需要改变状态的固定场景就可以继承 StatelessWidget 实现，在 build 方法中嵌套实现 UI。StatelessWidget 与 StatefulWidget 对应

2. StatefulWidget

继承自 Widget 的 抽象类，当有一个需要改变状态的场景就可以继承 StatefulWidget 实现，在 createState 中返回需要的 State （继承 State 实现）。 在继承 State 后， 在 build 方法中嵌套实现 UI，在需要更新 UI 时 调用 setState 即可。 StatefulWidget 与 StatelessWidget 对应

3. MaterialApp

MaterialApp 继承自 StatefulWidget，实现一个 Material Design（材料设计）风格的 App

4. Scaffold

Scaffold 继承自 StatefulWidget，实现了基于材料设计的可视化布局结构，包含 appBar、body、drawer、 bottomNavigationBar 等

5. AppBar

AppBar 继承自 StatefulWidget，实现了材料设计的应用程序栏

6. Center

Center 继承自 Align 一步步跟踪下去，它依然是继承自 Widget，实现单一子部件居中显示。

7. Column

Column 继承自 Flex 一步步跟踪下去，它依然是继承自 Widget，实现竖向数组显示 Widget

8. Text

Text 继承自 StatelessWidget ，实现单一风格文本控件

9. FloatingActionButton

FloatingActionButton 继承自 StatelessWidget，实现一个 Material Design（材料设计）风格的浮动按钮组件

10. Icon

FloatingActionButton 继承自 StatelessWidget，实现一个 Material Design（材料设计）风格的图标组件