Flutter学习之计数器项目分析

默认项目main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            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.
    );
  }
}

分析

1. 导入包文件

import 'package:flutter/material.dart'

此处代码主要是导入 material UI框架,Flutter默认提供一整套material风格的UI框架.

2. 入口函数

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

和其他开发类似,通过main函数作为应用程序入口启动应用

3. 应用结构

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

• MyApp类代表Flutter应用，它继承了 StatelessWidget类，这也就意味着应用本身也是一个widget
• 在Flutter中，大多数东西都是widget（后同“组件”或“部件”），包括对齐(alignment)、填充(padding)和布局(layout)等，它们都是以widget的形式提供
• Flutter在构建页面时，会调用组件的build方法，widget的主要工作是提供一个build()方法来描述如何构建UI界面（通常是通过组合、拼装其它基础widget）
• MaterialApp 是Material库中提供的Flutter APP框架，通过它可以设置应用的名称、主题、语言、首页及路由列表等。MaterialApp也是一个widget
• Scaffold 是Material库中提供的页面脚手架，它包含导航栏和Body以及FloatingActionButton,路由默认都是通过Scaffold创建
• home 应用的首页

首页

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State { ...}

• MyHomePage继承StatefulWidget
• StatefulWidget标示的是一个有状态组件(Stateful widget),相对的StatelessWidget无状态组件(Stateless widget)
• Stateful widget至少由两个类组成：①StatefulWidget类 ②State类
• _MyHomePageState类是MyHomePage类对应的状态类

state类

class _MyHomePageState extends State {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }


  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),

      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            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.
    );
  }
}

• 定义一个技术变量 _counter
• 实现一个方法,用来点击按钮后执行计数_incrementCounter(),
• setState用来告诉flutter状态改变, 通知build方法刷新界面
• build中实现三个组件
  -- 1. scaffold Material组件库中提供的一个组件
  -- 2. body 实现一个Center组件,将子控件对齐屏幕中心, Column的作用是将其所有子组件沿屏幕垂直方向依次排列
  -- 3. floatingActionButton实现一个悬浮按钮,添加点击事件