专栏首页Flutter入门到实战Flutter布局篇(1)--水平和垂直布局详解

Flutter布局篇(1)--水平和垂直布局详解

版权声明:本文首发在公众号Flutter那些事,未经授权,严禁转载。

本文版权归作者AWeiLoveAndroid所有,未经授权,严禁私自转载。转载请声明原文链接和作者信息。

本文示例代码发布在Github,地址为: https://github.com/AweiLoveAndroid/Flutter-learning/blob/master/README-CN.md

先来看看本文的目录,如下图所示:

本文目录

在原生Android开发中,我们经常会用LinearLayout来达到水平或垂直方向的布局,在Flutter中有两个常用的组件也能够做到类似的效果,分别是RowColumn组件,Row组件主要功能是处理水平方向的布局,Column组件主要功能是处理垂直方向的布局。下文会具体讲解在Flutter中如何使用Row和Column组件实现LinearLayout效果,以及两者之间的对比,方便大家对比学习。


LinearLayout 里面的android:orientation="horizontal”属性相当于Row组件,LinearLayout 里面的 android:orientation="vertical”属性相当于Column组件。

Flutter和LinearLayout的对比图示如下:

安卓的orientation属性在Flutter中的体现

Row的使用示例代码如下所示:

Row的使用示例代码

Column的使用示例代码如下所示:

Column的使用示例代码

Flutter中的Row以及Column使用效果图如下所示:

Flutter中的Row以及Column使用效果图

这里是Android里面的使用(由于Flutter效果和Android的是一样的,后文的安卓效果图就不再展示了)

Android里面的使用


LinearLayout 里面的android:layout_width="wrap_content"或者 android:layout_height="wrap_content"属性相当于Row/Column组件里面的 MainAxisSize.min 属性。

LinearLayout 里面的android:layout_width="match_parent"或者android:layout_height="match_parent"属性相当于Row/Column组件里面的 MainAxisSize.max 属性。Row/Column组件如果没有设置mainAxisSize属性,默认为max属性值。第二小节中的Row/Column组件我们并没有设置mainAxisSize属性,但是我们可以看到它的效果是MainAxisSize.max 属性的效果(Row自动填充宽为屏幕的宽,Column自动填充高为屏幕的高)。

Flutter和LinearLayout的对比图示如下:

Flutter和LinearLayout的对比图

Flutter使用图解如下:

Flutter中使用 MainAxisSize.max 效果图

Flutter中使用 MainAxisSize.min 效果图


这个是最复杂的,需要重点掌握。gravity属性在Android里面是用于指定控件本身或子孩子控件的对齐属性。在Flutter中我们可以使用 Row/Column组件MainAxisAlignment 以及 CrossAxisAlignment 实现控件的对齐效果。

MainAxisAlignment 是设置主轴方向的对齐方式。如果我们给 Row 组件设置 MainAxisAlignment 属性,那么它的主轴为水平方向。如果我们给 Column 组件设置 MainAxisAlignment 属性,那么它的主轴为垂直方向。

MainAxisAlignment 有6个属性值,默认值为start,分别是:

1、MainAxisAlignment.start,将子控件放在主轴的起始位置。
2、MainAxisAlignment.end,将子控件放在主轴末尾。
3、MainAxisAlignment.center,将子控件放在主轴中间位置。

下面这三个属性需要特别关注一下:

// 将主轴方向上的空白区域等分,使得子孩子控件之间的空白区域相等,
// 两端的子孩子控件都靠近首尾,没有间隙。
4、MainAxisAlignment.spaceBetween 

// 将主轴方向上的空白区域等分,使得子孩子控件之间的空白区域相等,
// 两端的子孩子控件都靠近首尾,首尾子孩子控件的空白区域为1/2。
5、MainAxisAlignment.spaceAround 

// 将主轴方向上的空白区域等分,使得子孩子控件之间的空白区域相等,包括首尾。
6、MainAxisAlignment.spaceEvenly

CrossAxisAlignment是设置交叉轴方向的对齐方式,比如当前给 Row 组件设置 CrossAxisAlignment 属性,那么它的交叉轴为垂直方向。如果我们给 Column 组件设置 CrossAxisAlignment 属性,那么它的交叉轴为水平方向。

CrossAxisAlignment 有5个属性值,默认值为center,分别是:

CrossAxisAlignment.start, 子孩子控件显示在交叉轴的起始位置。
CrossAxisAlignment.end, 子孩子控件显示在交叉轴的末尾位置。
CrossAxisAlignment.center, 子孩子控件显示在交叉轴的中间位置。
CrossAxisAlignment.stretch, 子孩子控件完全填充交叉轴方向的空间。
CrossAxisAlignment.baseline, 让子孩子控件的baseline在交叉轴方向对齐。

具体的示例如下:

(1)Row的子孩子组件对齐

下面这个是Row的子孩子组件对齐的示例:

