Day07 - Flutter 小部件的布局-阿里云开发者社区

概述

单子布局组件
多子布局组件

一、单子布局组件

单子布局组件的含义是其只有一个子组件，可以通过设置一些属性设置该子组件所在的位置信息等。

比较常用的单子布局组件有：Align，Center，Padding，Container。

1.1、对齐组件

1.1.1、对齐介绍
看到Align这个词，我们就知道它有我们的 对齐方式 有关。
在其他端的开发中（iOS，Android，前端）Align通常只是一个属性而已，但是Flutter中Align也是一个组件。
我们可以通过二进制来看一下Align有一些属性：

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

提示：这里我们特别解释一下 widthFactor 和 heightFactor 作用：

因为子组件在父组件中的对齐方式必须有一个合并，就是父组件得知道自己的范围（宽度和高度）；

如果widthFactor和heightFactor不设置，那么替换Align会重置的大（替换为自己所在的父组件）；

我们也可以对他们进行设置，尺寸widthFactor设置为2，那么相对于Align的宽度是子组件跨度的2倍；也就是是子组件的几倍

1.1.2、对齐代码

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

1.2、中心组件

1.2.1、中心介绍
实际上 Center组件继承自Align，只是将alignment设置为Alignment.center。
原始码分析：

class Center extends Align {
   const Center({
      Key key,
      double widthFactor,
      double heightFactor,
      Widget child
   }) : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}

1.2.2、代码展示

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

1.3、填充组件

1.3.1、填充介绍
Padding组件在其他端也是一个属性而已，但是在Flutter中是一个小部件，但是Flutter中没有Margin这样一个小部件，这是因为外边距也可以通过Padding来完成。
填充通常用于设置子窗口小部件到父窗口小部件的边距（您可以称为是父组件的内边距或子窗口小部件的外边距）。
原始码分析：

const Padding({
   Key key,
   @requiredthis.padding, // EdgeInsetsGeometry类型（抽象类），使用EdgeInsets
   Widget child,
})

1.3.2、代码展示

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

1.4、集装箱组件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,
})

大多数属性在介绍其他容器时都已经介绍过了，不再重复述，但有两点需要说明：

容器的大小可以通过width，height属性来指定，也可以通过constraints来指定。实际容器内部会根据width，height来生成一个constraints；
color和decoration是互斥的，实际上，当指定color时，容器内会自动创建一个装饰；

1.4.2、集装箱代码

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.3、Box装潢
Container有一个非常重要的属性decoration：
他对应的类型是装修类型，但是它是一个抽象类。
在开发中，我们经常使用它的实现类 BoxDecoration 来进行实例化。
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 MyHomeBody extends StatelessWidget {
    @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
                 ), // 这里也可以使用Border.all统一设置
                 // top: BorderSide(
                    //  color: Colors.redAccent,
                   //   width: 3,
                   //   style: BorderStyle.solid
                  //  ),
               borderRadius: BorderRadius.circular(20), // 这里也可以使用.only分别设置
               boxShadow: [
                    BoxShadow(
                       offset: Offset(5, 5),
                       color: Colors.purple,
                       // 模糊度
                       blurRadius: 5
                    )
               ],
              //  shape: BoxShape.circle, // 会和borderRadius冲突
              gradient: LinearGradient(
                colors: [
                    Colors.green,
                    Colors.red
                ]
             )
          ),
       ),
    );
  }
}

1.4.4、通过Container+BoxDecoration来实现圆角图像

class HomeContent extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
       return Center(
          child: Container(
             width: 200,
             height: 200,
             decoration: BoxDecoration(
                 borderRadius: BorderRadius.circular(20),
                 image: DecorationImage(
                   image: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
                 )
             ),
          ),
      );
   }
}

二、多子布局组件

在开发中，我们经常需要将多个Widget放在一起进行布局，某些水平方向，垂直方向隔开，甚至有时候需要他们进行分解，其中图片上面放一段文字等；

这个时候我们需要使用多子布局部件（多子布局部件）。

比较常用的多子布局组件是(Row)行，(Column)列，(Stack)堆栈，我们来学习一下他们的使用。

