InkWell是什么意思?
InkWell是Flutter提供的一個用于實現Material觸摸水波效果的Widget，相當于Android里的Ripple
使用的操作代碼怎么打?
import 'package:flutter/material.dart';
class LearnInkWell extends StatefulWidget{
@override
State createState() {
return new _LearnInkWell();
}
}
class _LearnInkWell extends State{
@override
Widget build(BuildContext context) {
return new Scaffold(
body:new Column(
children: [
new Center(
child:new Material(
child: new InkWell(
onTap: (){
print('###########################點擊了##################################');
},
child: new Container(//不要在這里設置背景色，for則會遮擋水波紋效果,如果設置的話盡量設置Material下面的color來實現背景色
width: 300.0,
height: 100.0,
margin: EdgeInsets.all(0.0),
),
),
color: Colors.yellow,
),
),
new Center(
child: new Material(
child: new Ink(//INK可以實現裝飾容器，實現矩形 設置背景色
color: Colors.black,
child:new InkWell(
onTap: (){
print("@@@@@@@@@@@@@@@@@@@@@@@@@@@點擊了@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
},
child: new Container(
width: 300.0,
height: 100.0,
),
),
),
),
),
new Center(
child: new Material(
child: new Ink(//用ink圓角矩形
// color: Colors.red,
decoration: new BoxDecoration(
/**
* assert(color == null || decoration == null,'Cannot provide both a color and
* a decoration\n'The color argument is just a shorthand
* for "decoration: new BoxDecoration(color: color)".')
* 在dart中使用assert 語句來中斷正常的執行流程。
* “不能同時”使用Ink的變量color屬性以及decoration屬性，“兩個只能存在一個”。
*/
color: Colors.purple,
borderRadius:new BorderRadius.all(new Radius.circular(20.0)),
),
child: new InkWell(
borderRadius:new BorderRadius.circular(20.0),//給水波紋也設置同樣的圓角
onTap: (){
print('%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%');
},
child: new Container(
width: 300.0,
height: 100.0,
),
),
),
),
),
new Center(
child: new Material(
child:new Ink(
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
),
child:new InkResponse(
borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
// highlightColor: Colors.yellowAccent,//點擊或者toch控件高亮時顯示的控件在控件上層,水波紋下層
highlightShape: BoxShape.rectangle,//點擊或者toch控件高亮的shape形狀
//.InkResponse內部的radius這個需要注意的是，我們需要半徑大于控件的寬，如果radius過小，顯示的水波紋就是一個很小的圓，
radius: 300.0,//水波紋的半徑
splashColor: Colors.black,//水波紋的顏色
containedInkWell: true,//true表示要剪裁水波紋響應的界面 false不剪裁 如果控件是圓角不剪裁的話水波紋是矩形
onTap: (){
print('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
},
child: new Container(//1.不能在InkResponse的child容器內部設置裝飾器顏色，否則會遮蓋住水波紋顏色的，containedInkWell設置為false就能看到是否是遮蓋了。
width: 300.0,
height: 100.0,
),
),
),
),
),
new Center(
child: new Material(
child:new Ink(
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
),
child:new InkResponse(
borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
highlightColor: Colors.yellowAccent,//點擊或者toch控件高亮時顯示的控件在控件上層,水波紋下層
highlightShape: BoxShape.rectangle,//點擊或者toch控件高亮的shape形狀
//.InkResponse內部的radius這個需要注意的是，我們需要半徑大于控件的寬，如果radius過小，顯示的水波紋就是一個很小的圓，
radius: 0.0,//水波紋的半徑
// splashColor: Colors.black,//水波紋的顏色
containedInkWell: true,//true表示要剪裁水波紋響應的界面 false不剪裁 如果控件是圓角不剪裁的話水波紋是矩形
onTap: (){
print('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
},
child: new Container(//1.不能在InkResponse的child容器內部設置裝飾器顏色，否則會遮蓋住水波紋顏色的，containedInkWell設置為false就能看到是否是遮蓋了。
width: 300.0,
height: 100.0,
),
),
),
),
),
],
),
);
}
}
Flutter使用InkWell無水波紋效果如何設置?
正常情況下使用方式：
undefined
InkWell(
onTap: () { },
child: Container(
height: 50,
child: Text( "是速度",
maxLines: 1,
style: TextStyle(color: color),
overflow: TextOverflow.ellipsis,
),
),
)
如果在InkWell的上下都出現的顏色的設置，如上中的Container中如果加入了color:Colors.white,這時候InkWell的水波紋效果會無效
解決方案是：在InkWell的外層再套上Matetial 以及 Ink組件
undefined
Material(
child: Ink(
child:
InkWell(
onTap: () { },
child: Container(
height: 50.0,
color: Colors.white,
child: Text( "是速度",
maxLines: 1,
style: TextStyle(color: color),
overflow: TextOverflow.ellipsis,
),
),
),
),
)
上一篇：峰峰值指的是什么？只有正的嗎？
下一篇：VB 中的dim是什么意思？
責任編輯：
