Flutter Spacer 灵活配置你的Row/Column

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

内容简介:默认的排列方式有如下:看图了解一下。spaceBetween:

默认的排列方式有如下:

enum MainAxisAlignment {

  /// 将children放置在主轴的起点
  start,

  /// 将children放置在主轴的末尾
  end,

  /// 将children放置在主轴的中心
  center,

  /// 将主轴方向上的空白区域均分,使得children之间的空白区域相等,首尾child都靠近首尾,没有间隙
  spaceBetween,

  /// 将主轴方向上的空白区域均分,使得children之间的空白区域相等,但是首尾child的空白区域为1/2
  spaceAround,

  /// 将主轴方向上的空白区域均分,使得children之间的空白区域相等,包括首尾child
  spaceEvenly,
}
复制代码

看图了解一下。

spaceBetween:

Flutter Spacer 灵活配置你的Row/Column

spaceAround:

Flutter Spacer 灵活配置你的Row/Column

spaceEvenly:

Flutter Spacer 灵活配置你的Row/Column

可以看到确实如我们刚才所写的一样。

不规则排序

那如果这个时候我想实现如下效果,该怎么做?

Flutter Spacer 灵活配置你的Row/Column

一个小方块在最前面,两个小方块在后面。

这个时候就需要Spacer,那什么是Spacer,按照惯例来看官方文档:

Spacer creates an adjustable, empty spacer that can be used to tune the spacing between widgets in a Flex container, like Row or Column.

Spacer创建一个可调整的空间隔,可用于调整Flex容器(如行或列)中窗口小部件之间的间距。
复制代码

接下来再看一下该类,确定一下怎么使用:

class Spacer extends StatelessWidget {
  /// Creates a flexible space to insert into a [Flexible] widget.
  ///
  /// The [flex] parameter may not be null or less than one.
  const Spacer({Key key, this.flex = 1})
    : assert(flex != null),
      assert(flex > 0),
      super(key: key);

  /// 用于确定占用多少空间的弹性系数。
  /// 在放置不灵活的子对象后,根据子对象的弹性系数,将自由空间按比例分割,
  /// 从而确定[间隔对象]在主轴中可以占用的空间量。默认为1。
  final int flex;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: flex,
      child: const SizedBox.shrink(),
    );
  }
}
复制代码

可以看到,它其实就是包装了一个 Expanded 的 SizedBox 。

知道了原理以后我们就可以灵活控制 Row/Column了。

示例如下:

body: Center(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      Container(
        color: Colors.blue,
        margin: EdgeInsets.symmetric(horizontal: 5),
        height: 50,
        width: 50,
      ),
      Spacer(flex: 2), // 弹性系数为2
      Container(
        color: Colors.blue,
        height: 50,
        margin: EdgeInsets.symmetric(horizontal: 5),
        width: 50,
      ),
      Spacer(), // 弹性系数默认为1
      Container(
        color: Colors.blue,
        margin: EdgeInsets.symmetric(horizontal: 5),
        height: 50,
        width: 50,
      ),
    ],
  ),
)
复制代码

效果如下:

Flutter Spacer 灵活配置你的Row/Column

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

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

Java学习笔记

Java学习笔记

林信良 / 清华大学出版社 / 2015-3-1 / CNY 68.00

●本书是作者多年来教学实践经验的总结,汇集了学员在学习课程或认证考试中遇到的概念、操作、应用等问题及解决方案 ●针对Java SE 8新功能全面改版,无论是章节架构或范例程序代码,都做了重新编写与全面翻新 ●详细介绍了JVM、JRE、Java SE API、JDK与IDE之间的对照关系 ●从Java SE API的源代码分析,了解各种语法在Java SE API中的具体应用 ......一起来看看 《Java学习笔记》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

URL 编码/解码
URL 编码/解码

URL 编码/解码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具