flutter row 滚动_Flutter 基础布局Widgets之Row详解

概述

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) ], ), ); }}

示例效果

CD63F6259F27143B96E7A82F207CCCA9.png