Flutter 应用入门：计数器

用Android Studio创建的Flutter应用模板默认是一个简单的计数器示例。


// 导入包
import 'package:flutter/material.dart';

// 应用入口，启动Flutter应用，runApp它接受一个Widget参数
void main() => runApp(MyApp());


// MyApp类代表Flutter应用，它继承了 StatelessWidget类，这也就意味着应用本身也是一个widget
class MyApp extends StatelessWidget {
  // widget的主要工作是提供一个build()方法来描述如何构建UI界面（通常是通过组合、拼装其它基础widget)
  @override
  Widget build(BuildContext context) {
    // MaterialApp是Material库中提供的Flutter APP框架，通过它可以设置应用的名称、主题、语言、首页以及路由列表等，它本身也是一个widget
    return MaterialApp(
      // 应用名称
      title: 'Flutter Demo',

      // 应用主题
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),

      // 应用首页路由，本身也是一个widget
      home: MyHomePage(title: 'Flutter Demo Home Page'),

    );
  }
}


// Flutter应用的首页
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}
// 有状态的组件（Stateful widget） 和无状态的组件（Stateless widget）有两点不同：
// 1. Stateful widget可以拥有状态，这些状态在widget生命周期中是可以变的，而Stateless widget是不可变的。
// 2. Stateful widget至少由两个类组成：
// 一个StatefulWidget类；
// 一个State类，StatefulWidget类本身是不变的，但是State类中持有的状态在widget生命周期中可能会发生变化。


class _MyHomePageState extends State<MyHomePage> {
  // 组件的状态，记录按钮点击的总次数
  int _counter = 0;

  // 设置状态的自增函数
  /* 当按钮点击时，会调用此函数，该函数的作用是先自增_counter，然后调用setState 方法。
  setState方法的作用是通知Flutter框架，有状态发生了改变，Flutter框架收到通知后，会执行build方法来根据新的状态重新构建界面，
  Flutter 对此方法做了优化，使重新执行变的很快，所以你可以重新构建任何需要更新的东西，而无需分别去修改各个widget。
  */
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  //
  @override
  Widget build(BuildContext context) {
    // Scaffold是Material库中提供的页面脚手架，它提供了默认的导航栏、标题和包含主屏幕widget树的body属性。
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      // Center组件，可以将其子组件树对齐到屏幕中心
      body: Center(
        // Column组件，可以将其所有子组件沿屏幕垂直方向依次排列
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      // 页面右下角的带“+”的悬浮按钮，它的onPressed属性接受一个回调函数，代表它被点击后的处理器
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

为什么要将build方法放在State中，而不是放在StatefulWidget中？

主要是为了提高开发的灵活性。
如果将build()方法放在StatefulWidget中则会有两个问题：

状态访问不便；
继承StatefulWidget不便；

Flutter 应用入门：计数器

为什么要将build方法放在State中，而不是放在StatefulWidget中？

猜你喜欢