从0开始学Flutter

第三部分：Flutter布局

　　Flutter开发中，布局比较另类一点，由于逻辑代码和布局代码都写在一块儿了，都是使用Dart来写。

　　Flutter中的布局容器主要分为两类：只能包含一个子Widget的布局容器和能够包含多个子Widget的容器

一：包含单个子Widget的布局容器

Center组件

Center组件中的子组件会居中显示。Center组件会尽量的大，若是你不给它设置任何约束。下面是Center组件的使用方法：

import 'package:flutter/material.dart'; main() { runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: "Test", home: new Scaffold( appBar: new AppBar( title: new Text("Test") ), body: new Center( child: new Text("hello world") ), ), ); } }

Container组件

Container是使用很是多的一个布局容器，关于Container容器的显示规则，有以下几条：

1. 若是Container中没有子组件，则Container会尽量的大
2. 若是Container中有子组件，则Container会适应子组件的大小
3. 若是给Container设置了大小，则Container按照设置的大小显示
4. Container的显示规则除了跟自身约束和子组件有关，跟它的父组件也有关

下面的代码展现了Container的用法：

import 'package:flutter/material.dart'; main() { runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: "Test", home: new Scaffold( appBar: new AppBar( title: new Text("Test") ), body: new Container( width: 100.0, height: 100.0, color: Colors.red, child: new Text("Flutter!"), ) ), ); } }

Container还能够设置内边距和外边距，以下代码所示：

body: new Container(
  // 设置外边距都为20.0
  margin: const EdgeInsets.all(20.0),
  // 设置内边距，4个边分别设置
  padding: const EdgeInsets.fromLTRB(10.0, 20.0, 30.0, 40.0),
  width: 100.0,
  height: 100.0,
  color: Colors.red,
  child: new Text("Flutter!"), )

Padding组件

Padding组件专门用于给它的子组件设置内边距，用法比较简单：

new Padding(
  padding: new EdgeInsets.all(8.0),
  child: const Card(child: const Text('Hello World!')), )

Align组件

Align组件用于将它的子组件放置到肯定的位置，好比下面的代码展现了将Text组件放置到100*100的容器的右下角：

new Container(
  width: 100.0,
  height: 100.0,
  color: Colors.red,
  child: new Align(
    child: new Text("hello"), alignment: Alignment.bottomRight, ), )

FittedBox组件

FittedBox组件根据fit属性来肯定子组件的位置，fit属性是一个BoxFit类型的值，BoxFit是个枚举类，取值有以下几种：

enum BoxFit {
  fill,
  contain,
  cover,
  fitWidth,
  fitHeight,
  none,
  scaleDown,
}

在大小为200*100的Container中放置一个Text，使用FittedBox来控制Text的不一样显示状态：

new Container(
  width: 200.0,
  height: 100.0,
  color: Colors.red,
  child: new FittedBox(
    child: new Text("hello world"), fit: BoxFit.fill, ) )

AspectRatio组件

AspectRatio组件用于让它的子组件按必定的比例显示，下面是示例代码：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp( title: "Test", home: new Scaffold( appBar: new AppBar( title: new Text("Test") ), body: new AspectRatio( // Container组件按16：9(width / height)显示 aspectRatio: 16.0 / 9.0, child: new Container( color: Colors.red, ), ) ), ); } }

若是将aspectRatio设置为1.0，则Container显示为正方形。(注意，Dart中/表明除法运算，不是取整运算，使用~/作取整运算)

ConstrainedBox组件

ConstrainedBox组件用于给它的子组件强制加上一些约束，好比下面的代码：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp( title: "Test", home: new Scaffold( appBar: new AppBar( title: new Text("Test") ), body: new ConstrainedBox( constraints: const BoxConstraints.expand(width: 50.0, height: 50.0), child: new Container( color: Colors.red, width: 200.0, height: 200.0, ) ) ), ); } }

IntrinsicWidth & IntrinsicHeight

这两个组件的做用是将他们的子组件调整到组件自己的宽度/高度。

这个类是很是有用的，例如，当宽度/高度没有任何限制时，你会但愿子组件按更合理的宽度/高度显示而不是无限的扩展。

LimitedBox组件

LimitedBox是一个当其自身不受约束时才限制其大小的容器。

若是这个组件的最大宽度是没有约束，那么它的宽度就限制在maxWidth。相似地，若是这个组件的最大高度没有约束，那么它的高度就限制在maxHeight。

Offstage组件

Offstage组件用于显示或隐藏它的子组件，以下代码所示：

new Offstage(
  offstage: false, // true: 隐藏， false: 显示 child: new Text("hello world"), )

OverflowBox & SizedOverflowBox

OverflowBox组件它给它的子组件带来不一样的约束，而不是从它的父组件中获得，可能容许子组件溢出到父组件中。

SizedOverflowBox组件是一个指定大小的组件，它的约束会传递给子组件，子组件可能溢出。

SizedBox组件

SizedBox是一个指定了大小的容器。

若是指定了SizedBox的大小，则子组件会使用SizedBox的大小，若是没有指定SizedBox的大小，则SizedBox会使用子组件的大小。若是SizedBox没有子组件，SizedBox会按它本身的大小来显示，将nulls看成0。

new SizedBox(
  // 若是指定width和height，则Container按照指定的大小显示，而不是Container本身的大小，若是没有指定width和height，则SizedBox按照Container的大小显示
  width: 50.0,
  height: 50.0,
  child: new Container(
    color: Colors.red,
    width: 300.0,
    height: 300.0,
  ),
)

Transform组件

Transform用于在绘制子组件前对子组件进行某些变换操做，好比平移、旋转、缩放等。

示例代码以下：

new Container(
  color: Colors.black,
  child: new Transform(
    alignment: Alignment.topRight,
    // 须要导包：import 'dart:math' as math; transform: new Matrix4.skewY(0.3)..rotateZ(-math.pi / 12.0), child: new Container( padding: const EdgeInsets.all(8.0), color: const Color(0xFFE8581C), child: const Text('Apartment for rent!'), ), ), )

2、包含多个子Widget的布局容器

Row组件

Row组件字面理解就是表明一行，在一行中能够放入多个子组件。

下面是示例代码：

import 'package:flutter/material.dart'; main() { runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: "Test", home: new Scaffold( appBar: new AppBar( title: new Text("Test") ), body: new Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text("hello"), new Container( width: 50.0, height: 50.0, color: Colors.red, ), new Text("world") ], ) ), ); } }