2.1、Flex 组件(很少直接使用)实际上，我们即将学习的Row组件和Column组件都继承自Flex组件。

Flex组件和行，列属性主要的区别就是多一个direction方向。
当direction的增量Axis.horizontal的时候，则是Row。
当direction的增量Axis.vertical的时候，则是Column。

在学习 Row 和 Column 之前，我们先学习主轴和交叉轴的概念。
因为行是一行排布，列是一列排布，那么这些都存在两个方向，并且两个小部件分布的方向应该是对立的。
它们彼此都有 主轴（MainAxis）和 交叉轴（CrossAxis）的概念：

对于行(Row)来说，主轴：横着（MainAxis）和交叉轴：竖着（CrossAxis）
对于列(Column) 而言，主轴：竖着（主轴）和交叉轴：横着（CrossAxis）分别是下图

2.2、Row行组件

1>、行介绍Row组件用于将所有的子控件排成一行，实际上这种布局应该是放置于Web的Flex布局。如果熟悉Flex布局，会发现非常简单。从源码中查看Row的属性：

Row({
   Key key,
   // 主轴对齐方式
   MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
   // 水平方向尽可能大
   MainAxisSize mainAxisSize = MainAxisSize.max, 
   // 交叉处对齐方式
   CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, 
   // 水平方向子widget的布局顺序（默认为系统当前Locale环境的文本方向(如中文、英语都是从左往右，而阿拉伯语是从右往左））
   TextDirection textDirection, 
   // 表示Row纵轴（垂直）的对齐方向
   VerticalDirection verticalDirection = VerticalDirection.down, 
   // 如果上面是baseline对齐方式，那么选择什么模式（有两种可选）
   TextBaseline textBaseline, 
   List<Widget> children = const <Widget>[],
})

部分属性详细解析

主轴尺寸：

表示行在主轴（水平）方向占用的空间，MainAxisSize.max 最小是，表示重置多的占用水平方向的空间，此时无论子小物件实际占用多少水平空间，行的宽度始终等于水平方向的最大宽度
而MainAxisSize.min 表示缩减少的占用水平空间，当子小部件没有占满水平剩余空间，则行的实际宽度等于所有子小部件所占用的水平空间；
mainAxisAlignment：表示子小部件在行所占用的水平空间内对齐方式

mainAxisAlignment：表示子小部件在行所占用的水平空间内对齐方式

如果mainAxisSize变量MainAxisSize.min，则此属性无意义，因为子小部件的宽度等于行的宽度
只有当mainAxisSize的增量MainAxisSize.max时，此属性才赋值
MainAxisAlignment.start表示沿textDirection的初始方向对齐，
如textDirection为取值TextDirection.ltr时，则MainAxisAlignment.start表示左对齐，textDirection为取值TextDirection.rtl时表示从右对齐。
而MainAxisAlignment.end和MainAxisAlignment.start正好相反；
MainAxisAlignment.center表示居中对齐。

提示：mainAxisAlignment

start: 主轴的开始位置挨个摆放元素

end: 主轴结束位置挨个摆放元素

center: 主轴的中心点对齐

spaceBetween: 左右两边的距离为 0，其他元素之间平分间距

spaceAround: 左右两边的距离是其他元素之间的距离的一半

spaceEvenly: 所有的间距平分空间

crossAxisAlignment：表示子控件在纵轴方向的对齐方式

Row的高度等于子Widgets中最高的子元素高度
它的取值和MainAxisAlignment一样（包含start，end，center三个值）
不同的是crossAxisAlignment的参考系是verticalDirection，即verticalDirection转换VerticalDirection.down时crossAxisAlignment.start指顶部对齐，verticalDirection转换VerticalDirection.up时，crossAxisAlignment.start指底部对齐；而crossAxisAlignment.end和crossAxisAlignment.start正好相反；

提示：crossAxisAlignment

start: 交叉轴的起始位置对齐

end: 交叉轴的结束为止对齐

center: 中心点对齐(没默认值)

stretch: 基线对齐(必须有文本的时候才起效果)

baseline: 先Row占据交叉轴尽可能大的空间，将左所有的子Widget交叉轴的高度，拉伸到最大

