flutter InkWell實現(xiàn)水波紋點擊效果

更新時間：2020年08月26日 11:30:22 作者：早起的年輕人

這篇文章主要為大家詳細介紹了flutter InkWell實現(xiàn)水波紋點擊效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

GestureDetector 使用點擊無水波紋出現(xiàn)，InkWell可以實現(xiàn)水波紋效果。
正常情況下使用：

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

如果在InkWell的上下都出現(xiàn)的顏色的設置，如上中的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來實現(xiàn)背景色
  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可以實現(xiàn)裝飾容器，實現(xiàn)矩形 設置背景色
  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可以實現(xiàn)裝飾容器
 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(
  //圓角設置,給水波紋也設置同樣的圓角
  //如果這里不設置就會出現(xiàn)矩形的水波紋效果
  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沒有設置,就會出現(xiàn) 矩形的水波紋點擊效果

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: