Flutter之Decoration

2022-02-16 19:41:54

Flutter之Decoration

2、Decoration介绍

Flutter的Decoration可以设置：背景色背景图边框圆角阴影渐变色的等属性，有点像android里面的shape，Decoration 是基类，它的子类有下面这些

BoxDecoration:

实现边框、圆角、阴影、形状、渐变、背景图像

ShapeDecoration:

实现四边分别指定颜色和宽度、底部线、矩形边色、圆形边色、体育场（竖向椭圆）、角形（八边角）边色

FlutterLogoDecoration:

Flutter图片

UnderlineTabindicator:

下划线

这里先介绍常用的 BoxDecoration，构造方法

const BoxDecoration({
    this.color,//背景色
    this.image,//图片
    this.border,//描边
    this.borderRadius,//圆角大小
    this.boxShadow,//阴影
    this.gradient,//渐变色
    this.backgroundBlendMode,//图像混合模式
    this.shape = BoxShape.rectangle,//形状,BoxShape.circle和borderRadius不能同时使用
})

boxShadow 阴影

color - 阴影颜色

offset - 阴影相偏移量

blurRadius - 高斯模糊数值

spreadRadius - 阴影膨胀量，这个值我是真不知有啥用，没场景啊，一般不写这个值

gradient渐变

支持2种渐变：LinearGradient线性渐变和 RadialGradient扫描渐变

LinearGradient ：

begin - 渐变开始的位置

end - 渐变结束的位置

colors - 渐变颜色,是数组

stops - 值列表，装有0.0到1.0的数值

tileMode - 平铺模式

shape形状

rectangle是矩形，BoxShape.circle是圆形，BoxShape.circle和borderRadius不能一起使用

3、代码测试

效果1测试代码

  @override
  Widget build(BuildContext context) {
      return MaterialApp(
          title: 'open url',
          home: Scaffold(
            appBar: AppBar(
              // Here we take the value from the MyHomePage object that was created by
              // the App.build method, and use it to set our appbar title.
              title: Text('hello flutter'),
            ),
            body: Center(
              child: DecoratedBox(
//              padding: EdgeInsets.all(16),
//            padding: EdgeInsets.fromLTRB(10, 20, 30, 40),
//            padding: EdgeInsets.only(left: 10, right: 30),
                decoration: BoxDecoration(
                  // 背景色
                    color: Colors.lightBlueAccent,
                    // 边框，
                    border: Border.all(color: Colors.yellowAccent, style: BorderStyle.solid, width: 5),
                    // 背景图
                    image: new DecorationImage(
                        image: new NetworkImage(
                            'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1484037605,2864708693&fm=11&gp=0.jpg'),
                        fit: BoxFit.cover
                    ),
                    borderRadius: BorderRadius.all(Radius.circular(30)),
                    boxShadow:[
                      BoxShadow(
                        color: Colors.redAccent,
                        offset: Offset(20, 20),
                        blurRadius: 10,
                      ),
                    ]
                ),
                child: Container(
                  height: 200,
                  width: 200,
                ),
              ),
            ),
          ),
      );
  }
}

效果2测试代码

  @override
  Widget build(BuildContext context) {
      return MaterialApp(
          title: 'open url',
          home: Scaffold(
            appBar: AppBar(
              // Here we take the value from the MyHomePage object that was created by
              // the App.build method, and use it to set our appbar title.
              title: Text('hello flutter'),
            ),
            body: Center(
              child: DecoratedBox(
//              padding: EdgeInsets.all(16),
//            padding: EdgeInsets.fromLTRB(10, 20, 30, 40),
//            padding: EdgeInsets.only(left: 10, right: 30),
                decoration: BoxDecoration(
                  // 背景色
                    gradient: LinearGradient(colors:[Colors.blue, Colors.green]), //背景渐变
                    color: Colors.lightBlueAccent,
                    // 背景图
                    borderRadius: BorderRadius.all(Radius.circular(3)),
                    boxShadow: [ //阴影
                      BoxShadow(
                          color:Colors.black54,
                          offset: Offset(2.0,2.0),
                          blurRadius: 4.0
                      )
                    ]
                ),
                child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
                    child: Text("chenyu", style: TextStyle(color: Colors.white),
                  ),
                )
              ),
            ),
          ),
      );
  }
}

效果3测试代码

  @override
  Widget build(BuildContext context) {
      return MaterialApp(
          title: 'open url',
          home: Scaffold(
            appBar: AppBar(
              // Here we take the value from the MyHomePage object that was created by
              // the App.build method, and use it to set our appbar title.
              title: Text('hello flutter'),
            ),
            body: Center(
              child: DecoratedBox(
//              padding: EdgeInsets.all(16),
//            padding: EdgeInsets.fromLTRB(10, 20, 30, 40),
//            padding: EdgeInsets.only(left: 10, right: 30),
                decoration: BoxDecoration(
                  // 背景色
                    border: Border.all(
                        color: Colors.yellowAccent, style: BorderStyle.solid, width: 5),
                    // 背景图
                    image: new DecorationImage(
                        image: new NetworkImage(
                            'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1484037605,2864708693&fm=11&gp=0.jpg'),
                        fit: BoxFit.cover
                    ),
                    shape: BoxShape.circle,
                ),
                child: Container(
                  width: 200,
                  height: 200,
                ),
              ),
            ),
          ),
      );
  }
}

码农公寓