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，Clolumn：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: [
          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: [
          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，用一个中心文本来填充剩余的空间。