android ui flutter,Android Flutter：UI中你必须了解的Decoration！

前言

Decoration是一个背景装饰对象，相当于Android中的shape.xml

今天，carson将全面介绍Decoration的使用，包括其作用、定义 & 使用，希望你们会喜欢。

示意图

目录

1. 定义

一个背景装饰对象，相当于Android中的shape.xml

2. 作用

定制各种各样的背景(边框、圆角、阴影、形状、渐变、背景图像)

3. 类型

Flutter Decoration的类型主要有4种：

类型1：BoxDecoration

a. 特点

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

b. 属性说明

const BoxDecoration({

this.color, // 底色

this.image, // 图片

this.border, // 边色

this.borderRadius, // 圆角度

this.boxShadow, // 阴影

this.gradient, // 渐变

this.backgroundBlendMode, // 混合Mode

this.shape = BoxShape.rectangle, // 形状

})

c. 使用示例

decoration: new BoxDecoration(

border: new Border.all(color: Color(0xFFFF0000), width: 0.5), // 边色与边宽度

color: Color(0xFF9E9E9E), // 底色

borderRadius: new BorderRadius.circular((20.0)), // 圆角度

shape: BoxShape.rectangle, // 默认值是矩形

// shape: BoxShape.circle, // 圆形，使用圆形时不可以使用borderRadius

// 阴影：此处采用两层阴影说明

boxShadow: [BoxShadow(color: Color(0x99FFFF00),

offset: Offset(5.0, 5.0), // 阴影位置由offset决定

blurRadius: 10.0, // 阴影模糊层度由blurRadius大小决定(大就更透明更扩散)

spreadRadius: 2.0), // 阴影模糊大小由spreadRadius决定

BoxShadow(color: Color(0x9900FF00), offset: Offset(1.0, 1.0)), BoxShadow(color: Color(0xFF0000FF))],

// 渐变

// 类型1：环形

gradient: RadialGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)],radius: 1, tileMode: TileMode.mirror)

// 类型2：扫描式

// gradient: SweepGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], startAngle: 0.0, endAngle: 1*3.14)

// 类型3：线性

// gradient: LinearGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], begin: FractionalOffset(1, 0), end: FractionalOffset(0, 1))

// 背景图像

image: new DecorationImage(

image: new AssetImage('graphics/background.png'), // 加载本地图片，还有其他加载方式，如网络、文件等

centerSlice: new Rect.fromLTRB(10.0, 20.0, 30.0, 40.0),// 设置图片大小

fit: BoxFit.fill // 设置填充方式

),

),

类型2：ShapeDecoration

a. 特点

实现四个边，分别指定颜色、宽度、底部线、矩形边色、圆形边色等

b. 属性说明

const ShapeDecoration({

this.color, // 底色

this.image, // 图片

this.gradient, // 渐变

this.shadows, // 阴影

@required this.shape, // 形状

})

此处的属性除了shape，其余与BoxDecoration相同，所以此处主要讲解shape属性

c. 具体使用

decoration: new ShapeDecoration(

// 统一四边颜色和宽度

shape: Border.all(color: Color(0xFF00FFFF),style: BorderStyle.solid,width: 2)

// 四个边分别指定颜色 & 宽度，当只给bottom时与UnderlineInputBorder一致效果

// shape: Border(top: b, bottom: b, right: b, left: b)

// 设置矩形边色

// shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10)), side: BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))

// 设置圆形边色

// shape: CircleBorder(side: BorderSide(color: Color(0xFFFFFF00), style: BorderStyle.solid, width: 2))

// 设置竖向椭圆边色(类似体育场)

// shape: StadiumBorder(side: BorderSide(width: 2, style: BorderStyle.solid, color: Color(0xFF00FFFF))

// 设置角形(八边角)边色

// shape: BeveledRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10)), side: BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))

),

类型3：UnderlineTabindicator

a. 特点

下划线，可控制下划高底 & 左右边距

b. 属性说明

const UnderlineTabIndicator({

this.borderSide = const BorderSide(width: 2.0, color: Colors.white), // 控制线的长度 & 颜色

this.insets = EdgeInsets.zero, // 控制下划高底，左右边距

})

c. 具体使用

decoration: new UnderlineTabIndicator(

borderSide: BorderSide(width: 2.0, color: Colors.white),

insets: EdgeInsets.fromLTRB(0,0,0,10)

),

类型4：FlutterLogoDecoration

a. 特点

实现Flutter logo 图片

b. 属性构造

const FlutterLogoDecoration({

this.lightColor = const Color(0xFF42A5F5), // Colors.blue[400]

this.darkColor = const Color(0xFF0D47A1), // Colors.blue[900]

this.textColor = const Color(0xFF616161),

this.style = FlutterLogoStyle.markOnly,

this.margin = EdgeInsets.zero,

})

在日常开发中，基本不会用到，所以此处不作过多讲解。

4. 总结

本文全面介绍了Flutter Decoration的使用

接下来推出的文章，我将继续讲解Flutter的相关知识，包括使用语法、实战等，感兴趣的读者可以继续关注我的博客哦：Carson_Ho的Android博客

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

不定期分享关于安卓开发的干货，追求短、平、快，但却不缺深度。