Hellom's Studio.

flutter 之布局篇

flutter 布局
字数统计: 726阅读时长: 3 min
2019/07/19 Share

flutter 相关常用的布局组件有以下三大类：

Container

RenderObjectWidget

RenderObjectWidget 分为两类：

SingleChildRenderObjectWidget 单节点 和 MultiChildRenderObjectWidget 多节点

SingleChildRenderObjectWidget 单节点

Opacity：设置透明度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
e.g.

Padding(
    padding: EdgeInsets.all(10),//设置内边距
    //剪裁为带圆角的方形
    child: ClipRRect(
        borderRadius:
            BorderRadius.all(Radius.circular(10)), //设置圆角
        child: Opacity(
            opacity: 0.6,
            child: Image.network(
            'https://s2.ax1x.com/2019/07/18/ZXbWKU.jpg',
            width: 100,
            height: 100,
            ),
        ),
    ),
)

ClipOval： 裁剪为圆形

1
2
3
4
5
6
7
8
9
10
11
12
e.g.

//剪裁为圆形
ClipOval(
    child: SizedBox(
        child: Image.network(
            'https://s2.ax1x.com/2019/07/18/ZXbWKU.jpg',
            width: 100,
            height: 100,
        ),
    ),
),

ClipRRect： 裁剪为方形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
e.g.

Padding(
    padding: EdgeInsets.all(10),//设置内边距
    //剪裁为带圆角的方形
    child: ClipRRect(
        borderRadius:
            BorderRadius.all(Radius.circular(10)), //设置圆角
        child: Opacity(
            opacity: 0.6,
            child: Image.network(
            'https://s2.ax1x.com/2019/07/18/ZXbWKU.jpg',
            width: 100,
            height: 100,
            ),
        ),
    ),
)

PhysicalModel: 将布局显示成不同形状的

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
e.g.

Container(
    height: 100, //设置容器的高度
    margin: EdgeInsets.all(10), //设置外边距
    child: PhysicalModel( //将布局设置为边缘柔化的
        color: Colors.transparent,
        borderRadius: BorderRadius.circular(6), //设置圆角
        clipBehavior: Clip.antiAlias, //抗锯齿(边缘柔化、消除混叠)
        child: PageView( //轮播
            children: <Widget>[
                _item('page1', Colors.orange),
                _item('page1', Colors.pink),
                _item('page1', Colors.yellow)
            ],
        ),
    )
)


_item(String title, Color color) {
    return Container(
        alignment: Alignment.center, //设置容器的对齐方式
        decoration: BoxDecoration(color: color), //设置盒子的颜色
        child: Text(title, style: TextStyle(fontSize: 22, color: Colors.white)), //设置字体的样式
    );
}

Align Center：布局居中

1
2
3
e.g.

alignment: Alignment.center

Padding：内边距

1
2
3
e.g.

padding: EdgeInsets.all(10),

SizedBox：布局大小

1
2
3
4
5
6
7
8
9
10
11
e.g.

ClipOval(
    child: SizedBox( //设置盒子大小
        child: Image.network(
            'https://s2.ax1x.com/2019/07/18/ZXbWKU.jpg',
            width: 100,
            height: 100,
        ),
    ),
),

FractionallySizeBox：通过百分比 约束布局水平或垂直方向的伸展

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
e.g.

FractionallySizedBox(
    widthFactor: 1, //宽度因子
    child: Container(
        decoration:
            BoxDecoration(color: Colors.yellowAccent),
        padding: EdgeInsets.all(10),
        margin: EdgeInsets.fromLTRB(0, 0, 0, 15),
        child: Text(
            '宽度撑满',
            textAlign: TextAlign.center,
        ),
    ),
)

MultiChildRenderObjectWidget 多节点

Stack：层叠

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
e.g.

//实现图片层叠
Stack(
    children: <Widget>[
        Image.network(
            'https://s2.ax1x.com/2019/07/18/ZXbWKU.jpg',
            width: 100,
            height: 100,
        ),
        Positioned( //固定在上一张图片的 左下角
            left: 0,
            bottom: 0,
            child: Image.network(
            'https://s2.ax1x.com/2019/07/18/ZXbWKU.jpg',
            width: 36,
            height: 36,
            ),
        )
    ],
),

Flex

Column

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
e.g.

 Column(
    children: <Widget>[
        Text('列表'),
        Expanded(
            child: Container(
                decoration: BoxDecoration(
                    color: Colors.red,
                ),
            child: Text('拉伸填满高度'),
            ),
        )
    ],
),

Row

  • Wrap 水平布局 可换行

    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
    e.g.

    Wrap(
    //创建一个wrap布局，从左向右进行排列，会自动换行
        spacing: 8, //水平间距
        runSpacing: 6, //垂直间距
        children: <Widget>[
            _chip('Flutter'),
            _chip('进阶'),
            _chip('实战'),
            _chip('携程'),
            _chip('Appadasdasdas'),
        ],
    )

    _chip(String label) {
        //带有头像的 类似于标签
        return Chip(
          label: Text(label),
          avatar: CircleAvatar( //圆形的头像
            backgroundColor: Colors.blue.shade900,
            child: Text(
              label.substring(0, 1),
              style: TextStyle(fontSize: 10),
            ),
          ),
        );
    }

  • Flow

ParentDataWidget：

Positioned：用于固定位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
e.g.

//实现图片层叠
Stack(
    children: <Widget>[
        Image.network(
            'https://s2.ax1x.com/2019/07/18/ZXbWKU.jpg',
            width: 100,
            height: 100,
        ),
        Positioned( //固定在上一张图片的 左下角
            left: 0,
            bottom: 0,
            child: Image.network(
            'https://s2.ax1x.com/2019/07/18/ZXbWKU.jpg',
            width: 36,
            height: 36,
            ),
        )
    ],
),

Flexible

Expanded：用于展开大小

1
2
3
4
5
6
7
8
9
10
e.g.

Expanded( 
    child: Container(
        decoration: BoxDecoration(
            color: Colors.red,
        ),
    child: Text('拉伸填满高度'),
    ),
)
CATALOG
  1. 1. Container
  2. 2. RenderObjectWidget
    1. 2.1. SingleChildRenderObjectWidget 单节点
      1. 2.1.1. Opacity：设置透明度
      2. 2.1.2. ClipOval： 裁剪为圆形
      3. 2.1.3. ClipRRect： 裁剪为方形
      4. 2.1.4. PhysicalModel: 将布局显示成不同形状的
      5. 2.1.5. Align Center：布局居中
      6. 2.1.6. Padding：内边距
      7. 2.1.7. SizedBox：布局大小
      8. 2.1.8. FractionallySizeBox：通过百分比 约束布局水平或垂直方向的伸展
    2. 2.2. MultiChildRenderObjectWidget 多节点
      1. 2.2.1. Stack：层叠
      2. 2.2.2. Flex
      3. 2.2.3. Column
      4. 2.2.4. Row
  3. 3. ParentDataWidget：
    1. 3.1. Positioned：用于固定位置
    2. 3.2. Flexible
      1. 3.2.1. Expanded：用于展开大小
Total : 43
2020
2019
angular7 TypeScript ES6 css dart VsCode 面向对象 数据类型 flutter 布局 枚举 image_picker ionic3 极光推送 angular hexo blog ionic4 Express Node mongodb 企业微信 微信小程序 scroll-view scss chrome node 正则表达式 JavaScript vue pdf.js
angular7 TypeScript css TypeScript/ES6 dart flutter ionic3 angular ionic4 Express mongodb 企业微信 微信小程序 scss chrome node 正则表达式 JavaScript vue