如需转载，请注明出处：Flutter学习笔记（23）--多个子元素的布局Widget（Rwo、Column、Stack、IndexedStack、Table、Wrap）

 

上一篇梳理了拥有单个子元素布局的Widget，今天来梳理一下拥有多个子元素布局的Widget。

• Row

Row组件常见属性如下：

mainAxisAlignment：主轴的排列方式

crossAxisAlignment：次轴的排列方式

mainAxisSize：主轴应该占据多少空间，取值max为最大，min为最小

children：组件子元素，它的本质是一个List列表

对于Row来说，水平方向是主轴，垂直方向是次轴。

首先来看一下mainAxisAlignment属性值都有哪些

enum MainAxisAlignment {
  start,//将子控件放在主轴开始的位置
  end,//将子控件放在主轴结束的位置
  center,//将子控件放在主轴中间的位置
  spaceBetween,//将主轴空白位置进行均分，排列子元素，首尾没有空隙
  spaceAround,//将主轴空白区域均分，使中间各个子控件间距相等，首尾子控件间距为中间子控件间距的一半
  spaceEvenly,//将主轴空白区域均分，使各个子空间间距相等
}

Demo示例：

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Children Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('Children Demo'),
        ),
        body: new Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            new Text('11111111111'),
            new Text('22222222222'),
            new Text('33333333333')
          ],
        ),
      ),
    );
  }
}

• Column

Column组件常见属性如下：

mainAxisAlignment：主轴的排列方式

crossAxisAlignment：次轴的排列方式

mainAxisSize：主轴应该占据多少空间，取值max为最大，min为最小

children：组件子元素，它的本质是一个List列表

对Column来说，垂直方向是主轴，水平方向是次轴，使用上和Row大同小异

Demo示例：

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Children Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('Children Demo'),
        ),
        body: new Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            new Text('11111111111'),
            new Text('22222222222'),
            new Text('33333333333')
          ],
        ),
      ),
    );
  }
}

• Stack

Stack/alignment：

Stack组件的每一个子组件要么定位，要么不定位，定位的子组件是用Positioned组件包裹的，Stack组件本身包含所有不定位的子组件，子组件根据alignment属性定位（默认为左上角）。然后根据定位的子组件的top、right、bottom、left属性将他们放置在Stack组件上。

Stack既然是允许子元素堆叠的组件，那么定位堆叠位置的属性值有哪些呢？

alignment属性值：bottomCenter 底部中间位置、bottomLeft 底部左侧位置、bottomRight 底部右侧位置、center 正中间位置、centerLeft 中间居左位置、centerRight 中间居右位置、topCenter 上部居中位置、topLeft 上部居左位置、topRight 上部居右位置

Demo示例：

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Children Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('Children Demo'),
        ),
        body: new Center(
          child: new Stack(
            alignment: Alignment.centerLeft,
            children: <Widget>[
              new Container(
                width: 200.0,
                height: 200.0,
                color: Colors.blue,
              ),
              new Text('这是一段文本')
            ],
          ),
        ),
      ),
    );
  }
}

Stack/Positioned：

上面的示例是通过系统提供的定位来给子元素进行堆叠，但是实际工作中，上面的几类属性值往往不能满足我们UI的需求，UI可能会要求子元素放在任何你想不到的位置，那么这时候就需要用到我们Positioned来进行定位了。

Positioned属性值：top 子元素相对顶部边界距离，left 子元素相对左侧边界距离，right 子元素相对右侧边界距离，bottom 子元素相对底部边界距离。

Demo示例：

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Children Demo',
      home: new