前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter Spacer 灵活配置你的Row/Column

Flutter Spacer 灵活配置你的Row/Column

作者头像
Flutter笔记
发布2019-07-25 14:28:46
2.1K0
发布2019-07-25 14:28:46
举报
文章被收录于专栏:Flutter笔记

我们平时在写 Row/Column 的时候,一般会配置一下子widget 的排列方式。

默认排序方式

默认的排列方式有如下:

代码语言:javascript
复制
enum MainAxisAlignment {

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

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

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

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

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

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

看图了解一下。

spaceBetween:

spaceAround:

spaceEvenly:

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

不规则排序

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

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

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

代码语言:javascript
复制
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容器(如行或列)中窗口小部件之间的间距。

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

代码语言:javascript
复制
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了。

示例如下:

代码语言:javascript
复制
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,
      ),
    ],
  ),
)

效果如下:

总结

其实Spacer 就是包装好的 Expanded,但是这样也简化了我们很多的代码。

在 Flutter 中还有很多能简化我们代码的地方。

关注我,每天分享 Flutter & Dart 相关知识。

完整代码已经传至GitHub:https://github.com/wanglu1209/WFlutterDemo

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-05-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Flutter笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 默认排序方式
  • 不规则排序
  • 总结
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档