如需转载,请注明出处: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