flutter InkWell實(shí)現(xiàn)水波紋點(diǎn)擊效果
在flutter 開發(fā)中用InkWell或者GestureDetector將某個(gè)組件包起來,已添加點(diǎn)擊事件。
GestureDetector 使用點(diǎn)擊無水波紋出現(xiàn),InkWell可以實(shí)現(xiàn)水波紋效果。
正常情況下使用 :
InkWell( //單擊事件響應(yīng) onTap: () { }, child: Container( alignment: Alignment(0, 0), height: 28, width: 120, child: Text("InkWell單擊事件"), ), ),
如果在InkWell的上下都出現(xiàn)的顏色的設(shè)置,如上中的Container中如果加入了color:Colors.white,或者是Container中的其他widget設(shè)置了coloro屬性,這時(shí)候InkWell的水波紋效果會(huì)無效。
1 widget 設(shè)置水波紋點(diǎn)擊效果 并設(shè)置widget背景
new Center( child: new Material( // 設(shè)置背景顏色 默認(rèn)矩形 color: Colors.purple, child: new InkWell( //點(diǎn)擊事件回調(diào) onTap: () {}, //不要在這里設(shè)置背景色,for則會(huì)遮擋水波紋效果,如果設(shè)置的話盡量設(shè)置Material下面的color來實(shí)現(xiàn)背景色 child: new Container( width: 300.0, height: 50.0, //設(shè)置child 居中 alignment: Alignment(0, 0), child: Text("登錄",style: TextStyle(color: Colors.white,fontSize: 16.0),), ), ), ), ),
或者 可以使用 Ink來設(shè)置,與Material設(shè)置color 的區(qū)別是,Ink可設(shè)置背景的形狀樣式。
new Center( child: new Material( //INK可以實(shí)現(xiàn)裝飾容器,實(shí)現(xiàn)矩形 設(shè)置背景色 child: new Ink( //設(shè)置背景 默認(rèn)矩形 color: Colors.purple, child: new InkWell( //點(diǎn)擊事件回調(diào) onTap: () {}, child: new Container( width: 300.0, height: 50.0, //設(shè)置child 居中 alignment: Alignment(0, 0), child: Text("登錄",style: TextStyle(color: Colors.white,fontSize: 16.0),), ), ), ), ), ),
2 圓角widget 設(shè)置水波紋點(diǎn)擊效果
new Center( child: new Material( //INK可以實(shí)現(xiàn)裝飾容器 child: new Ink( //用ink圓角矩形 // color: Colors.red, decoration: new BoxDecoration( //不能同時(shí)”使用Ink的變量color屬性以及decoration屬性,兩個(gè)只能存在一個(gè) color: Colors.purple, //設(shè)置圓角 borderRadius: new BorderRadius.all(new Radius.circular(25.0)), ), child: new InkWell( //圓角設(shè)置,給水波紋也設(shè)置同樣的圓角 //如果這里不設(shè)置就會(huì)出現(xiàn)矩形的水波紋效果 borderRadius: new BorderRadius.circular(25.0), //設(shè)置點(diǎn)擊事件回調(diào) onTap: () { }, child: new Container( width: 300.0, height: 50.0, //設(shè)置child 居中 alignment: Alignment(0, 0), child: Text("登錄",style: TextStyle(color: Colors.white,fontSize: 16.0),), ), ), ), ), ),
如果 InkWell 與Ink 不同時(shí)設(shè)置相同的圓角,例如 lnk 設(shè)置的圓角為20,而Ink沒有設(shè)置,就會(huì)出現(xiàn) 矩形的水波紋點(diǎn)擊效果
3 圓角widget 設(shè)置自定義水波紋顏色點(diǎn)擊效果
new Center( child: new Material( child: new Ink( //設(shè)置背景 decoration: new BoxDecoration( color: Colors.purple, borderRadius: new BorderRadius.all(new Radius.circular(25.0)), ), child: new InkResponse( borderRadius: new BorderRadius.all(new Radius.circular(25.0)), //點(diǎn)擊或者toch控件高亮?xí)r顯示的控件在控件上層,水波紋下層 //highlightColor: Colors.yellowAccent, //點(diǎn)擊或者toch控件高亮的shape形狀 highlightShape: BoxShape.rectangle, //.InkResponse內(nèi)部的radius這個(gè)需要注意的是,我們需要半徑大于控件的寬,如果radius過小,顯示的水波紋就是一個(gè)很小的圓, //水波紋的半徑 radius: 300.0, //水波紋的顏色 splashColor: Colors.black, //true表示要剪裁水波紋響應(yīng)的界面 false不剪裁 如果控件是圓角不剪裁的話水波紋是矩形 containedInkWell: true, //點(diǎn)擊事件 onTap: () { print("click"); }, child: new Container( //不能在InkResponse的child容器內(nèi)部設(shè)置裝飾器顏色,否則會(huì)遮蓋住水波紋顏色的,containedInkWell設(shè)置為false就能看到是否是遮蓋了。 width: 300.0, height: 50.0, //設(shè)置child 居中 alignment: Alignment(0, 0), child: Text("登錄",style: TextStyle(color: Colors.white,fontSize: 16.0),), ), ), ), ), ),
4 圓角widget 設(shè)置高亮顏色點(diǎn)擊效果
new Center( child: new Material( child: new Ink( //設(shè)置背景 decoration: new BoxDecoration( color: Colors.purple, borderRadius: new BorderRadius.all(new Radius.circular(30.0)), ), child: new InkResponse( borderRadius: new BorderRadius.all(new Radius.circular(30.0)), //點(diǎn)擊或者toch控件高亮?xí)r顯示的控件在控件上層,水波紋下層 highlightColor: Colors.purple[800], //點(diǎn)擊或者toch控件高亮的shape形狀 highlightShape: BoxShape.rectangle, //.InkResponse內(nèi)部的radius這個(gè)需要注意的是,我們需要半徑大于控件的寬,如果radius過小,顯示的水波紋就是一個(gè)很小的圓, //水波紋的半徑 radius: 0.0, //水波紋的顏色 設(shè)置了highlightColor屬性后 splashColor將不起效果 splashColor: Colors.red, //true表示要剪裁水波紋響應(yīng)的界面 false不剪裁 如果控件是圓角不剪裁的話水波紋是矩形 containedInkWell: true, onTap: () { print( 'click'); }, child: new Container( //不能在InkResponse的child容器內(nèi)部設(shè)置裝飾器顏色,否則會(huì)遮蓋住水波紋顏色的,containedInkWell設(shè)置為false就能看到是否是遮蓋了。 width: 300.0, height: 50.0, //設(shè)置child 居中 alignment: Alignment(0, 0), child: Text("登錄",style: TextStyle(color: Colors.white,fontSize: 16.0),), ), ), ), ), ),
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 使用Flutter開發(fā)的抖音國際版實(shí)例代碼詳解
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(一)
- Flutter 超實(shí)用簡單菜單彈出框 PopupMenuButton功能
- 詳解Flutter WebView與JS互相調(diào)用簡易指南
- Flutter持久化存儲(chǔ)之?dāng)?shù)據(jù)庫存儲(chǔ)(sqflite)詳解
- Flutter中如何加載并預(yù)覽本地的html文件的方法
- flutter日期選擇器 flutter時(shí)間選擇器
- Flutter啟動(dòng)頁(閃屏頁)的具體實(shí)現(xiàn)及原理詳析
- 詳解flutter之網(wǎng)絡(luò)請(qǐng)求dio,請(qǐng)求,攔截器簡單示例
- Flutter實(shí)現(xiàn)抖音點(diǎn)贊效果
相關(guān)文章
Android 高德地圖之poi搜索功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了android 高德地圖之poi搜索功能的實(shí)現(xiàn)代碼,在實(shí)現(xiàn)此功能時(shí)遇到很多問題,在文章都給大家提到,需要的朋友可以參考下2017-08-08詳解如何使用Android Studio開發(fā)Gradle插件
這篇文章主要介紹了詳解如何使用Android Studio開發(fā)Gradle插件,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10Android使用動(dòng)畫設(shè)置ProgressBar進(jìn)度的方法
這篇文章主要為大家詳細(xì)介紹了Android使用動(dòng)畫設(shè)置ProgressBar進(jìn)度的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01Android中Android Virtual Device(AVD)使用教程
這篇文章主要介紹了Android中Android Virtual Device(AVD)使用教程,本文還對(duì)使用過程中發(fā)生的一些錯(cuò)誤給出了處理方法,需要的朋友可以參考下2015-01-01Android中ListView的幾種常見的優(yōu)化方法總結(jié)
Android中的ListView應(yīng)該算是布局中幾種最常用的組件之一,本篇文章主要做了三種優(yōu)化總結(jié),有興趣的可以了解一下。2017-02-02Android編程實(shí)現(xiàn)文件瀏覽功能的方法【類似于FileDialog的功能】
這篇文章主要介紹了Android編程實(shí)現(xiàn)文件瀏覽功能的方法,可實(shí)現(xiàn)類似于FileDialog的功能,涉及Android針對(duì)文件與目錄操作的相關(guān)技巧,需要的朋友可以參考下2016-11-11android使用flutter的ListView實(shí)現(xiàn)滾動(dòng)列表的示例代碼
現(xiàn)如今打開一個(gè) App,比如頭條、微博,都會(huì)有長列表,那么android使用flutter的ListView滾動(dòng)列表如何實(shí)現(xiàn),本文就來詳細(xì)的介紹一下,感興趣的同學(xué)可以來了解一下2018-12-12