六、单子布局、多子布局

一、单子布局组件

单子布局组件的含义是其只有一个子组件

比较常用的单子布局组件有:AlignCenterPaddingContainer

1.1 Align组件

在Flutter中,Align也是一个组件,和其他语言有很大的区别(iOS Android中仅仅只是一个属性)

//源码分析
const Align({
  Key key,
  this.alignment: Alignment.center, // 对齐方式,默认居中对齐
  this.widthFactor, // 宽度因子,不设置的情况,会尽可能大
  this.heightFactor, // 高度因子,不设置的情况,会尽可能大
  Widget child // 要布局的子Widget
})

widthFactorheightFactor作用:

  • 因为子组件在父组件中的对齐方式必须有一个前提,就是父组件需要明确自己的范围(宽度和高度);
  • 如果widthFactorheightFactor不设置,那么默认Align会尽可能的大(尽可能占据自己所在的父组件);
  • 我们也可以对他们进行设置,比如widthFactor设置为3,那么相对于Align的宽度是子组件宽度的3倍;

下面演练一下Align:

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(
      child: Icon(Icons.pets, size: 36, color: Colors.red),
      alignment: Alignment.bottomRight,
      widthFactor: 3,
      heightFactor: 3,
    );
  }
}

1.2 Center组件

通过源码即可看到:Center组件继承自Align,只是将alignment设置为Alignment.center

没啥好讲的,演练一下Center:

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Icon(Icons.pets, size: 36, color: Colors.red),
      widthFactor: 1,
      heightFactor: 1,
    );
  }
}

1.3 Padding组件

Padding组件在iOS、Android端也是一个属性,但是在Flutter中也是一个Widget

Padding通常用于设置子Widget到父Widget的边距(理解为父组件的内边距或子Widget的外边距)。

//源码分析
const Padding({
  Key key,
  @required this.padding, // EdgeInsetsGeometry类型(抽象类),使用EdgeInsets
  Widget child,
})

演练一下Padding:

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(20),
      child: Text(
        "莫听穿林打叶声,何妨吟啸且徐行。竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生。",
        style: TextStyle(
          color: Colors.redAccent,
          fontSize: 18
        ),
      ),
    );
  }
}

在EdgeInsets中有很多根据不同的使用场景对应的设置方法

1.4 Container组件

Container组件类似于Android中的View,iOS中的UIView。

如果你需要一个视图,可以设置背景颜色、图像、固定的尺寸、边框、圆角等效果,那么就可以使用Container组件。

1.4.1 Container组件介绍

Container在开发中被使用的频率是非常高的,特别是我们经常会将其作为容器组件。

Container({
  this.alignment,
  this.padding, //容器内补白,属于decoration的装饰范围
  Color color, // 背景色
  Decoration decoration, // 背景装饰
  Decoration foregroundDecoration, //前景装饰
  double width,//容器的宽度
  double height, //容器的高度
  BoxConstraints constraints, //容器大小的限制条件
  this.margin,//容器外补白,不属于decoration的装饰范围
  this.transform, //变换
  this.child,
})

需要注意的几点:

  • 容器的大小可以通过widthheight属性来指定,也可以通过constraints来指定,如果同时存在时,widthheight优先。实际上Container内部会根据widthheight来生成一个constraints;(查看源码)
  • colordecoration是互斥的,实际上,当指定color时,Container内会自动创建一个decoration;
  • decoration属性稍后我们详细学习;

演练一下Container:

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Color.fromRGBO(3, 3, 255, .5),
        width: 100,
        height: 100,
        child: Icon(Icons.pets, size: 32, color: Colors.white),
      ),
    );
  }
}
1.4.2 BoxDecoration

Container有一个非常重要的属性 decoration

  • 他对应的类型是Decoration类型,但是它是一个抽象类。
  • 在开发中,我们经常使用它的实现类BoxDecoration来进行实例化。
//查看源码
const BoxDecoration({
    this.color, // 颜色,会和Container中的color属性冲突
    this.image, // 背景图片
    this.border, // 边框,对应类型是Border类型,里面每一个边框使用BorderSide
    this.borderRadius, // 圆角效果
    this.boxShadow, // 阴影效果
    this.gradient, // 渐变效果
    this.backgroundBlendMode, // 背景混合
    this.shape = BoxShape.rectangle, // 形变
  })

