内容简介:Flutter 中渐变有三种:看下原图,下面的渐变都是在此图基础上完成。
Flutter 中渐变有三种:
- LinearGradient:线性渐变
- RadialGradient:放射状渐变
- SweepGradient:扇形渐变
看下原图,下面的渐变都是在此图基础上完成。
LinearGradient
给一张图片添加从上到下的线性渐变:
ShaderMask( shaderCallback: (Rect bounds) { return LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.red,Colors.blue,Colors.green], ).createShader(bounds); }, blendMode: BlendMode.color, child: Image.asset( 'assets/images/b.jpg', fit: BoxFit.cover, ), )
begin
和 end
表示渐变的方向,上面设置的方向是从顶部中间到底部中间。
color
表示渐变的颜色。
设置各个渐变色的结束点:
Color color = Colors.orange; return ShaderMask( shaderCallback: (Rect bounds) { return LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [color,color,Colors.transparent,Colors.transparent,color,color], stops: [0,.4,.41,.6,.61,1] ).createShader(bounds); }, blendMode: BlendMode.color, child: Image.asset( 'assets/images/b.jpg', fit: BoxFit.cover, ), );
stops
的个数要对应 color
。
由于中间设置的渐变色为透明,所以中间是原图。
RadialGradient
RadialGradient 是放射状渐变。
ShaderMask( shaderCallback: (Rect bounds) { return RadialGradient( radius: .5, colors: <Color>[Colors.red, Colors.blue], ).createShader(bounds); }, blendMode: BlendMode.color, child: Image.asset( 'assets/images/b.jpg', fit: BoxFit.cover, ), )
实现中间显示圆形原图,其他地方有灰色蒙板:
ShaderMask( shaderCallback: (Rect bounds) { return RadialGradient( radius: .6, colors: <Color>[ Colors.transparent, Colors.transparent, Colors.grey.withOpacity(.7), Colors.grey.withOpacity(.7) ], stops: [0, .5, .5, 1], ).createShader(bounds); }, blendMode: BlendMode.srcATop, child: Image.asset( 'assets/images/b.jpg', fit: BoxFit.cover, ), )
SweepGradient
SweepGradient 扇形渐变效果。
ShaderMask( shaderCallback: (Rect bounds) { return SweepGradient( colors: <Color>[ Colors.red, Colors.blue ], ).createShader(bounds); }, child: Image.asset( 'assets/images/b.jpg', fit: BoxFit.cover, ), )
startAngle
和 endAngle
表示开始和结束角度。
绘制渐变圆环:
Container( width: 200, height: 200, child: CustomPaint( painter: _CircleProgressPaint(.5), ), ) class _CircleProgressPaint extends CustomPainter { final double progress; _CircleProgressPaint(this.progress); Paint _paint = Paint() ..style = PaintingStyle.stroke ..strokeWidth = 20; @override void paint(Canvas canvas, Size size) { _paint.shader = ui.Gradient.sweep( Offset(size.width / 2, size.height / 2), [Colors.red, Colors.yellow]); canvas.drawArc( Rect.fromLTWH(0, 0, size.width, size.height), 0, pi*2, false, _paint); } @override bool shouldRepaint(CustomPainter oldDelegate) { return true; } }
除了图片,可以给任何组件加入渐变效果,比如文字:
ShaderMask( shaderCallback: (Rect bounds) { return LinearGradient( colors: <Color>[Colors.blue, Colors.red], tileMode: TileMode.mirror, ).createShader(bounds); }, blendMode: BlendMode.srcATop, child: Center( child: Text( '老孟,一枚有态度的程序员', style: TextStyle(fontSize: 24), ), ), )
交流
老孟Flutter博客地址(330个控件用法): http://laomengit.com
欢迎加入Flutter交流群(微信:laomengit)、关注公众号【老孟Flutter】:
以上所述就是小编给大家介绍的《Flutter 中渐变的高级用法》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- iOS WHGradientHelper(线性、径向渐变;渐变动画;Lable字体渐变及动画)
- 沉浸式渐变图片轮播器
- CSS3 渐变(Gradients)
- java – 不同dpi的径向渐变
- 简易的iOS导航栏颜色渐变方案
- 【译】React Native中的动画渐变
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。