Flutter学习(三):Flutter应用代码分析

首先贴上整个应用的代码

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //final wordPair = new WordPair.random();
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          //child: new Text('Hello World'),
          //child: new Text(wordPair.asPascalCase),
          child: new RandomWordsWidget(),
        ),
      ),
    );
  }
}
class RandomWordsWidget extends StatefulWidget {
  @override
  createState() => new RandomWordsStatus();
}

class RandomWordsStatus extends State<RandomWordsWidget> {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();
    return new Text(wordPair.asPascalCase);
  }
}

接下来,我们逐步分析Flutter应用的结构

1. 导包

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';

首先导入了一个第三方库:english_words,方便我们生成随机字符串.
其次导入了Material UI组件库,Material是一种标准的移动端和web端的视觉设计语言， Flutter默认提供了一套丰富的Material风格的UI组件.Android中也有Material设计风格.

2. 应用入口

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

• 与C/C++、Java类似，Flutter 应用中main函数为应用程序的入口，main函数中调用了，runApp 方法，它的功能是启动Flutter应用，它接受一个Widget参数，在本示例中它是MyApp类的一个实例，该参数代表Flutter应用。
• main函数使用了(=>)符号，这是Dart中单行函数或方法的简写。

3. 应用结构

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //final wordPair = new WordPair.random();
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          //child: new Text('Hello World'),
          //child: new Text(wordPair.asPascalCase),
          child: new RandomWordsWidget(),
        ),
      ),
    );
  }
}

• MyApp继承自StatelessWidget,而StatelessWidget是Widget的子类.Flutter在构建页面时，会调用widget的build方法，widget的主要工作是提供一个build()方法来描述如何构建UI界面（通常是通过组合、拼装其它基础widget）.
• MaterialApp 是Material库中提供的Flutter APP框架，通过它可以设置应用的名称、主题、语言、首页及路由列表等,MaterialApp也是一个widget.
• Scaffold 是Material库中提供的页面脚手架，包含AppBar,body,floatingButton,drawer等各种组成,方便构建UI.
• class Scaffold extends StatefulWidget { /// Creates a visual scaffold for material design widgets. const Scaffold({ Key key, this.appBar, this.body, this.floatingActionButton, this.floatingActionButtonLocation, this.floatingActionButtonAnimator, this.persistentFooterButtons, this.drawer, this.endDrawer, this.bottomNavigationBar, this.bottomSheet, this.backgroundColor, this.resizeToAvoidBottomPadding, this.resizeToAvoidBottomInset, this.primary = true, this.drawerDragStartBehavior = DragStartBehavior.down, }) : assert(primary != null), assert(drawerDragStartBehavior != null), super(key: key);

现在,可以尝试修改一下UI界面,体验一下Flutter不一样的感觉.