2-1. 计数器实例

2019-11-28 本文已影响0人努力生活的西鱼

import 'package:flutter/material.dart';

// flutter的入口文件
// "=>" Dart中单行函数的简写
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // 这个App的根Widget
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo', // 应用名
      theme: ThemeData(
        // 这是应用程序的主题.

        // 尝试使用flutter run运行你的程序，你将看到应用程序具有一个蓝色的Toolbar，
        // 然后不退出应用程序，尝试将下面的primarySwatch改为Colors.green，然后调用
        // "热重载"，注意到计数器并未重置为0，应用程序不重新启动
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {

  final String title;

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

  // 这个widget是你的应用程序的主页，它是有状态的，
  // 这就意味着下面定义的state对象中的字段，能够影响应用的显示，

  // 这个类是这个状态的配置类，它所持有的这个title值是其父类提供的，
  // 被创建状态的方法使用，在Widget的子类中总是被标记为final

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

}

class _MyHomePageState extends State<MyHomePage> {

  int _counter = 0;

  void _incrementCounter() {
    // 回调setState()去告诉Flutter framework已经有一些状态发生了改变，
    // 这将导致它会重新运行build方法以便显示更新的内容，如果我们改变了_counter
    // 而没有调用这个方法，将不会调用build方法，所以什么也不会发生
    setState(() {
      _counter++;
    });
  }

  // 每次调用setState都会调用这个方法，
  // 例如：通过上面的_incrementCounter()，方法完成
  //
  // Flutter framework 是被优化过的，所以它的重新运行build方法是非常快速的，只需要
  // 运行你需要更新的内容，不需要去分别所有的widgets的实例。
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      // 在这里，我们从App.build方法创建的MyHomePage对象中获取值，
      // 并使用它来设置我们的AppBar的标题栏
      appBar: AppBar(
        title: Text(widget.title),
      ),
      // Center 是一个布局组件，它需要一个child，
      // 并且规定了只能位于正中心
      body: Center(
        // Column也是一个布局组件，它需要一个子组件列表并垂直排列。
        // 默认情况下，它会自行调整的大小，去适应子级的横向大小，

        // 调用"debug painting"(在控制台中按P,在Android Studio的Flutter检查器中
        // 选择"Toggle Debug Paint"操作，查看每个Widget的线框)

        // Column 有各种属性来控制其自身大小以及如何定位其子Widget
        // 这里我们使用mainAxisAlignment将子项垂直居中
        // 主轴在这里是垂直轴，因为列是垂直的(交叉轴是水平的)
        child: Column(
          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),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

为什么要导入material文件？

Flutter提供了许多Widget，可帮助你构建遵循Material Design的应用程序。Material应用程序以MaterialApp开始，该Widget在应用程序的根部创建了一些有用的widget，其中包括一个Navigator，它管理由字符串标识的Widget栈(即页面路由栈)。Navigator可以让你的应用程序在页面之间平滑的过渡。是否使用MaterialApp完全是可选的，但是使用它是一个很好的做法。

StatelessWidget用于不需要维护状态的场景，它通常在build方法中通过嵌套其他Widget来构建UI，在构建过程中会递归的构建其嵌套的Widget。

StatefulWidget可以拥有状态，这些状态在widget生命周期中是可以变得，而StatelessWidget是不可变的。

StatefulWidget至少由两个类组成：

一个StatefulWidget类。
一个State类；StatefulWidget类本身是不变的，但是State类中持有的状态在widget生命周期中可能会发生变化。

由于在dart中允许我们实例化类的时候，省略new关键字，所以我们可以去掉上面代码中的new关键字。

MaterialApp

MaterialApp是一个方便的Widget，它封装了应用程序实现Material Design所需要的一些Widget。一般作为顶层Widget使用。

MaterialApp中常用属性包括: title(标题), home(主页), color(颜色), theme(主题), routes(路由)...

Scaffold

Scaffold是Material Design布局结构的基本实现。此类提供了用于显示drawer，SnackBar和底部sheet的API。主要包含以下几个属性：

appBar: 显示在界面顶部的一个AppBar
body: 当前界面所显示的主要内容Widget
drawer: 抽屉菜单控件

2-1. 计数器实例

猜你喜欢

热点阅读