Flutter控件--Row、Column和Stack

栏目: IOS · Android · 发布时间: 4年前

内容简介:flutter控件练习demo地址:因为 Row 和 Column 都是继承于 Flex,所以他们两个的属性也都是 Flex 的属性对于 Row 来说 , 水平是主轴。垂直是 交叉轴。 对于 Column 来说, 垂直是主轴。水平是 交叉轴 把 children 放到 主轴 的哪个位置 。 如果要验证这个属性,记住把 mainAxisSize 设置成 MainAxisSize.max ,

flutter控件练习demo地址: github

一 Row 和 Column

1.简介

因为 Row 和 Column 都是继承于 Flex,所以他们两个的属性也都是 Flex 的属性

  • Row 是 Flutter 中常用的控件。一个让 children 在水平方向依次排列 。如果 Row 空间 不足的话。 自身不带滚动的。
  • Column 也是 Flutter 中常用的控件。 一个 children 在垂直方向依次排列 。如果 Column 空间 不足的话。 自身不带滚动的。

2.属性

2.1 mainAxisAlignment (主轴对准方式)

对于 Row 来说 , 水平是主轴。垂直是 交叉轴。 对于 Column 来说, 垂直是主轴。水平是 交叉轴 把 children 放到 主轴 的哪个位置 。 如果要验证这个属性,记住把 mainAxisSize 设置成 MainAxisSize.max ,

取值 说明 样式图片(Rowd 的demo)
MainAxisAlignment.start(默认值) 把 children 放到主轴的头部 Flutter控件--Row、Column和Stack
MainAxisAlignment.center 把 children 放到主轴的中间 Flutter控件--Row、Column和Stack
MainAxisAlignment.end 把 children 放到主轴的尾部 Flutter控件--Row、Column和Stack
MainAxisAlignment.spaceAround 将主轴方向空白区域均分,使得children之间空间相等,但是首尾 childre 的空白部分为一半 Flutter控件--Row、Column和Stack
MainAxisAlignment.spaceBetween 将主轴方向空白区域均分,使得children之间空间相等,但是首尾childre靠近收尾,没有空细逢 Flutter控件--Row、Column和Stack
MainAxisAlignment.spaceEvenly 将主轴方向空白区域均分,使得children之间空间相等,包括首尾childre Flutter控件--Row、Column和Stack

2.2 mainAxisSize

也就是来规定自己( Row 或者 Column )的大小。

  • MainAxisSize.min : 主轴方向,包裹住 childre 即可。相当于 android 中的 wrap_content
  • MainAxisSize.max(默认值) : 主轴方向,铺满 ( Row 或者 Column )的父 Widget 的大小。 相当于 android 中的 match_parent

2.3 crossAxisAlignment (交叉轴)跟主轴垂直的一个轴

交叉轴顾名思义: 就是 跟 主轴 垂直的 一个轴 对于 Row 。交叉轴 是 在垂直。对于 Column,交叉轴 是水平 。下面还是 以 Row 举个例子

取值 说明 图片demo(Row)
CrossAxisAlignment.start 把 children 放到交叉轴的头部 Flutter控件--Row、Column和Stack
CrossAxisAlignment.end 把 children 放到交叉轴的尾部 Flutter控件--Row、Column和Stack
CrossAxisAlignment.center 把 children 放到交叉轴的中间 Flutter控件--Row、Column和Stack
CrossAxisAlignment.stretch 让children填满交叉轴方向 无(没有测试出来,控件 找不到了)
CrossAxisAlignment.baseline 让children 于 baseline 对齐,如果主轴是垂直的,那么这个值是当作开始 ,设置了此 属性 textBaseline 不能为 null Flutter控件--Row、Column和Stack

2.4 textDirection

children 在 主轴 怎样排列。 正方向排列还是反方向排列

Row

  • TextDirection.ltr : 表示在水平方向(主轴)。由左到右 , 左为头 , 右为尾
  • TextDirection.rtl :表示在水平方向(主轴)。由右到左 , 右为头 , 左为尾

Column

  • TextDirection.ltr : 表示在垂直方向(主轴)。由上到下 , 上为头 , 下为尾
  • TextDirection.rtl :表示在垂直方向(主轴)。由下到上 , 下为头 ,上为尾

2.5 verticalDirection

children 在 交叉轴 怎样排列。 正方向排列还是反方向排列

Row

  • VerticalDirection.down : 表示在垂直方向(交叉轴)。由上到下 , 上为头 , 下为尾
  • VerticalDirection.up :表示在垂直方向(交叉轴)。由下到上 , 下为头 , 上为尾

