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

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

在flutter 開發(fā)中用InkWell或者GestureDetector將某個組件包起來，已添加點(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屬性，這時候InkWell的水波紋效果會無效。

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則會遮擋水波紋效果,如果設(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(    //不能同時”使用Ink的變量color屬性以及decoration屬性，兩個只能存在一個    color: Colors.purple,    //設(shè)置圓角    borderRadius: new BorderRadius.all(new Radius.circular(25.0)),    ),    child: new InkWell(    //圓角設(shè)置,給水波紋也設(shè)置同樣的圓角    //如果這里不設(shè)置就會出現(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è)置相同的圓角，例如 lnk 設(shè)置的圓角為20，而Ink沒有設(shè)置,就會出現(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這個需要注意的是，我們需要半徑大于控件的寬，如果radius過小，顯示的水波紋就是一個很小的圓，    //水波紋的半徑    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è)置裝飾器顏色，否則會遮蓋住水波紋顏色的，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這個需要注意的是，我們需要半徑大于控件的寬，如果radius過小，顯示的水波紋就是一個很小的圓，    //水波紋的半徑    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è)置裝飾器顏色，否則會遮蓋住水波紋顏色的，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),),    ),    ),   ),   ),  ),

以上是“flutter中如何使用InkWell實(shí)現(xiàn)水波紋點(diǎn)擊效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！