从0开始写一个基于Flutter的开源中国客户端（4）——Flutter布局基础

时间 2019-11-07

标签开始一个基于 flutter 客户端布局基础繁體版

原文原文链接

个人上一篇博客中记录了Flutter基础和一些经常使用的Widgets，这一篇中主要记录Flutter经常使用的一些布局，但愿本身在记录的同时能温故知新，同时给初学者一些帮助。前端

索引	文章
1	从0开始写一个基于Flutter的开源中国客户端（1） Flutter简介及开发环境搭建 \| 掘金技术征文
2	从0开始写一个基于Flutter的开源中国客户端（2） Dart语法基础
3	从0开始写一个基于Flutter的开源中国客户端（3）初识Flutter & 经常使用的Widgets
👉4	从0开始写一个基于Flutter的开源中国客户端（4） Flutter布局基础
5	从0开始写一个基于Flutter的开源中国客户端（5） App总体布局框架搭建
6	从0开始写一个基于Flutter的开源中国客户端（6）各个静态页面的实现
7	从0开始写一个基于Flutter的开源中国客户端（7） App网络请求和数据存储
8	从0开始写一个基于Flutter的开源中国客户端（8）插件的使用

Flutter布局容器

在Android开发中，咱们使用xml文件写布局，有诸如LinearLayout、RelativeLayout、ConstraintLayout等布局方式，在ReactNative或WEEX开发中，咱们使用的布局方式都是基于前端的flex布局，不管是Android仍是RN或者WEEX，他们的布局特色都是代码和布局是分开的，而在Flutter开发中，布局比较另类一点，由于逻辑代码和布局代码都写在一块儿了，都是使用Dart来写。git

说到布局就不得不说到容器，不论使用原生或者RN、WEEX这类跨平台移动开发方式，布局都会涉及到容器，好比原生Android开发中，LinearLayout是个布局，同时是一个能够包含多个子组件的容器，在RN开发中，<View>是一个组件，同时也是能够包含多个子组件的容器，在WEEX开发中<div>也是一个能够包含多个子组件的容器。github

Flutter中的布局容器主要分为两类：只能包含一个子Widget的布局容器和能够包含多个子Widget的容器，下面分别说明其用法。数组

包含单个子Widget的布局容器

Center组件

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

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容器的显示规则，有以下几条：网络

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

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

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代码中的width/height、child属性，显示出的界面就会有所不一样：框架

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

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组件专门用于给它的子组件设置内边距，用法比较简单：ide

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,
  ),
)
复制代码

Alignment类中有以下一些静态常量：

/// The top left corner.
  static const Alignment topLeft = const Alignment(-1.0, -1.0);

  /// The center point along the top edge.
  static const Alignment topCenter = const Alignment(0.0, -1.0);

  /// The top right corner.
  static const Alignment topRight = const Alignment(1.0, -1.0);

  /// The center point along the left edge.
  static const Alignment centerLeft = const Alignment(-1.0, 0.0);

  /// The center point, both horizontally and vertically.
  static const Alignment center = const Alignment(0.0, 0.0);

  /// The center point along the right edge.
  static const Alignment centerRight = const Alignment(1.0, 0.0);

  /// The bottom left corner.
  static const Alignment bottomLeft = const Alignment(-1.0, 1.0);

  /// The center point along the bottom edge.
  static const Alignment bottomCenter = const Alignment(0.0, 1.0);

  /// The bottom right corner.
  static const Alignment bottomRight = const Alignment(1.0, 1.0);
复制代码

FittedBox组件

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

enum BoxFit {
  fill,
  contain,
  cover,
  fitWidth,
  fitHeight,
  none,
  scaleDown,
}
复制代码

在个人上一篇博文中，在说到Image组件时，已有对于这几种BoxFit类型的介绍，这里再用一段代码和截图来直观说明上面几种BoxFit，在下面的代码中，咱们在大小为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,
  )
)
复制代码

当fit取不一样值时，上面的代码运行结果以下图所示：

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,
          )
        )
      ),
    );
  }
}
复制代码

在上面的代码中，咱们给Container设置了长宽都为200，可是Container被ConstrainedBox组件包裹了，并且ConstrainedBox设置了约束constraints: const BoxConstraints.expand(width: 50.0, height: 50.0)，因为ConstrainedBox的约束是强制性的，因此最后Container显示出的大小是50而不是200，以下图所示：

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!'),
    ),
  ),
)
复制代码

运行效果以下图：

包含多个子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组件主轴表示垂直方向，交叉轴表示水平方向)上的对齐方式，能够有以下几个取值：

MainAxisAlignment.start
MainAxisAlignment.center
MainAxisAlignment.end
MainAxisAlignment.spaceBetween
MainAxisAlignment.spaceAround
MainAxisAlignment.spaceEvenly

关于上面几个取值，用以下几个图来讲明：

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,
            )
          ],
        )
      ),
    );
  }
}
复制代码

在上面的Stack组件中，放入了两个Container，其中第一个Container是100x100大小，第二个Container是30x30大小，在模拟器上运行效果以下图：

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"),
            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是一个很是经常使用的组件，在移动端，基本上大多数页面都须要使用ListView来显示数据，关于ListView的基本使用方法，在上一篇中已有记录。

后记

本篇记录的是Flutter开发中经常使用的一些布局，若是有移动开发经验，这些知识作类比学习应该很容易掌握，即便不怎么熟悉，经过查看文档也能够找到详细用法，感谢Flutter中文网对官方英文的翻译，我在学习Flutter的过程当中，也参考了不少Flutter中文网的内容，但愿你们能一块儿学习，一块儿进步，一块儿愉快地使用Flutter！

个人开源项目

基于Google Flutter的开源中国客户端，但愿你们给个Star支持一下，源码：

基于Flutter的俄罗斯方块小游戏，但愿你们给个Star支持一下，源码：

上一篇	下一篇
从0开始写一个基于Flutter的开源中国客户端（3） ——初识Flutter & 经常使用的Widgets	从0开始写一个基于Flutter的开源中国客户端（5）——App总体布局框架搭建