DecoratedBox装饰盒组件

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

一、认识组件

1.DecoratedBox组件介绍

可容纳一个子组件，可将其进行装饰。核心属性为decoration,可设置边线、渐变、阴影、背景图等。

1
2
3
4
5
6
7
名称:       DecoratedBox  装饰盒
类型:       装饰型
重要性:     ☆☆☆☆
相关组件:   【Container】、【DecoratedBoxTransition】    
家族:       RenderObjectWidget
                |--- SingleChildRenderObjectWidget
                    |--- DecoratedBox
2. 组件属性一览
属性名 属性类型 默认值 备注
key Key null 组件键
decoration Decoration @required 装饰对象
position DecorationPosition DecorationPosition.background 装饰位置
child Widget null 子组件

Decoration对象

1
2
3
4
5
Decoration # 抽象类
    |--- BoxDecoration # 盒装饰
    |--- ShapeDecoration # 形状装饰
    |--- UnderlineTabIndicator # 底线装饰
    |--- FlutterLogoDecoration # FlutterLogo 装饰

DecorationPositiond对象

1
2
3
DecorationPositiond# 枚举对象
    |---DecorationPosition.background 背景装饰
    |---DecorationPosition.foreground 前景装饰

二、使用组件

1. 盒装饰: BoxDecoration

BoxDecoration的属性较多，也是最常用的装饰对象

属性名 属性类型 默认值 备注
color Color null 颜色
image DecorationImage null 装饰对象
border BoxBorder null 装饰边线
borderRadius BorderRadiusGeometry null 边角半径
boxShadow List null 阴影
gradient Gradient null 渐变
backgroundBlendMode BlendMode null 背景叠色模式
shape BoxShape BoxShape.rectangle 装饰形状

color,borderRadiu,boxShadows,boxShadow,gradient综合案例

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
class BoxDecorationDemo extends StatelessWidget {
  final rainbow = const <int>[
    0xffff0000,
    0xffFF7F00,
    0xffFFFF00,
    0xff00FF00,
    0xff00FFFF,
    0xff0000FF,
    0xff8B00FF
  ];

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      position: DecorationPosition.background,
      decoration: BoxDecoration(
          gradient: LinearGradient(
              stops: <double>[0.0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1.0],
              colors: rainbow.map((e) => Color(e)).toList()),
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20), bottomRight: Radius.circular(20)),
          boxShadow: [
            const BoxShadow(
                color: Colors.orangeAccent,
                offset: Offset(1, 1),
                blurRadius: 10,
                spreadRadius: 1),
          ]),
      child: Icon(
        Icons.android,
        size: 80,
        color: Colors.black.withAlpha(123),
      ),
    );
  }
}

image,shape综合案例:
通过image可以为任意组件指定一个图片背景，用法与Image组件类似
通过shape可以指定装饰区域是方形还是圆形。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class ShapeImageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(
          shape: BoxShape.circle,
          image: DecorationImage(
              fit: BoxFit.cover,
              image: AssetImage(
                'assets/images/wy_200x300.jpg',
              ))),
      child: SizedBox(
        height: 80,
        width: 80,
        child: Icon(Icons.ac_unit,color: Colors.white,size: 40,),
      ),
    );
  }
}

position和border综合案例:
注意点: border不能和borderRadius共同使用
这里添加边线，如果position是背景,那么装饰就看不见了.所以应该用foreground

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class BorderDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      position: DecorationPosition.foreground,
      decoration: BoxDecoration(
        border: Border(
            bottom: BorderSide(color: Colors.orange, width: 2),
            top: BorderSide(color: Colors.orange, width: 2)),
      ),
      child: SizedBox(
        height: 80,
        width: 100,
        child: Image.asset(
          'assets/images/wy_200x300.jpg',
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}
2. 形状装饰: ShapeDecoration

如果需要形状的高度DIY，可以使用ShapeDecoration作为装饰
ShapeBorder详细用法见: https://juejin.im/post/5e6196066fb9a07c8b5bbdf5

属性名 属性类型 默认值 备注
color Color null 颜色
image DecorationImage null 装饰对象
boxShadow List null 阴影
gradient Gradient null 渐变
shape ShapeBorder @required 装饰形状 

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
class ShapeDecorationDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: ShapeDecoration(
          image: DecorationImage(
              fit: BoxFit.cover,
              image: AssetImage(
                'assets/images/wy_200x300.jpg',
              )),
        shape: CircleBorder(
          side: BorderSide(width: 2.0, color: Colors.blue),
        )
      ),
      child: SizedBox(
        height: 100,
        width: 100,
        child: Icon(
          Icons.ac_unit,
          color: Colors.white,
          size: 40,
        ),
      ),
    );
  }
}
3. 底线装饰: UnderlineTabIndicator

UnderlineTabIndicator可以在子组件的底部添加装饰

属性名 属性类型 默认值 备注
borderSide Color BorderSide(width: 2.0, color: Colors.white) 边线
insets EdgeInsetsGeometry EdgeInsets.zero 间距 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class UnderlineTabIndicatorDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: UnderlineTabIndicator(
        insets: EdgeInsets.symmetric(horizontal: 5,vertical: -5),
          borderSide: BorderSide(color: Colors.orange, width: 2)),
      child: Icon(
          Icons.ac_unit,
          color: Colors.blue,
          size: 40,
        ),
    );
  }
}
4. FlutterLogo装饰: FlutterLogoDecoration

以FlutterLogo为背景的装饰，没有太大的实用价值。

属性名 属性类型 默认值 备注
lightColor Color Color(0xFF42A5F5) 上两杠颜色
darkColor Color Color(0xFF0D47A1) 下杠颜色
textColor Color Color(0xFF616161) 文字颜色
style FlutterLogoStyle FlutterLogoStyle.markOnly 展示模式
margin EdgeInsetsGeometry EdgeInsets.zero 外间距 
1
2
3
4
5
6
7
8
9
10
11
12
13
class FlutterLogoDecorationDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: FlutterLogoDecoration(
        darkColor: Colors.orange,
        lightColor: Colors.deepPurpleAccent,
        style: FlutterLogoStyle.stacked
      ),
      child:SizedBox(width: 100,height: 100,),
    );
  }
}

三、尾声

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

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