InkWell是什么意思?
InkWell是Flutter提供的一個(gè)用于實(shí)現(xiàn)Material觸摸水波效果的Widget，相當(dāng)于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('###########################點(diǎn)擊了##################################');
},
child: new Container(//不要在這里設(shè)置背景色，for則會(huì)遮擋水波紋效果,如果設(shè)置的話盡量設(shè)置Material下面的color來(lái)實(shí)現(xiàn)背景色
width: 300.0,
height: 100.0,
margin: EdgeInsets.all(0.0),
),
),
color: Colors.yellow,
),
),
new Center(
child: new Material(
child: new Ink(//INK可以實(shí)現(xiàn)裝飾容器，實(shí)現(xiàn)矩形 設(shè)置背景色
color: Colors.black,
child:new InkWell(
onTap: (){
print("@@@@@@@@@@@@@@@@@@@@@@@@@@@點(diǎn)擊了@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
},
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 語(yǔ)句來(lái)中斷正常的執(zhí)行流程。
* “不能同時(shí)”使用Ink的變量color屬性以及decoration屬性，“兩個(gè)只能存在一個(gè)”。
*/
color: Colors.purple,
borderRadius:new BorderRadius.all(new Radius.circular(20.0)),
),
child: new InkWell(
borderRadius:new BorderRadius.circular(20.0),//給水波紋也設(shè)置同樣的圓角
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,//點(diǎn)擊或者toch控件高亮?xí)r顯示的控件在控件上層,水波紋下層
highlightShape: BoxShape.rectangle,//點(diǎn)擊或者toch控件高亮的shape形狀
//.InkResponse內(nèi)部的radius這個(gè)需要注意的是，我們需要半徑大于控件的寬，如果radius過(guò)小，顯示的水波紋就是一個(gè)很小的圓，
radius: 300.0,//水波紋的半徑
splashColor: Colors.black,//水波紋的顏色
containedInkWell: true,//true表示要剪裁水波紋響應(yīng)的界面 false不剪裁 如果控件是圓角不剪裁的話水波紋是矩形
onTap: (){
print('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
},
child: new Container(//1.不能在InkResponse的child容器內(nèi)部設(shè)置裝飾器顏色，否則會(huì)遮蓋住水波紋顏色的，containedInkWell設(shè)置為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,//點(diǎn)擊或者toch控件高亮?xí)r顯示的控件在控件上層,水波紋下層
highlightShape: BoxShape.rectangle,//點(diǎn)擊或者toch控件高亮的shape形狀
//.InkResponse內(nèi)部的radius這個(gè)需要注意的是，我們需要半徑大于控件的寬，如果radius過(guò)小，顯示的水波紋就是一個(gè)很小的圓，
radius: 0.0,//水波紋的半徑
// splashColor: Colors.black,//水波紋的顏色
containedInkWell: true,//true表示要剪裁水波紋響應(yīng)的界面 false不剪裁 如果控件是圓角不剪裁的話水波紋是矩形
onTap: (){
print('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
},
child: new Container(//1.不能在InkResponse的child容器內(nèi)部設(shè)置裝飾器顏色，否則會(huì)遮蓋住水波紋顏色的，containedInkWell設(shè)置為false就能看到是否是遮蓋了。
width: 300.0,
height: 100.0,
),
),
),
),
),
],
),
);
}
}
Flutter使用InkWell無(wú)水波紋效果如何設(shè)置?
正常情況下使用方式：
undefined
InkWell(
onTap: () { },
child: Container(
height: 50,
child: Text( "是速度",
maxLines: 1,
style: TextStyle(color: color),
overflow: TextOverflow.ellipsis,
),
),
)
如果在InkWell的上下都出現(xiàn)的顏色的設(shè)置，如上中的Container中如果加入了color:Colors.white,這時(shí)候InkWell的水波紋效果會(huì)無(wú)效
解決方案是：在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是什么意思？
責(zé)任編輯：
