flutter InkWell 設置水波紋點擊效果詳述

在flutter 開發中用InkWell或者GestureDetector將某個組件包起來，已添加點擊事件。

GestureDetector 使用點擊無水波紋出現，InkWell可以實現水波紋效果。

正常情況下使用 ：

 InkWell(
 \t\t//單擊事件響應
 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 的區別是，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沒有設置,就會出現 矩形的水波紋點擊效果

 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),),
 ),
 ),
 ),
 ), 

 ),