如需转载，请注明出处：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('文本五'), ), ], ), ), ); } }
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/addevelopment/900927.html