淺談Flutter 中漸變的高級用法(3種)
Flutter 中漸變有三種:
- LinearGradient:線性漸變
- RadialGradient:放射狀漸變
- SweepGradient:扇形漸變
看下原圖,下面的漸變都是在此圖基礎(chǔ)上完成。
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
表示漸變的方向,上面設(shè)置的方向是從頂部中間到底部中間。
color
表示漸變的顏色。
設(shè)置各個漸變色的結(jié)束點:
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
的個數(shù)要對應(yīng) color
。
由于中間設(shè)置的漸變色為透明,所以中間是原圖。
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, ), )
實現(xiàn)中間顯示圓形原圖,其他地方有灰色蒙板:
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
表示開始和結(jié)束角度。
繪制漸變圓環(huán):
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( '老孟,一枚有態(tài)度的程序員', style: TextStyle(fontSize: 24), ), ), )
到此這篇關(guān)于淺談Flutter 中漸變的高級用法(3種)的文章就介紹到這了,更多相關(guān)Flutter 漸變內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解Android App中ViewPager使用PagerAdapter的方法
這篇文章主要介紹了詳解Android App中ViewPager使用PagerAdapter的方法,同時附帶了一個ViewPager的PagerAdapter不能更新數(shù)據(jù)的問題解決方法,需要的朋友可以參考下2016-03-03Android源碼導(dǎo)入AndroidStudio或IntelliJ?IDEA的方法
這篇文章主要介紹了Android源碼導(dǎo)入AndroidStudio或IntelliJ?IDEA的方法,用idegen來生成針對AndroidStudio或IntelliJ?IDEA的Android系統(tǒng)源代碼工程配置文件,需要的朋友可以參考下2022-08-08Android Bluetooth藍(lán)牙技術(shù)初體驗
這篇文章主要介紹了Android Bluetooth藍(lán)牙技術(shù)初體驗的相關(guān)資料,需要的朋友可以參考下2016-02-02Android本地驗證碼的簡易實現(xiàn)方法(防止暴力登錄)
驗證馬真是無處不在啊,主要作用是防止惡意暴力破解登錄,這篇文章主要介紹了Android本地驗證碼的簡易實現(xiàn)方法(防止暴力登錄),需要的朋友可以參考下2017-04-04Android中AlertDialog 點擊按鈕后不關(guān)閉對話框的功能
本篇文章主要介紹了Android中AlertDialog 點擊按鈕后不關(guān)閉對話框的功能,非常具有實用價值,需要的朋友可以參考下2017-04-04eclipse導(dǎo)入appcompat項目報錯解決辦法
這篇文章主要介紹了eclipse導(dǎo)入appcompat項目報錯解決辦法的相關(guān)資料,需要的朋友可以參考下2017-04-04Android仿今日頭條多個fragment懶加載的實現(xiàn)
我們在做應(yīng)用開發(fā)的時候,一個Activity里面可能會以viewpager(或其他容器)與多個Fragment來組合使用,下面這篇文章主要給大家介紹了關(guān)于利用Android仿今日頭條多個fragment懶加載的相關(guān)資料,需要的朋友可以參考下。2017-12-12