![c6964c477d219c222865fd20eef56f64.png](https://i-blog.csdnimg.cn/blog_migrate/809e95a500772549681f1625c6555bc0.jpeg)
概述
Row即创建一个水平的组件列表,是非常常用的组件,而Column即创建一个垂直的组件列表,用法和Row一模一样,因为Row以及Column都是Flex的子类,它们的具体实现也都是由Flex完成,只是参数不同。
构造函数
Row({ Key key, MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, MainAxisSize mainAxisSize = MainAxisSize.max, CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, TextDirection textDirection, VerticalDirection verticalDirection = VerticalDirection.down, TextBaseline textBaseline, List children = const [], })
- mainAxisAlignment 在flex布局中,子元素应该如何沿着主轴放置,即各个组件的放置的方式, 比如MainAxisAlignment.start 组件都尽量靠近主轴起点
- mainAxisSize 主轴应该占用多少空间 max 即占用最大 min则相反
- crossAxisAlignment 交叉轴的布局方式
- textDirection 组件开始方向 ltr:left-to-right
- verticalDirection 定义了children摆放顺序,默认是down
- textBaseline 对齐文本的水平线
- children 需要拜访的widget们
简单示例
// rowimport 'package:flutter/material.dart';class RowLearn extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar( title: Text('Row') ), // 水平显示一堆组件,不能滚动 body: Row( // 在flex布局中,子元素应该如何沿着主轴放置,即各个组件的放置的方式, 比如MainAxisAlignment.start 组件都尽量靠近主轴起点, // 而起点的方向取决去textDirection: TextDirection.rtl,比如right-to-left即都从右边开始 mainAxisAlignment: MainAxisAlignment.spaceAround, // 主轴应该占用多少空间 max 即占用最大 min则相反 mainAxisSize: MainAxisSize.max, // 交叉轴的布局方式 crossAxisAlignment: CrossAxisAlignment.start, // 组件开始方向 ltr:left-to-right textDirection: TextDirection.ltr, // 定义了children摆放顺序,默认是down verticalDirection: VerticalDirection.down, // 对齐文本的水平线 textBaseline: TextBaseline.alphabetic, children: [ Icon(Icons.access_alarm), Icon(Icons.access_alarms), Icon(Icons.access_time) ], ), ); }}
示例效果
![93bd54483f600e3035e3a690f1a455cd.png](https://i-blog.csdnimg.cn/blog_migrate/242dc0646afd3e4049064a746dda66d9.jpeg)
CD63F6259F27143B96E7A82F207CCCA9.png