Flutter基础—第一个Flutter实例

学习Flutter的第一个实例：

import 'package:flutter/material.dart';
void main() {
  runApp(new Center(child: new Text('你好，世界！')));
}

上面实例中只使用了runApp函数，runApp函数接受指定的控件(Widget)，并使其作为控件树(widget tree)的根控件。控件(Widget)定义一个元素(Element)的配置，在Flutter框架的层次结构中处于核心层。本实例中，控件树(widget tree)包含两个控件，Center控件使其子控件处于中间位置，Text控件打印文本内容。runApp函数强制将根控件覆盖屏幕，这意味着文本“你好，世界！”将显示在屏幕中心。

在写应用程序时，经常会使用StatelessWidget和StatefulWidget编写新控件,两者的差别在于你是否要管理控件的状态。一个控件的主要任务是实现build函数，定义控件中其他较低层次的控件。build函数将依次构建这些控件，直到底层渲染对象。

基本控件

• Text：文本控件，在应用中创建各种样式的文本。

• Row,Column：Flex控件，可以创建水平(Row)或垂直(Column)方向的布局，是基于Web的flexbox的布局模式设计的。

• Stack：非线性布局（水平或垂直），控件可以堆叠在其他控件上，可以使用Positioned控件控制Stack相对顶部、右部、底部和左部的位置，是基于Web的absolute定位的布局模式。

• Container：创建矩形的可视元素，可以用BoxDecoration来设计样式，比如背景、边框和阴影，Container也有边距、填充和大小限制，另外，还可以在三维空间利用矩阵进行变换。

结合基本控件与其他控件的实例：

import 'package:flutter/material.dart';
class MyAppBar extends StatelessWidget {
  MyAppBar({this.title});
  final Widget title;
  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 56.0,
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: new BoxDecoration(backgroundColor: Colors.blue[500]),
      child: new Row(
        children: <Widget>[
          new IconButton(
            icon: new Icon(Icons.menu),
            tooltip: '导航菜单',
            onPressed: null,
          ),
          new Flexible(
            child: title,
          ),
          new IconButton(
            icon: new Icon(Icons.search),
            tooltip: '搜索',
            onPressed: null,
          ),
        ],
      ),
    );
  }
}
class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Material(
      child: new Column(
        children: <Widget>[
          new MyAppBar(
            title: new Text('实例标题', style: Typography.white.title),
          ),
          new Flexible(
            child: new Center(
              child: new Text('你好，世界！'),
            ),
          ),
        ],
      ),
    );
  }
}
void main() {
  runApp(new MaterialApp(
    title: '我的应用',
    home: new MyScaffold(),
  ));
}

执行前确认flutter.yaml文件内有“uses-material-design: true”，允许使用预定的Material icons。

name: myapp
uses-material-design: true

许多控件为了继承主题数据，需要MaterialApp才能正常显示，因此，运行一个MaterialApp应用。

MyAppBar控件创建了一个Container(容器)，高度为56设备无关像素(device-independent pixels)，内部左右填充8像素(pixels)。在容器内部，MyAppBar为子控件设置Row(水平)布局，中间的title控件被设置成Flexible，意味它可以使用剩余的所有空间，你可以设置多个Flexible子控件，并使用flex参数设置各自的可使用空间比例。

MyScaffold控件为子控件设置垂直布局，在垂直顶部放置一个MyAppBar的实例，将MyAppBar的Text控件作为标题使用，将控件作为参数传递给其他控件非常方便实用的，你可以创建通用的控件，以各种方式重复的使用。最后，MyScaffold使用Flexible，用一个中心文本来填充剩余的空间。