Flutter 基础布局Widgets之Row详解

130.jpg

概述

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们

简单示例

// row

import '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