flutter InkWell實現水波紋點擊效果
在flutter 開發(fā)中用InkWell或者GestureDetector將某個組件包起來,已添加點擊事件。
GestureDetector 使用點擊無水波紋出現,InkWell可以實現水波紋效果。
正常情況下使用 :
InkWell( //單擊事件響應 onTap: () { }, child: Container( alignment: Alignment(0, 0), height: 28, width: 120, child: Text("InkWell單擊事件"), ), ),
如果在InkWell的上下都出現的顏色的設置,如上中的Container中如果加入了color:Colors.white,或者是Container中的其他widget設置了coloro屬性,這時候InkWell的水波紋效果會無效。
1 widget 設置水波紋點擊效果 并設置widget背景
new Center( child: new Material( // 設置背景顏色 默認矩形 color: Colors.purple, child: new InkWell( //點擊事件回調 onTap: () {}, //不要在這里設置背景色,for則會遮擋水波紋效果,如果設置的話盡量設置Material下面的color來實現背景色 child: new Container( width: 300.0, height: 50.0, //設置child 居中 alignment: Alignment(0, 0), child: Text("登錄",style: TextStyle(color: Colors.white,fontSize: 16.0),), ), ), ), ),
或者 可以使用 Ink來設置,與Material設置color 的區(qū)別是,Ink可設置背景的形狀樣式。
new Center( child: new Material( //INK可以實現裝飾容器,實現矩形 設置背景色 child: new Ink( //設置背景 默認矩形 color: Colors.purple, child: new InkWell( //點擊事件回調 onTap: () {}, child: new Container( width: 300.0, height: 50.0, //設置child 居中 alignment: Alignment(0, 0), child: Text("登錄",style: TextStyle(color: Colors.white,fontSize: 16.0),), ), ), ), ), ),
2 圓角widget 設置水波紋點擊效果
new Center( child: new Material( //INK可以實現裝飾容器 child: new Ink( //用ink圓角矩形 // color: Colors.red, decoration: new BoxDecoration( //不能同時”使用Ink的變量color屬性以及decoration屬性,兩個只能存在一個 color: Colors.purple, //設置圓角 borderRadius: new BorderRadius.all(new Radius.circular(25.0)), ), child: new InkWell( //圓角設置,給水波紋也設置同樣的圓角 //如果這里不設置就會出現矩形的水波紋效果 borderRadius: new BorderRadius.circular(25.0), //設置點擊事件回調 onTap: () { }, child: new Container( width: 300.0, height: 50.0, //設置child 居中 alignment: Alignment(0, 0), child: Text("登錄",style: TextStyle(color: Colors.white,fontSize: 16.0),), ), ), ), ), ),
如果 InkWell 與Ink 不同時設置相同的圓角,例如 lnk 設置的圓角為20,而Ink沒有設置,就會出現 矩形的水波紋點擊效果
3 圓角widget 設置自定義水波紋顏色點擊效果
new Center( child: new Material( child: new Ink( //設置背景 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)), //點擊或者toch控件高亮時顯示的控件在控件上層,水波紋下層 //highlightColor: Colors.yellowAccent, //點擊或者toch控件高亮的shape形狀 highlightShape: BoxShape.rectangle, //.InkResponse內部的radius這個需要注意的是,我們需要半徑大于控件的寬,如果radius過小,顯示的水波紋就是一個很小的圓, //水波紋的半徑 radius: 300.0, //水波紋的顏色 splashColor: Colors.black, //true表示要剪裁水波紋響應的界面 false不剪裁 如果控件是圓角不剪裁的話水波紋是矩形 containedInkWell: true, //點擊事件 onTap: () { print("click"); }, child: new Container( //不能在InkResponse的child容器內部設置裝飾器顏色,否則會遮蓋住水波紋顏色的,containedInkWell設置為false就能看到是否是遮蓋了。 width: 300.0, height: 50.0, //設置child 居中 alignment: Alignment(0, 0), child: Text("登錄",style: TextStyle(color: Colors.white,fontSize: 16.0),), ), ), ), ), ),
4 圓角widget 設置高亮顏色點擊效果
new Center( child: new Material( child: new Ink( //設置背景 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)), //點擊或者toch控件高亮時顯示的控件在控件上層,水波紋下層 highlightColor: Colors.purple[800], //點擊或者toch控件高亮的shape形狀 highlightShape: BoxShape.rectangle, //.InkResponse內部的radius這個需要注意的是,我們需要半徑大于控件的寬,如果radius過小,顯示的水波紋就是一個很小的圓, //水波紋的半徑 radius: 0.0, //水波紋的顏色 設置了highlightColor屬性后 splashColor將不起效果 splashColor: Colors.red, //true表示要剪裁水波紋響應的界面 false不剪裁 如果控件是圓角不剪裁的話水波紋是矩形 containedInkWell: true, onTap: () { print( 'click'); }, child: new Container( //不能在InkResponse的child容器內部設置裝飾器顏色,否則會遮蓋住水波紋顏色的,containedInkWell設置為false就能看到是否是遮蓋了。 width: 300.0, height: 50.0, //設置child 居中 alignment: Alignment(0, 0), child: Text("登錄",style: TextStyle(color: Colors.white,fontSize: 16.0),), ), ), ), ), ),
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
詳解如何使用Android Studio開發(fā)Gradle插件
這篇文章主要介紹了詳解如何使用Android Studio開發(fā)Gradle插件,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10Android中Android Virtual Device(AVD)使用教程
這篇文章主要介紹了Android中Android Virtual Device(AVD)使用教程,本文還對使用過程中發(fā)生的一些錯誤給出了處理方法,需要的朋友可以參考下2015-01-01Android中ListView的幾種常見的優(yōu)化方法總結
Android中的ListView應該算是布局中幾種最常用的組件之一,本篇文章主要做了三種優(yōu)化總結,有興趣的可以了解一下。2017-02-02Android編程實現文件瀏覽功能的方法【類似于FileDialog的功能】
這篇文章主要介紹了Android編程實現文件瀏覽功能的方法,可實現類似于FileDialog的功能,涉及Android針對文件與目錄操作的相關技巧,需要的朋友可以參考下2016-11-11android使用flutter的ListView實現滾動列表的示例代碼
現如今打開一個 App,比如頭條、微博,都會有長列表,那么android使用flutter的ListView滾動列表如何實現,本文就來詳細的介紹一下,感興趣的同學可以來了解一下2018-12-12