美文网首页Flutter圈子FlutterFlutter中文社区
Flutter 基础布局Widgets之Row详解

Flutter 基础布局Widgets之Row详解

作者: 若数 | 来源:发表于2019-04-28 21:51 被阅读6次
    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<Widget> children = const <Widget>[],
      })
    
    • 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: <Widget>[
              Icon(Icons.access_alarm),
              Icon(Icons.access_alarms),
              Icon(Icons.access_time)
            ],
          ),
        );
      }
    }
    

    示例效果

    CD63F6259F27143B96E7A82F207CCCA9.png

    相关文章

      网友评论

        本文标题:Flutter 基础布局Widgets之Row详解

        本文链接:https://www.haomeiwen.com/subject/hmqsnqtx.html