示例中设置的主轴的属性值是:MainAxisAlignment.spaceEvenly,交叉轴的属性值是:CrossAxisAlignment.end

Row的子孩子组件对齐示例代码

使用图示如下图所示:

Row的子孩子组件对齐效果图

(2)Column的子孩子组件对齐

下面这个是Column的子孩子组件对齐的示例:

示例中设置的主轴的属性值是:MainAxisAlignment.spaceEvenly,交叉轴的属性值是:CrossAxisAlignment.end

Column的子孩子组件对齐示例代码

使用图示如下图所示:

Column的子孩子组件对齐效果图


在Android中 layout_weight 是LinearLayout里面的属性,它是用来给子孩子设置权重的,表示给子孩子按照设置的比例去分配空间。在Flutter中我们可以使用 Expanded 包裹**Row**或**Column**组件,使用 Expanded 组件里面的 flex**属性** 去实现同样的效果。

先来看看Row是会如何给子孩子设置权重的,示例代码如下所示:

Row给子孩子设置权重示例代码

上例中我写了一个Row,里面有3个并排的Icon组件,权重分别是1、2、5,为了好区分,我给每个Icon加了不同的背景颜色。为了代码更优雅,我封装了一个buildIcon(IconData icon, {int flex = 1, Color color}) 函数,IconData是必须传入的参数; 参数2是权重,默认值为1; 参数3是组件的背景颜色,参数2和参数3是可选参数,可以根据需要进行传入。

我们看看效果图,如图所示:

效果图

同理,我们只需要把上例中的 new Row替换成new Column就可以实现垂直方向设置权重,如上图右边所示。


在Flutter中的Row或Column中关于 direction 有2个需要掌握的属性,分别是:textDirection 以及verticalDirection。其中textDirection属性在Row组件中起到很大作用,verticalDirection属性在Column组件中起到很大作用。

textDirection 的属性值为 TextDirection.ltr,表示所有的子控件都是从左到右顺序排列,这是默认值。如果为TextDirection.rtl 表示从右边开始向左边倒序排列。

verticalDirection 的属性值为 VerticalDirection.down, 表示所有的子控件都是从上到下顺序排列。如果为VerticalDirection.up 从底部开始向上倒序排列。

先来看看Row中是如何使用的,我们这里使用的 textDirection 属性,是还是拿本章一开始的那个例子做修改,核心代码如下所示:

Row中使用textDirection属性

再来看看Column是如何使用的,可以看出只需要把 textDirection 属性换成 verticalDirection 就可以了。是不是很简单?

Column中使用verticalDirection属性

我们看一下效果图,如图所示:

使用效果图

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ionic和cordova初探--从安装到运行首个app

    好多人说ionic好用,一直要推荐我用,我就不信了,来安装玩一下试试效果。实践出真知!安装过程各种坑,工具太多了,太麻烦了,差点放弃(还好坚持下来呢)。

    AWeiLoveAndroid
  • 开发工具总结(11)之nodejs、npm和yarn安装和使用和填坑详解

    版权声明:本文为博主原创文章,未经博主允许不得转载。https://www.jianshu.com/p/9eba0e2c0697

    AWeiLoveAndroid
  • 全面总结国内BATH等大厂开源的安卓有关的库(持续更新中...)

    UltraViewPager 是阿里开源的一个封装多种特性的 ViewPager ,主要是为多页面切换场景提供统一解决方案。

    AWeiLoveAndroid
  • 前百度主任架构师创业,两年融资千万美元,他说AI新药研发将迎来黄金十年

    要在AI医疗领域创业,扎实的AI技术和对医疗行业背景的了解缺一不可,这也是许多创业者想要在此掘金却望而止步或中道崩溃的原因。但是,也总有一些开拓者能不断探索前路...

    AI科技大本营
  • go 自定义排序

    超级大猪
  • Uber创始人清华演讲实录:谈创业者要具备的八种特质

    风靡世界的打车软件Uber刚刚度过5岁生日。9月8日Uber的创始人特拉维斯·卡拉尼克(Travis Kalanick)在清华大学发表演讲。作为最早加入的5名员...

    华章科技
  • G-star2017:吃鸡开发商全新MMORPG将出展,《TERA》惨败后还不死心?

    VRPinea
  • 开源 LoRaWAN Network Server 项目 | ChirpStack 学习笔记

    最近在研究一些 LoRaWAN 新功能时又翻到了这个项目,发现一些新特性在这个项目中已经实现了,惊讶作者 brocaar 的效率之高。这一两年也陆续收到不少朋友...

    twowinter
  • JS示例18-数组基本使用

    专注APP开发
  • GLUE基准新突破:微软多任务模型首次超越自然语言人类基准

    通用语言理解评估基准(GLUE)是用于评估和分析多种已有自然语言理解任务的模型性能的工具,模型基于在所有任务的平均准确率进行评估。WNLI(Winograd 自...

    机器之心

扫码关注云+社区

领取腾讯云代金券