Flutter学习笔记 --单一子元素组件

单一子元素组件有Container、Padding、Align、Center、FittedBox、AspectRatio、SingleChildScrollView、FractionallySizedBox、ConstrainedBox和Baseline等。

• Container

使用最多的单一元素组件就是container

 Container(
        alignment: Alignment.center,
        constraints: const BoxConstraints.expand(width: 100, height: 80),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.green, style: BorderStyle.solid, width: 2.0),
          image: const DecorationImage(image: AssetImage('images/home_icon.png')),
          borderRadius: const BorderRadius.all(Radius.circular(30)),
          boxShadow: const [
            BoxShadow(
              color: Colors.redAccent,
              offset: Offset(20, 20),
              blurRadius: 10,
            ),
          ],
        ),
        transform: Matrix4.rotationZ(.3),
        margin: const EdgeInsets.all(100.0),
        child: const Text('我是傻逼',style: TextStyle(fontWeight: FontWeight.bold,fontSize: 13, fontStyle: FontStyle.italic, color: Colors.grey)),
      )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

运行效果：

• Padding

Padding 在其他组件中padding是一个属性，我们也可以用Padding包含子组件。

Container(
            width: 100,
            height: 50,
            color: Colors.red,
            child: const Padding(
              padding:  EdgeInsets.all(10.0),
              child: Text('啊啊啊啊'),
            ),
          )
1
2
3
4
5
6
7
8
9

• Align

Align可以包含一个child,设置其对齐方式，例如居中、居左、居右等。还有两个属性widthFactor和heightFactor，当Align不设置widthFactor和heightFactor时，Align只会跟随alignment属性调整其位置。当Align设置这两个属性后，Align会随着这两个属性改变自己的尺寸。

Align(
	child:Text('我是Align'),
	heightFactor: 2.0,
	widthFactor:2.0,
	alignment:Alignment.center,
)
1
2
3
4
5
6

• Center

Center是一个居中的组件，继承Align。它也有heightFactor和widthFactor属性，实际上Center组件就是把Align组件中的alignment设置为Alignment.center后的组件。

Center(
	child:Text('我是Center'),
	heightFactor:2.0,
	widthFactor:2.0,
)
1
2
3
4
5

• FittedBox

FittedBox类似于Android中的ImageView控件，它有fit属性，类似于scaleType。

body: Column(
        children:[
          Container(
            width: 300,
            height: 100,
            color: Colors.red,
            child: const FittedBox(
              fit: BoxFit.contain,
              child: Text('BoxFix.contain', style: TextStyle(fontSize: 16),),
            ),
          ),
          Container(
            width:300,
            height: 100,
            color: Colors.green,
            child: const FittedBox(
              fit: BoxFit.cover,
              child: Text('BoxFit.cover', style: TextStyle(fontSize: 16),),
            ),
          ),
          Container(
            width: 300,
            height: 50,
            color: Colors.blue,
            child: const FittedBox(
              fit: BoxFit.fill,
              child: Text('BoxFit.fill', style: TextStyle(fontSize: 16),),
            ),
          ),
          Container(
            width: 300,
            height: 100,
            color: Colors.yellow,
            child: const FittedBox(
              fit: BoxFit.scaleDown,
              child: Text('BoxFit.scaleDown', style: TextStyle(fontSize: 16),),
            ),
          ),
          Container(
            width: 300,
            height: 30,
            color: Colors.purple,
            child: const FittedBox(
              fit: BoxFit.fitHeight,
              child: Text('BoxFit.fitHeight', style: TextStyle(fontSize: 16),),
            ),
          ),
        ]
      )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

运行效果：

• AspectRatio

AspectRatio 宽高比是相对父容器的。宽是父容器的宽，高是根据指定的比例计算出来的。如果父容器 同时给定了宽和高， 则AspectRatio 宽高比不生效。

Container(
            width: 200,
            color: Colors.blue,
            child: AspectRatio(
              aspectRatio: 2/1,
              child: Container(
                color: Colors.yellow,
              ),
            ),
          ),
          Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            child: AspectRatio(
              aspectRatio: 2/1,
              child: Container(
                color: Colors.purple,
              ),
            ),
          )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

运行结果：

• SingleChildScrollView

SingleChildScrollView是一个滚动布局，相当于Android中的ScrollView。默认滚动方向是垂直的，可以通过scrollDirection属性设置滚动方向。

• FractionallySizedBox

FractionallySizeBox是基于宽高缩放因子来调整布局大小的，和FittedBox一样子组件是有可能超出父组件设置的范围的。

Container(
                  color: Colors.purple,
                  width: 100,
                  height: 100,
                  child: FractionallySizedBox(
                    widthFactor: 2.0,
                    heightFactor: 0.5,
                    alignment: Alignment.center,
                    child: Container(
                      color: Colors.green,
                    ),
                  ),
                )
1
2
3
4
5
6
7
8
9
10
11
12
13

运行结果：

• ConstrainedBox

ConstrainedBox是约束组件，子组件不能超过设置的约定范围。

ConstrainedBox(
                  constraints: const BoxConstraints(
                    minWidth: 100,
                    minHeight: 100,
                    maxWidth: 100,
                    maxHeight: 100,
                  ),
                  child: Container(
                    color: Colors.green,
                    width: 100,
                    height: 200,
                  ),
                )
1
2
3
4
5
6
7
8
9
10
11
12
13

• Baseline

Baseline是一个基线组件。