部分效果演示:

class _ZQHomeContentState extends State<ZQHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
                // color: Color.fromRGBO(3, 3, 255, .5),
        width: 150,
        height: 150,
        child: Icon(Icons.pets, size: 32, color: Colors.white),
        decoration: BoxDecoration(
            color: Colors.amber, // 背景颜色
            border: Border.all(
                color: Colors.redAccent,
                width: 3,
                style: BorderStyle.solid
            ),
            borderRadius: BorderRadius.circular(75),// 这里也可以使用.only分别设置
            // shape: BoxShape.circle, // 会和borderRadius冲突
            boxShadow: [
              BoxShadow(
                  offset: Offset(5, 5),
                  color: Colors.purple,
                  blurRadius: 5
              )
            ],
            gradient: LinearGradient(
                colors: [
                  Colors.green,
                  Colors.red
                ]
            )
        ),
      ),
    );
  }
}

上一个章节我们提到可以通过 Container+BoxDecoration来实现圆角图像

二、多子布局组件

在开发中将多个Widget放在一起进行布局,比如水平方向、垂直方向排列,甚至需要进行层叠效果时,就需要使用多子布局组件(Multi-child layout widgets)

比较常用的多子布局组件是RowColumnStack

2.1 Flex组件

在学习Row和Column之前,我们先学习主轴交叉轴的概念。

因为Row是一行排布,Column是一列排布,那么它们都存在两个方向,并且两个Widget排列的方向应该是对立的。

都有主轴(MainAxis)和交叉轴(CrossAxis)的概念:

  • 对于Row来说,主轴(MainAxis)和交叉轴(CrossAxis)


    ![Simulator Screen Shot - iPhone 11 - 2020-11-12 at 17.06.01.png](https://upload-images.jianshu.io/upload_images/7361389-2047694806d785ed.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  • 对于Column来说,主轴(MainAxis)和交叉轴(CrossAxis)


    Simulator Screen Shot - iPhone 11 - 2020-11-12 at 17.06.01.png

2.1.1 Row、Colum组件

在前面我们用到过Row、Colum这两个组件,实际上均是继承自Flex组件。

  • Flex组件和Row、Column属性主要的区别就是多一个direction。(查看源码)
  • 当direction的值为Axis.horizontal的时候,则是Row。
  • 当direction的值为Axis.vertical的时候,则是Column。
Row({
  Key key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, // 主轴对齐方式
  MainAxisSize mainAxisSize = MainAxisSize.max, // 水平方向尽可能大
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, // 交叉处对齐方式
  TextDirection textDirection, // 水平方向子widget的布局顺序(默认为系统当前Locale环境的文本方向(如中文、英语都是从左往右,而阿拉伯语是从右往左))
  VerticalDirection verticalDirection = VerticalDirection.down, // 表示Row纵轴(垂直)的对齐方向
  TextBaseline textBaseline, // 如果上面是baseline对齐方式,那么选择什么模式(有两种可选)
  List<Widget> children = const <Widget>[],
})
Column({
    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>[],
  })

通过定义我们发现,二者是差不多的,所以属性我们放在一块讲解,下面以Row为例,Column基本相似:

mainAxisSize:

  • 表示Row在主轴(水平)方向占用的空间,默认是MainAxisSize.max,表示尽可能多的占用水平方向的空间,此时无论子widgets实际占用多少水平空间,Row的宽度始终等于水平方向的最大宽度
  • MainAxisSize.min表示尽可能少的占用水平空间,当子widgets没有占满水平剩余空间,则Row的实际宽度等于所有子widgets占用的的水平空间;

mainAxisAlignment:表示子Widgets在Row所占用的水平空间内对齐方式

  • 如果mainAxisSize值为MainAxisSize.min,则此属性无意义,因为子widgets的宽度等于Row的宽度
  • 只有当mainAxisSize的值为MainAxisSize.max时,此属性才有意义
  • MainAxisAlignment.start表示沿textDirection的初始方向对齐,
  • 如textDirection取值为TextDirection.ltr时,则MainAxisAlignment.start表示左对齐,textDirection取值为TextDirection.rtl时表示从右对齐。
  • MainAxisAlignment.endMainAxisAlignment.start正好相反;
  • MainAxisAlignment.center表示居中对齐。

crossAxisAlignment:表示子Widgets在纵轴方向的对齐方式

  • Row的高度等于子Widgets中最高的子元素高度
  • 它的取值和MainAxisAlignment一样(包含startendcenter三个值)
  • 不同的是crossAxisAlignment的参考系是verticalDirection,即verticalDirection值为VerticalDirection.downcrossAxisAlignment.start指顶部对齐,verticalDirection值为VerticalDirection.up时,crossAxisAlignment.start指底部对齐;而crossAxisAlignment.endcrossAxisAlignment.start正好相反;

2.1.2 Expanded

在上图中,如果我们希望三个Container铺满Row剩余的部分,则需要使用Expanded包裹

Expanded有一个很重要的属性flex,默认值为1. 一旦被Expanded包裹,原本设置的width无效,flex即为灵活控件占比

class _ZQHomeContentState extends State<ZQHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(flex : 2,child: Container(width: 100,height: 100,color: Colors.red, child: Align(child: Text('helloWorld')))),
        SizedBox(height: 10,),
        Expanded(flex : 1,child: Container(width: 100,height: 100,color: Colors.green, child: Align(child: Text('helloWorld')))),
        SizedBox(height: 10,),
        Container(width: 100,height: 100,color: Colors.blue, child: Align(child: Text('helloWorld'))),
      ],
    );
  }
}