2>、示例代码

class MyHomeBody extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
      return Row(
         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
         crossAxisAlignment: CrossAxisAlignment.end,
         mainAxisSize: MainAxisSize.max,
         children: <Widget>[
            Container(color: Colors.red, width: 60, height: 60),
            Container(color: Colors.blue, width: 80, height: 80),
            Container(color: Colors.green, width: 70, height: 70),
            Container(color: Colors.orange, width: 100, height: 100),
         ],
      );
   }
}

3>、mainAxisSize
默认情况下，行会重新覆盖多的宽度，让子小部件在其中进行排布，这是因为mainAxisSize属性替换值是MainAxisSize.max。
我们来看一下，如果这个值被修改为MainAxisSize.max会什么变化：

4>、Expanded 展开式

如果我们希望红色和黄色的容器Widget不要设置固定的宽度，而是替换剩余的部分，这个时候应该如何处理呢？

这个时候我们可以使用Expanded来包装Container Widget，并且将其的宽度不设置值，我们可以看到下图多余的空间被红色和黄色的部分分了

flex属性，弹性系数，Row会根据两个展开的弹性系数来决定它们剩下多少空间的比例

class MyHomeBody extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
      return Row(
         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
         crossAxisAlignment: CrossAxisAlignment.end,
         mainAxisSize: MainAxisSize.min,
         children: <Widget>[
            Expanded(
                flex: 1,
                child: Container(color: Colors.red, height: 60),
            ),
            Container(color: Colors.blue, width: 80, height: 80),
            Container(color: Colors.green, width: 70, height: 70),
            Expanded(
                flex: 1,
                child: Container(color: Colors.orange, height: 100),
            )
         ],
     );
   }
}

2.3、Column 列组件列组件用于将所有的子控件排成一列，学会了前面的行后，列只是和行的方向不同而已。

2.3.1>、专栏介绍，我们直接看它的源码：我们发现和Row属性是一致的

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>[],
})

2.3.2>、专栏演练

class MyHomeBody extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
       return Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.end,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
              Expanded(
                  flex: 1,
                  child: Container(color: Colors.red, width: 60),
              ),
              Container(color: Colors.blue, width: 80, height: 80),
              Container(color: Colors.green, width: 70, height: 70),
              Expanded(
                  flex: 1,
                  child: Container(color: Colors.orange, width: 100),
              )
          ],
       );
   }
}

2.4、堆栈组件在开发中，我们多个组件很有可能需要重叠显示，某些在一张图片上显示文字或一个按钮等。在Android中可以使用Frame实现，在Web端可以使用绝对定位，在Flutter中我们需要使用布局Stack。

2.4.1>、堆栈介绍Stack有一些属性：

Stack({
   Key key,
   this.alignment = AlignmentDirectional.topStart,
   this.textDirection,
   this.fit = StackFit.loose,
   this.overflow = Overflow.clip,
   List<Widget> children = const <Widget>[],
})

参数解析：

对齐：此参数决定如何去对齐没有定位（没有使用Positioned）或部分定位的子小部件。所谓部分定位，在这里特指没有在某某轴上定位：左，右为横轴，顶部，bottom为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位。
textDirection：和Row，Wrap的textDirection功能相同，都用于决定对齐对齐的参考系即：textDirection的变量TextDirection.ltr，则alignment的start代表左，end代表右； textDirection的大小TextDirection.rtl，则alignment的start代表右，end代表左。
fit：此参数用于决定没有定位的子小部件如何去适应Stack的大小。StackFit.loose表示使用子小部件的大小，StackFit.expand表示扩展伸到Stack的大小。
溢出overflow：此属性决定如何显示超过堆栈显示空间的子部件，变化Overflow.clip时，超出部分会被剪裁（隐藏），转化Overflow.visible时则不会。

2.4.2>、Stack 的 demo
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)),
                )
            ],
       );
    }
}

提示：已定位的组件只能在堆栈中使用

Day07 - Flutter 小部件的布局

一、单子布局组件

二、多子布局组件

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Day07 - Flutter 小部件的布局

一、单子布局组件

二、多子布局组件

热门文章

最新文章

相关电子书