Column

  • VerticalDirection.down : 表示在水平方向(交叉轴)。由左到右 , 左为头 , 右为尾
  • TextDirection.rtl :表示在水平方向(交叉轴)。由右到左 , 右为头 , 左为尾

二 Stack

取代线性布局 (和Android中的LinearLayout相似,但是我感觉怎么这么像 FrameLayout 呢?),Stack允许子 widget 堆叠, 你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位(absolute positioning )布局模型设计的。用于将多个childs相对于其框的边缘定位,多用于以简单方式重叠children

2.1 属性

  • alignment: 默认值。AlignmentDirectional.topStart ( AlignmentDirectional(-1.0, -1.0) )。 表示从左上角开始排 children
  • textDirection: 文本方向 , children 的流动方向
  • overflow: 表示 超过的部分是否裁剪掉 Overflow.visible 不剪掉。 Overflow.clip 减掉
  • fit: 让 children 怎样填充 Stack 。
    • StackFit.passthrough 不改变子节点约束 也就是说 children 是多大就是多大
    • StackFit.expand 子节点最大可能的占用空间 ,让 children 的大小 扩大到 Stack 的大小
    • StackFit.loose:放开了子节点宽高的约束,可以让子节点从0到最大尺寸

三 demo图片

Flutter控件--Row、Column和Stack

demo 代码

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("row"),
        centerTitle: true,
      ),
      body: RowDemo(),
    );
  }
}

class RowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final _list = <Widget>[
      RaisedButton(
        disabledColor: Colors.red,
        child: Text("儿子1"),
      ),
      Text("儿子2"),
      Text("儿子3"),
      Text("儿子4"),
      Text("儿子5"),
    ];
    return Column(
      children: <Widget>[
        SizedBox(
          height: 30,
        ),
        Container(
          color: Colors.grey,
          child: Row(
            // 主轴(main axis)
            // 把 children 放到 Column 主轴 的哪个位置
            //  end : 尾部, start :头部, center : 中间 ,spaceBetween:在 children 之间均匀地放置 空间 ,spaceAround : 每个 children
            mainAxisAlignment: MainAxisAlignment.start,

            // 此 Row 的宽度。默认是 MainAxisSize.max
            //          MainAxisSize.min 是 包裹 children 的高度 即可  。android 中 相当于 wrap_content
            //          MainAxisSize.max 是 铺满 Row 的父 Widget 的宽度  。android 中 相当于 match_parent
            //  如果设置成 MainAxisSize.min 。 那么 mainAxisAlignment 属性相当于无效。 因为是包裹 children
            mainAxisSize: MainAxisSize.max,
            // 交叉轴(cross axis)
            // 把 children 放到 Column 主轴 的哪个位置
            // end : 尾部, start :头部, center : 中间 ,
            crossAxisAlignment: CrossAxisAlignment.start,
            // children 在主轴 的排列顺序
            textDirection: TextDirection.ltr,
            // children 在 交叉轴 的排列顺序
            verticalDirection: VerticalDirection.down,
            children: _list,
          ),
        ),
        SizedBox(
          height: 30,
        ),
        SizedBox(
            width: 200,
            height: 200,
            child: Stack(
              alignment: AlignmentDirectional.topStart,
//            alignment:   AlignmentDirectional(-1.0, -1.0),
              fit: StackFit.loose,
              overflow: Overflow.visible,
              children: <Widget>[
                Container(
                  color: Colors.black,
                  height: 200,
                  width: 200,
                ),
                Container(
                  color: Colors.deepPurple,
                  height: 100,
                  width: 100,
                ),
                Container(
                  color: Colors.green,
                  height: 50,
                  width: 50,
                ),
              ],
            )),
      ],
    );
  }
}

复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Unix/Linux编程实践教程

Unix/Linux编程实践教程

Bruce Molay、杨宗源、黄海涛 / 杨宗源、黄海涛 / 清华大学出版社 / 2004-10-1 / 56.00元

操作系统是计算机最重要的系统软件。Unix操作系统历经了几十年,至今仍是主流的操作系统。本书通过解释Unix的工作原理,循序渐进地讲解实现Unix中系统命令的方法,让读者理解并逐步精通Unix系统编程,进而具有编制Unix应用程序的能力。书中采用启发式、举一反三、图示讲解等多种方法讲授,语言生动、结构合理、易于理解。每一章后均附有大量的习题和编程练习,以供参考。 本书适合作为高等院校计算机及......一起来看看 《Unix/Linux编程实践教程》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

html转js在线工具
html转js在线工具

html转js在线工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换