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