Padding内边距组件

发表于 | 分类于
字数统计: 633 | 阅读时长 ≈ 2

一、认识组件

1.Padding组件介绍

可容纳一个子组件，通过添加内边距，来限定子组件的占位。核心属性为EdgeInsetsGeometry类型的padding。

1
2
3
4
5
6
7
名称:       Padding  内边距
类型:       布局型
重要性:     ☆☆☆☆
相关组件:   【Container】、【SliverPadding】    
家族:       RenderObjectWidget
                |--- SingleChildRenderObjectWidget
                    |--- Padding
2. 组件属性一览
属性名 属性类型 默认值 备注
key Key null 组件键
padding EdgeInsetsGeometry @required 内边距
child Widget null 子组件

EdgeInsetsGeometry对象

1
2
3
EdgeInsetsGeometry # 抽象类
    |--- EdgeInsets # 内边距
    |--- EdgeInsetsDirectional # 方向型内边距
  • EdgeInsets: 使用left、top、right、bottom属性表示边距
  • EdgeInsetsDirectional:使用start、top、end、bottom属性表示边距
  • 两者功能上并没有什么本质区别，只是语义的不同。前者字少，较为常用。

二、使用组件

1. 全边距: EdgeInsets.all
属性名 属性类型 默认值 备注
value double null 内四边距

使用案例: 使子组件距父组件四周20

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
class PaddingAll extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey.withAlpha(22),
      width: 200,
      height: 150,
      child: Padding(
        padding: EdgeInsets.all(20),
        child: _buildChild(),
      ),
    );
  }

  Widget _buildChild() {
    return Container(
      alignment: Alignment.center,
      color: Colors.cyanAccent,
      width: 100,
      height: 100,
      child: Text("孩子"),
    );
  }
}
2. 指定边距: EdgeInsets.only
属性名 属性类型 默认值 备注
left double 0.0 左内边距
top double 0.0 上内边距
right double 0.0 右内边距
bottom double 0.0 下内边距

使用案例: 使子组件距父组件上和左侧内边距为10

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
class PaddingOnly extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey.withAlpha(22),
      width: 200,
      height: 150,
      child: Padding(
        padding: EdgeInsets.only(top:10,left: 10),
        child: _buildChild(),
      ),
    );
  }

  Widget _buildChild() {
    return Container(
      alignment: Alignment.center,
      color: Colors.cyanAccent,
      width: 100,
      height: 100,
      child: Text("孩子"),
    );
  }
}
3. 方向边距: EdgeInsets.symmetric
属性名 属性类型 默认值 备注
vertical double 0.0 水平边距
horizontal double 0.0 竖直边距

使用案例: 使子组件距父组件水平内边距为10，竖直内边距为30

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
class PaddingSymmetric extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey.withAlpha(22),
      width: 200,
      height: 150,
      child: Padding(
        padding: EdgeInsets.symmetric(vertical: 30,horizontal: 10),
        child: _buildChild(),
      ),
    );
  }

  Widget _buildChild() {
    return Container(
      alignment: Alignment.center,
      color: Colors.cyanAccent,
      width: 100,
      height: 100,
      child: Text("孩子"),
    );
  }
}
4.特殊说明

EdgeInsets中已重载运算符+、-、*、/、~、~/,%，可以直接四则运算，如:

1
2
3
4
5
6
EdgeInsets.symmetric(vertical: 30,horizontal: 10) + EdgeInsets.only(top:10,left: 10)
EdgeInsets.symmetric(vertical: 30,horizontal: 10) - EdgeInsets.only(top:10,left: 10)
EdgeInsets.symmetric(vertical: 30,horizontal: 10) * 6
EdgeInsets.symmetric(vertical: 30,horizontal: 10) / 6
EdgeInsets.symmetric(vertical: 30,horizontal: 10) ~/ 6
EdgeInsets.symmetric(vertical: 30,horizontal: 10) % 6

三、尾声

FlutterUnit开源项目: https://github.com/toly1994328/FlutterUnit
我的公众号:编程之王
联系我–邮箱:1981462002@qq.com –微信:zdl1994328
@张风捷特烈 2020.04.29
~ END ~

张风捷特烈 wechat
-------------本文结束感谢您的阅读 @张风捷特烈-------------
0%