2.2 Stack组件

层叠布局Stack

Stack({
  Key key,
  this.alignment = AlignmentDirectional.topStart,
  this.textDirection,
  this.fit = StackFit.loose,
  this.overflow = Overflow.clip,
  List<Widget> children = const <Widget>[],
})
alignment:此参数决定如何去对齐没有定位(没有使用Positioned)或部分定位的子widget。所谓部分定位,在这里**特指没有在某一个轴上定位:**left、right为横轴,top、bottom为纵轴,只要包含某个轴上的一个定位属性就算在该轴上有定位。
  • textDirection:和Row、Wrap的textDirection功能一样,都用于决定alignment对齐的参考系即:textDirection的值为TextDirection.ltr,则alignment的start代表左,end代表右;textDirection的值为TextDirection.rtl,则alignment的start代表右,end代表左。

  • fit:此参数用于决定没有定位的子widget如何去适应Stack的大小。StackFit.loose表示使用子widget的大小,StackFit.expand表示扩伸到Stack的大小。

  • overflow:此属性决定如何显示超出Stack显示空间的子widget,值为Overflow.clip时,超出部分会被剪裁(隐藏),值为Overflow.visible 时则不会。

Stack会经常和Positioned一起来使用,Positioned可以决定组件在Stack中的位置,用于实现类似于Web中的绝对定位效果。

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          color: Colors.purple,
          width: 300,
          height: 300,
        ),
        Positioned(
          left: 20,
          top: 20,
          child: Icon(Icons.favorite, size: 50, color: Colors.white)
        ),
        Positioned(
          bottom: 20,
          right: 20,
          child: Text("你好啊,李银河", style: TextStyle(fontSize: 20, color: Colors.white)),
        )
      ],
    );
  }
}

注意:Positioned组件只能在Stack中使用。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 一. 多子布局组件 在开发中,我们经常需要将多个Widget放在一起进行布局,比如水平方向、垂直方向排列,甚至有时...
    happy神悦阅读 424评论 0 0
  • Flutter入门笔记系列文章部分内容来源于《Flutter 实战》,如有侵权请联系删除! 所谓线性布局,即指沿水...
    怡红快绿阅读 801评论 0 2
  • 一、单子布局组件 单子布局组件的含义是其只有一个子组件,可以通过设置一些属性设置该子组件所在的位置信息等。比较常用...
    得_道阅读 478评论 0 0
  • Widget 分类 widget 其实是Element 的配置文件,而Element是右RenderObject ...
    Ray_lawq阅读 685评论 0 1
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,474评论 16 22