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

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

FlutterLogoDecoration:实现Flutter图片

UnderlineTabindicator:下划线

一个背景装饰对象,相当于Android中的shape.xml,定制各种各样的背景(边框、圆角、阴影、形状、渐变、背景图像)。

3 BoxDecoration例子:

构造方法:

  const BoxDecoration({
    this.color, // 底色
    this.image, // 图片
    this.border, 边色
    this.borderRadius, // 圆角度
    this.boxShadow, // 阴影
    this.gradient, // 渐变
    this.backgroundBlendMode, // 混合Mode
    this.shape = BoxShape.rectangle,  // 形状

3.1 边框+圆角:

decoration: new BoxDecoration(
  border: new Border.all(color: Color(0xFFFF0000), width: 0.5), // 边色与边宽度
  color: Color(0xFF9E9E9E), // 底色
  //        borderRadius: new BorderRadius.circular((20.0)), // 圆角度
  borderRadius: new BorderRadius.vertical(top: Radius.elliptical(20, 50)), // 也可控件一边圆角大小

3.2 阴影:

decoration: new BoxDecoration(
    border: new Border.all(color: Color(0xFFFF0000), width: 0.5), // 边色与边宽度
// 生成俩层阴影,一层绿,一层黄, 阴影位置由offset决定,阴影模糊层度由blurRadius大小决定(大就更透明更扩散),阴影模糊大小由spreadRadius决定
    boxShadow: [BoxShadow(color: Color(0x99FFFF00), offset: Offset(5.0, 5.0),    blurRadius: 10.0, spreadRadius: 2.0), BoxShadow(color: Color(0x9900FF00), offset: Offset(1.0, 1.0)), BoxShadow(color: Color(0xFF0000FF))],

3.3 形状(圆形与矩形):

decoration: new BoxDecoration(
  border: new Border.all(color: Color(0xFFFFFF00), width: 0.5), // 边色与边宽度
  color: Color(0xFF9E9E9E), // 底色
  //        shape: BoxShape.circle, // 圆形,使用圆形时不可以使用borderRadius
  shape: BoxShape.rectangle, // 默认值也是矩形
  borderRadius: new BorderRadius.circular((20.0)), // 圆角度

3.4 渐变(环形、扫描式、线性):

decoration: new BoxDecoration(
  border: new Border.all(color: Color(0xFFFFFF00), width: 0.5), // 边色与边宽度
// 环形渲染
  gradient: RadialGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)],radius: 1, tileMode: TileMode.mirror)
//扫描式渐变
//        gradient: SweepGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], startAngle: 0.0, endAngle: 1*3.14)
// 线性渐变
//        gradient: LinearGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], begin: FractionalOffset(1, 0), end: FractionalOffset(0, 1))

3.4 背景图像:

decoration: new BoxDecoration(
  border: new Border.all(color: Color(0xFFFFFF00), width: 0.5), // 边色与边宽度
  image: new DecorationImage(
  image: new NetworkImage('https://avatar.csdn.net/8/9/A/3_chenlove1.jpg'), // 网络图片
  // image: new AssetImage('graphics/background.png'), 本地图片
  fit: BoxFit.fill // 填满
  //          centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),// 固定大小

4 ShapeDecoration例子:

构造方法:

const ShapeDecoration({
  this.color,
  this.image,
  this.gradient,
  this.shadows,
  @required this.shape,

除了shape,其他与BoxDecoration一致,shape研究:    

decoration: new ShapeDecoration(
  color: Color(0xFFFF00FF), // 底色
  // 统一四边颜色和宽度
  shape: Border.all(color: Color(0xFF00FFFF),style: BorderStyle.solid,width: 2)
// 四个边分别指定颜色和宽度, 当只给bottom时与UnderlineInputBorder一致效果
//          shape: Border(top: b, bottom: b, right: b, left: b)
// 底部线
//          shape: UnderlineInputBorder( borderSide:BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))
// 矩形边色
//        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))

5 FlutterLogoDecoration例子:

构造方法:

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,

这个就不解析了,Flutter的logo,开发没啥用!

6 UnderlineTabindicator例子:

构造方法:

const UnderlineTabIndicator({
  this.borderSide = const BorderSide(width: 2.0, color: Colors.white),
  this.insets = EdgeInsets.zero,

这个比较简单就是加下划线,可以设置Insets值(控制下划高底,左右边距)

decoration: new UnderlineTabIndicator(
  borderSide: BorderSide(width: 2.0, color: Colors.white),
  insets: EdgeInsets.fromLTRB(0,0,0,10)
                    1 继续关系:BoxDecoration:实现边框、圆角、阴影、形状、渐变、背景图像ShapeDecoration:实现四个边分别指定颜色和宽度、底部线、矩形边色、圆形边色、体育场(竖向椭圆)、 角形(八边角)边色FlutterLogoDecoration:实现Flutter图片UnderlineTabindicator:下划线2 介绍一个背景装饰对象,相当于Andro...
				
本文实例为大家分享了flutter Container容器实现圆角边框的具体代码,供大家参考,具体内容如下 在这里使用 Container 容器来实现圆角矩形边框效果 1 圆角矩形边框 Container( margin: EdgeInsets.only(left: 40, top: 40), //设置 child 居中 alignment: Alignment(0, 0), height: 50, width: 300, //边框设置 decoration: new BoxDecoration( //背景 color: Colors.white, //设置四周圆角 角度
Flutter 中 可以给Container设置decoration来设置背景边框等等效果,非常方便。 Container( decoration: TestDecoration(), 但是Flutter自带的decoration比较少,只能支持常规样式,当我们需要设置特殊背景时,就满足不了我们的需要了。 这时候,就有必要自定义一个我们定制化的decoration。 搜了一下flutter sdk代码,发现flutter里有一个定制化的FlutterLogo
我在做Flutter的项目中使用DecorationImage加载本地图片,但是发现怎么加载都是 Unable to load asset: xxx.jpeg(图片名称) 我仔细检查了我的pubspec.yaml文件,因为我以前使用过本地的图片资源,但是这次怎么也不成功,所以推测配置应该说没啥问题的。 assets: - assets/images/flower.jpg
文章目录DecorationBoxDecorationShapeDecorationFlutterLogoDecorationUnderlineTabIndicator源码引用 Decoration Decoration是一个抽象类,用于背景装饰的描述。Decoration有4个具体的实现类,分别是: BoxDecoration ShapeDecoration FlutterLogoDecorat...
网上很多文章要么都是在图片添加水印,要么给的例子都是全屏的水印,无法满足我先有的需求。 怎么办呢,自己怼一个好了。 思路:在页面里添加一个widget作为底层背景,在这个背景绘制水印。 绘制:通过CustomPaint、CustomPainter 、Canvas 、 Paint实现绘制。
height: 50, margin: EdgeInsets.only(left: 10,top: 10,right: 10,bottom: 10), decoration: BoxDecoration( border: new Border.all( color: Colors.grey, //边框颜色 Flutter中移除一个控件非常容易,只需要在重新创建中移除即可,如果想要移除控件同时它的位置依然保留,类似于Android中View的invisible,比如Row中有3个颜色块,分别为1、2、3,代码如下: mainAxi...
今天对flutter的容器布局又有了更深刻的了解,分别做了两个小案例,第一个是梯形布局,就像一个梯子一样。另外一个是关于阴影部分的。首先要明白flutter容器中的宽约束和紧约束。前者是指一个区间范围内,后者是指大和小必须要一样。后者会跟随父容器的大小改变,并且自己不能做控制。关于布局里面又一句非常核心的话:向下传约束,向上传尺寸 这是效果图 梯形代码: import 'package:flutter/cupertino.dart'; import 'package:flutter/materi..
要设置 Flutter 渐变背景色,您可以使用 `Container` 组件中的 `decoration` 属性,设置其为 `BoxDecoration` 类型,并使用 `LinearGradient` 类型来定义渐变颜色。 以下是一个示例代码片段,设置从红色到蓝色的渐变背景色: ```dart Container( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.red, Colors.blue], child: YourChildWidget(), 在上面的示例中,我们使用 `LinearGradient` 类型来定义渐变颜色,通过 `begin` 和 `end` 属性指定渐变的起点和终点。`colors` 属性指定渐变色值的数组,这里我们设置为红色和蓝色。 您可以根据需要调整参数来实现不同的渐变效果。