首页 资讯 社会 经济 快讯 文化 时尚 女性 科技 汽车 综合 快报

InkWell操作代码怎么打?

2020-12-23 11:30:43 来源:互联网

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,

),

),

),

),

)

关键词: InkWell

上一篇:峰峰值指的是什么?只有正的吗?

下一篇:VB 中的dim是什么意思?

责任编辑:FRT136

科技

点击排行
推荐阅读