flutter demo 代码分析

上次我们按照官方教程创建了默认demo,本次我们分析这个demo,分析的哪里有不对的地方,请大家指出,共同进步。
首先我们要明确,dart 中所有的东西都是类,flutter 中所有的东西都是 widget。
import 'package:flutter/material.dart';
引入 google material 的 dart 包,打开源码就会发现这个包里面引入了更多的 material 样式的 dart 包,如下所示:

export 'src/material/about.dart';
export 'src/material/animated_icons.dart';
export 'src/material/app.dart';
export 'src/material/app_bar.dart';
export 'src/material/arc.dart';
export 'src/material/back_button.dart';
export 'src/material/bottom_app_bar.dart';
export 'src/material/bottom_navigation_bar.dart';
export 'src/material/bottom_sheet.dart';
export 'src/material/button.dart';
export 'src/material/button_bar.dart';
export 'src/material/button_theme.dart';
export 'src/material/card.dart';
export 'src/material/checkbox.dart';
export 'src/material/checkbox_list_tile.dart';
export 'src/material/chip.dart';
export 'src/material/chip_theme.dart';
export 'src/material/circle_avatar.dart';
export 'src/material/colors.dart';
export 'src/material/constants.dart';

void main() => runApp(new MyApp());
dart 的初始化运行函数为 main() 这里使用了箭头函数,实际上等同于下面的代码:

void main(){
  return runApp(new MyApp());
}

其中 runApp()为 APP 中的入口函数,参数为名为 MyApp的类,下面我们会分析到。
class MyApp extends StatelessWidget {
这行定义了MyApp类,继承自名为StatelessWidget父类

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }

为了方便,我们把注释删掉,这是build函数,它覆盖了父类的build函数,参数是默认的BuildContext类型的context。函数返回是 MaterialApp类的实例,定义了APP中本页面的一些全局信息,3个命名参数:title、theme、 home,其中 theme 名为 ThemeData 皮肤类,可以在里面定义一些类似颜色之类的东西,没有深入研究。home 定义了本页面的显示区域,为名为 MyhomePage 的类,并传入title值。

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

以上代码定义了MyHomePage的类,继承自StatefulWidget类,MyHomePage():super()调用的父类的构造函数赋值并扩展了它,这里是指新加了 title 参数或者在类中叫做属性。
final String title;定义了 title

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

这里覆盖了父类中的 createState函数,用于实例化_MyHomePageState()
下面一行
class _MyHomePageState extends State<MyHomePage>,定义了_MyHomePageState()类,该类继承自MyHomePage类。这里我也不懂,需要更深入的了解dart语言。
int _counter = 0;定义变量_counter,用于记录点击次数。

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

这里定义了_incrementCounter 方法,注意一定要调用 setState 方法,这样 _counter 的改变才能被记录下来。

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), 
    );
  }

这段代码是demo中实现逻辑和显示的主要代码,复写父类的build函数,返回Scaffold(脚手架)组件,仔细分析就会发现,Scaffold实例中 中包含三个命名参数,分别是 appBar,body和floatingActionButton,找到Scaffold类的构造函数的代码就会发现,不止这几项,如下所示:

Key key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.drawer,
    this.endDrawer,
    this.bottomNavigationBar,
    this.backgroundColor,
    this.resizeToAvoidBottomPadding: true,
    this.primary: true,

看名称就能知道是干什么用的,每一个属性都是一个widget。

 appBar: new AppBar(
        title: new Text(widget.title),
      ),

定义appBar,是一个 AppBar类,一个命名参数,赋值为父类中的title,这里有一点不明白,为什么是使用widget类来获取,希望大牛指点。

body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),

body 为页面显示的主要部分,为一个垂直居中显示widget,子widget为一个 Column widget,mainAxisAlignment: MainAxisAlignment.center, 该行定义了布局方式为居中,Column 的子widget为一个List,包含两个 text widget,其中style定义了text的样式,具体没有深入分析这里。
下面

  floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), 

这段代码定义了浮动按钮,onPressed为点击事件的方法,每点击一次_counter 加1,tooltip 为长按提示,子widget为一个Icon类的实例,具体没有分析。
经过一番分析,感到 flutter 设计巧妙,功能完善,是值得学习的。
有什么问题,可以加群:531488521 交流。

    原文作者:mentallxm
    原文地址: https://www.jianshu.com/p/935fb71f8c20
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