Flutter教程第三节:Flutter基础—第一个Flutter实例

学习Flutter的第一个实例:

import 'package:flutter/material.dart';
void main() {
  runApp(new Center(child: new Text('你好,世界!', textDirection: TextDirection.ltr)));
}

上面实例中只使用了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(color: Colors.blue[500]),
      child: new Row(
        children: <Widget>[
          new IconButton(
            icon: new Icon(Icons.menu),
            tooltip: '导航菜单',
            onPressed: null,
          ),
          new Expanded(
            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: Theme.of(context).primaryTextTheme.title),
          ),
          new Expanded(
            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控件被设置成Expanded,Expanded的作用是展开Row、Column和Flex的子控件,意味它可以使用剩余的所有空间。

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