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是什么意思？
责任编辑：
