Flutter学习笔记（23）--多个子元素的布局Widget（Rwo、Column、Stack、IndexedStack、Table、Wrap）

如需转载，请注明出处：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 scaffold(
        appbar: appbar(
          title: new text('children demo'),
        ),
        body: new center(
          child: new stack(
            children: <widget>[
              new container(
                width: 200.0,
                height: 200.0,
                color: colors.blue,
              ),
              new positioned(
                top: 20.0,
                left: 50.0,
                child: new text('这是一段文本')
              )
            ],
          ),
        ),
      ),
    );
  }
}

• indexedstack

indexedstack继承自stack，它的作用是显示第index个child，其他的child都是不可见的，所以indexedstack的尺寸永远是和最大的子节点尺寸一致。由于indexedstack是继承自stack，所以它只比stack多了一个index属性，即对应child的索引。

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 indexedstack(
            index: 1,
            children: <widget>[
              new container(
                width: 200.0,
                height: 200.0,
                color: colors.blue,
              ),
              new positioned(
                top: 20.0,
                left: 50.0,
                child: new text('这是一段文本')
              )
            ],
          ),
        ),
      ),
    );
  }
}

• table

table表格布局，每一行的高度由其内容决定，每一列的宽度由columnwidths属性单独控制。

table组件常见属性如下：

columnwidths：设置每一列的宽度。

defaultcolumnwidth：默认的每一列宽度，默认情况下均分。

textdirection：文字方向。

border：表格边框。

defaultverticalalignment：默认垂直方向的对齐方式，top 放置在顶部、middle 垂直居中、bottom 放置在底部、baseline 文本baseline对齐、fill 充满整个cell

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 table(
          defaultverticalalignment: tablecellverticalalignment.bottom,
          // 设置表格有多少列，并且指定列宽
          columnwidths:const <int,tablecolumnwidth> {
            0:fixedcolumnwidth(40.0),
            1:fixedcolumnwidth(40.0),
            2:fixedcolumnwidth(60.0),
            3:fixedcolumnwidth(60.0),
            4:fixedcolumnwidth(130.0),
          },
          // 设置表格边框样式
          border: tableborder.all(
            color: colors.blue,
            width: 2.0,
            style: borderstyle.solid
          ),
          children: const <tablerow>[
            // 添加第一行数据
            tablerow(
              children: <widget>[
                sizedbox(
                  child: text('姓名'),
                  height: 30,
                ),
                text('性别'),
                text('年龄'),
                text('身高'),
                text('备注'),
              ],
            ),
            // 添加第二行数据
            tablerow(
              children: <widget>[
                text('张三'),
                text('男'),
                text('20'),
                text('186'),
                text('学渣'),
              ],
            ),
            // 添加第三行数据
            tablerow(
              children: <widget>[
                text('李四'),
                text('男'),
                text('20'),
                text('188'),
                text('学酥'),
              ],
            ),
            // 添加第四行数据
            tablerow(
              children: <widget>[
                text('王五'),
                text('男'),
                text('21'),
                text('177'),
                text('学霸'),
              ],
            ),
            // 添加第五行数据
            tablerow(
              children: <widget>[
                text('小梅'),
                text('女'),
                text('22'),
                text('170'),
                text('学神，需要重点培养'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

• wrap

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 wrap(
          spacing: 3.0,
          runspacing: 20.0,//纵轴方向的间距
          alignment: wrapalignment.end,//纵轴方向的对其方式
          children: <widget>[
            new chip(
              avatar: circleavatar(
                backgroundcolor: colors.blue,
                child: new text('a'),
              ),
              label: new text('文本一'),
            ),
            new chip(
              avatar: circleavatar(
                backgroundcolor: colors.blue,
                child: new text('b'),
              ),
              label: new text('文本二'),
            ),
            new chip(
              avatar: circleavatar(
                backgroundcolor: colors.blue,
                child: new text('c'),
              ),
              label: new text('文本三'),
            ),
            new chip(
              avatar: circleavatar(
                backgroundcolor: colors.blue,
                child: new text('d'),
              ),
              label: new text('文本四'),
            ),
            new chip(
              avatar: circleavatar(
                backgroundcolor: colors.blue,
                child: new text('e'),
              ),
              label: new text('文本五'),
            ),
          ],
        ),
      ),
    );
  }
}