10.开发中最让人感到惬意的还得是它—常用组件详解（填充系列）

Posted 2021-07-21 阿 T

前言
普通的基础组件自然不能满足我们的日常开发需求，所以小T带大家了解Flutter开发中的常用组件

本篇将介绍常用的组件。分为上中下三篇在这里插入图片描述

结构图：

本小结内容：

1.SizedBox

• SizedBox.expand
• SizedBox.shrink
• SizedBox.fromSize

2.Expanded

这两个组件都是在屏幕适配时常用或者必用的，因为啥呢，它省事啊！

1.SizedBox

这是一个特定大小的盒子。这个widget给予子控件宽度和高度。如果宽度或高度为null，则此widget将调整自身大小以匹配子控件的大小。

让我们来看看他的源码：

SizedBox({ 
	Key? key, 
	this.width, 
	this.height, 
	Widget? child 
})

确实是很简单，但是丝毫不影响它的强大功能呢~

SizedBox尺寸调节：

• SizedBox没有宽高约束，子控件有宽高约束，那么SizedBox会调节自己匹配子控件大小。
• SizedBox有宽高约束，SizedBox子控件没有宽高约束，SizedBox父控件无约束，那么SizedBox会将自己的约束条件给予SizedBox子控件。
• SizedBox父控件有约束，那么约束会传递给SizedBox。

举个小栗子：

	     SizedBox(
            child: Container(
              width: 20,
              height: 20,
              child: Text("普通的填充"),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 10),
            child: SizedBox(
              width: 20,
              height: 20,
              child: Text("包含填充"),
            ),
          ),
          Container(
            width: 20,
            height: 20,
            margin: EdgeInsets.only(top: 10),
            child: SizedBox(
              child:Text("没啥用哈哈"),
            ),
          ),

SizedBox.expand属性

尽可能大的在父控件的约束内显示

 Container(
            margin: EdgeInsets.only(top: 20),
            color: Colors.red,
            width: 50,
            height: 50,
            child: SizedBox.expand(
              child: Text("尽可能大的在父控件的约束内显示"),
            ),
          ),

SizedBox.shrink属性

尽可能小的在父控件的约束内显示

 Container(
            margin: EdgeInsets.only(top: 20),
            color: Colors.red,
            width: 50,
            height: 50,
            child: SizedBox.expand(
              child: Text("尽可能小的在父控件的约束内显示"),
            ),
          ),

SizedBox.fromSize

以Size尺寸约束

Container(
            margin: EdgeInsets.only(top: 10),
            child: SizedBox.fromSize(
              size: Size(20,20),
              child:  Text("以Size尺寸约束"),
            ),
          ),

这里解释一下Size:

• Size(width, height)：指定宽高
• Size.copy(size) ：从另一个Size复制尺寸
• Size.square(dimension)：正方形，dimension：边长
• Size.fromWidth(width)：指定宽度
• Size.fromHeight(height)：指定高度
• Size.fromRadius(radius)：指定半径，结果一样是正方形，Size.fromRadius(radius) = Size.square(2* radius)
  这是一个用于标明组件尺寸的，开发中不常用，大家听听图一乐~
  

2.Expanded

Expanded组件是flutter中使用率很高的一个组件，它可以动态调整child组件沿主轴的尺寸，比如填充剩余空间，比如设置尺寸比例。它常常和Row或Column组合起来使用。

让我们来看看源码：

Expanded(
{Key key,
int flex: 1,
@required Widget child}
)

它除了child之外，有一个flex属性比较常用。flex表示弹性系数，默认是1。

它最最最常用在Row和Column中

基础组件详解请看这篇文章

举个栗子：
当Row中的组件不使用Expanded的时候

Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: 20,
          ),
          Container(
              color: Colors.red,
              child: Row(children: <Widget>[
                Image.asset(
                  "images/myself.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "images/myself.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "images/myself.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                )
              ]))
        ],
      ),
    );

使用Expanded时：

Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: 20,
          ),
          Container(
              color: Colors.red,
              child: Row(children: <Widget>[
                Expanded( //使用ta去包裹组件
                  child: Image.asset(
                    "images/myself.jpg",
                    width: 100,
                    height: 100,
                    fit: BoxFit.cover,
                  ),
                ),
                Image.asset(
                  "images/myself.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "images/myself.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                )
              ]))
        ],
      ),
    );

这些组件就是这么简单~

至此我们的Flutter的基本组件和常用组件在这里就结束了。
我们将会开启对于网络请求，路由管理，屏幕适配，性能优化等进阶~，希望大家持续关注阿T。

欢迎留言纠正 ~ 不妨给个点赞哈哈

我是阿T一个幽默的程序员 我们下期再见~

添加我为你的好友，领取源码以及Flutter学习资料~