flutter中如何使用InkWell實(shí)現水波紋點(diǎn)擊效果

小編給大家分享一下flutter中如何使用InkWell實(shí)現水波紋點(diǎn)擊效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在flutter 開(kāi)發(fā)中用InkWell或者GestureDetector將某個(gè)組件包起來(lái)，已添加點(diǎn)擊事件。

GestureDetector 使用點(diǎn)擊無(wú)水波紋出現，InkWell可以實(shí)現水波紋效果。正常情況下使用 ：

InkWell( //單擊事件響應  onTap: () {  },  child: Container(   alignment: Alignment(0, 0),   height: 28,   width: 120,   child: Text("InkWell單擊事件"),  ),  ),

如果在InkWell的上下都出現的顏色的設置，如上中的Container中如果加入了color:Colors.white,或者是Container中的其他widget設置了coloro屬性，這時(shí)候InkWell的水波紋效果會(huì )無(wú)效。

1 widget 設置水波紋點(diǎn)擊效果 并設置widget背景

new Center(   child: new Material(   // 設置背景顏色 默認矩形   color: Colors.purple,   child: new InkWell(    //點(diǎn)擊事件回調    onTap: () {},    //不要在這里設置背景色，for則會(huì )遮擋水波紋效果,如果設置的話(huà)盡量設置Material下面的color來(lái)實(shí)現背景色    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來(lái)設置，與Material設置color 的區別是，Ink可設置背景的形狀樣式。

new Center(   child: new Material(   //INK可以實(shí)現裝飾容器，實(shí)現矩形 設置背景色   child: new Ink(    //設置背景 默認矩形    color: Colors.purple,    child: new InkWell(    //點(diǎn)擊事件回調    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 設置水波紋點(diǎn)擊效果

new Center( child: new Material(//INK可以實(shí)現裝飾容器 child: new Ink( //用ink圓角矩形 // color: Colors.red,    decoration: new BoxDecoration(    //不能同時(shí)”使用Ink的變量color屬性以及decoration屬性，兩個(gè)只能存在一個(gè)    color: Colors.purple,    //設置圓角    borderRadius: new BorderRadius.all(new Radius.circular(25.0)),    ),    child: new InkWell(    //圓角設置,給水波紋也設置同樣的圓角    //如果這里不設置就會(huì )出現矩形的水波紋效果    borderRadius: new BorderRadius.circular(25.0),     //設置點(diǎn)擊事件回調    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 不同時(shí)設置相同的圓角，例如 lnk 設置的圓角為20，而Ink沒(méi)有設置,就會(huì )出現 矩形的水波紋點(diǎn)擊效果

3 圓角widget 設置自定義水波紋顏色點(diǎn)擊效果

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)),    //點(diǎn)擊或者toch控件高亮時(shí)顯示的控件在控件上層,水波紋下層    //highlightColor: Colors.yellowAccent,    //點(diǎn)擊或者toch控件高亮的shape形狀    highlightShape: BoxShape.rectangle,    //.InkResponse內部的radius這個(gè)需要注意的是，我們需要半徑大于控件的寬，如果radius過(guò)小，顯示的水波紋就是一個(gè)很小的圓，    //水波紋的半徑    radius: 300.0,    //水波紋的顏色    splashColor: Colors.black,    //true表示要剪裁水波紋響應的界面 false不剪裁 如果控件是圓角不剪裁的話(huà)水波紋是矩形    containedInkWell: true,    //點(diǎn)擊事件    onTap: () {     print("click");    },    child: new Container(     //不能在InkResponse的child容器內部設置裝飾器顏色，否則會(huì )遮蓋住水波紋顏色的，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 設置高亮顏色點(diǎn)擊效果

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)),    //點(diǎn)擊或者toch控件高亮時(shí)顯示的控件在控件上層,水波紋下層    highlightColor: Colors.purple[800],    //點(diǎn)擊或者toch控件高亮的shape形狀    highlightShape: BoxShape.rectangle,    //.InkResponse內部的radius這個(gè)需要注意的是，我們需要半徑大于控件的寬，如果radius過(guò)小，顯示的水波紋就是一個(gè)很小的圓，    //水波紋的半徑    radius: 0.0,    //水波紋的顏色 設置了highlightColor屬性后 splashColor將不起效果    splashColor: Colors.red,    //true表示要剪裁水波紋響應的界面 false不剪裁 如果控件是圓角不剪裁的話(huà)水波紋是矩形    containedInkWell: true,    onTap: () {     print(      'click');    },    child: new Container(     //不能在InkResponse的child容器內部設置裝飾器顏色，否則會(huì )遮蓋住水波紋顏色的，containedInkWell設置為false就能看到是否是遮蓋了。     width: 300.0,     height: 50.0,     //設置child 居中     alignment: Alignment(0, 0),     child: Text("登錄",style: TextStyle(color: Colors.white,fontSize: 16.0),),    ),    ),   ),   ),  ),