Row组件的构造方法中，children参数是一个数组，表示能够有多个子组件，mainAxisAlignment表示Row中的子组件在主轴(Row组件主轴表示水平方向，交叉轴表示垂直方向，Column组件主轴表示垂直方向，交叉轴表示水平方向)上的对齐方式，能够有以下几个取值：

Column组件

Column组件表示一列，能够在一列中放入多个组件，以下代码所示：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp( title: "Test", home: new Scaffold( appBar: new AppBar( title: new Text("Test") ), body: new Column( children: <Widget>[ new Text("hello"), new Text("world"), new Text("nihao~") ], ) ), ); } }

Column和Row组件同样，能够经过MainAxisAlignment或者CrossAxisAlignment来设置主轴和交叉轴的对齐方式，这里再也不赘述。

Stack组件

Stack组件相似于Android中的FrameLayout，其中的子组件是一层层堆起来的，并不像Row或者Column中的子组件，按水平或垂直方向排列，下面用代码说明：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp( title: "Test", home: new Scaffold( appBar: new AppBar( title: new Text("Test") ), body: new Stack( children: <Widget>[ new Container( width: 100.0, height: 100.0, color: Colors.red, ), new Container( width: 30.0, height: 30.0, color: Colors.green, ) ], ) ), ); } }

IndexedStack组件

IndexedStack用于根据索引来显示子组件，index为0则显示第一个子组件，index为1则显示第二个子组件，以此类推，下面用代码说明：

new IndexedStack(
  index: 1,
  children: <Widget>[
    new Container(
      width: 100.0,
      height: 100.0,
      color: Colors.red,
      child: new Center(
        child: new Text("index: 0", style: new TextStyle(fontSize: 20.0),), ), ), new Container( width: 100.0, height: 100.0, color: Colors.green, child: new Center( child: new Text("index: 1", style: new TextStyle(fontSize: 20.0),), ), ) ], )

IndexedStack的构造方法中有个index属性，上面的index属性为1，则显示的是children数组中的第2个元素（绿色方块），

若是index改成0，则显示的是第1个元素（红色方块），若是index的大小超过了children数组的长度，则会报错。

Table组件

Table组件用于显示多行多列的布局，若是只有一行或者一列，使用Row或者Column更高效。下面用一段代码展现Table的用法：

class MyApp extends StatelessWidget {

  // 生成Table中的数据
  List<TableRow> getData() { var data = [ "hello", "world" ]; List<TableRow> result = new List<TableRow>(); TextStyle style = new TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold); for (int i = 0; i < data.length; i++) { String str = data[i]; List<Widget> row = new List(); for (int j = 0; j < str.length; j++) { row.add(new Text(" ${str[j]} ", style: style)); } result.add(new TableRow( children: row )); } return result; } @override Widget build(BuildContext context) { return new MaterialApp( title: "Test", home: new Scaffold( appBar: new AppBar( title: new Text("Test") ), body: new Table( children: getData() ) ), ); } }

Wrap组件

Wrap组件能够在水平或垂直方向上多行显示其子组件，下面是示例代码：

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp( title: "Test", home: new Scaffold( appBar: new AppBar( title: new Text("Test") ), body: new Wrap( spacing: 5.0, // 水平方向上两个子组件的间距 runSpacing: 20.0, // 两行的垂直间距 children: <Widget>[ new Text("hello"), new Text("hello"), new Text("hello"), new Text("hello"), new Text("hello"), new Text("hello"), new Text("hello"), new Text("hello"), new Text("hello"), ], ) ), ); } }

若是你把上面代码中的Wrap换成Row，你会发现Row中的子组件超过屏幕宽度后，不会自动换行显示。

ListView组件

ListView是一个很是经常使用的组件。