6、Flutter Widgets 之 InkWell 和 Ink

InkWell

参数详解
属性    详解
child    子组件
onTap    点击监听（）
onDoubleTap    双击监听
onLongPress    长按监听
onTapDown    点击监听
onTapCancel    取消点击监听
onHighlightChanged    当材料的这一部分突出显示或停止突出显示时调用
onHover    当指针进入或退出墨水响应区域时调用
focusColor    获取焦点颜色
hoverColor    指针悬停时颜色
highlightColor    长按颜色
splashColor    水波纹颜色
splashFactory    自定义水波纹
radius    水波纹半径
borderRadius    飞溅半径
customBorder    覆盖borderRadius的自定义剪辑边框
enableFeedback    检测到的手势是否应该提供声音和/或触觉反馈，默认true
excludeFromSemantics    是否将此小部件引入的手势从语义树中排除。默认false

 

InkWell组件在用户点击时出现“水波纹”效果，InkWell简单用法：

InkWell(

        onTap: (){},
        child: Text('这是InkWell点击效果'),
      )

 

InkWell(

  onTap: () {},
  splashColor: Colors.red,
  ...
)

 给字体添加边距和圆角边框，扩大“水波纹”效果：

InkWell(

        onTap: (){},
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 20,vertical: 8),
          decoration: BoxDecoration(
            border:Border.all(color: Colors.blue),
            borderRadius: BorderRadius.all(Radius.circular(30))
                
          ),
          child: Text('这是InkWell点击效果'),
        ),
      )

 

发现“水波纹”超出的了圆角边框，如何解决这个问题呢？Ink隆重登场。

Ink

Ink的官方介绍：

A convenience widget for drawing images and other decorations on [Material] widgets, so that [InkWell] and [InkResponse] splashes will render over them.

简单翻译：Ink控件用于在[Material]控件上绘制图像和其他装饰，以便[InkWell]、[InkResponse]控件的“水波纹”效果在其上面显示。

上面的问题修改代码如下：

Ink(

        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [Color(0xFFDE2F21), Color(0xFFEC592F)]),
            borderRadius: BorderRadius.all(Radius.circular(20))),
        child: InkWell(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          child: Container(
            padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
            child: Text(
              '这是InkWell的点击效果',
              style: TextStyle(color: Colors.white),
            ),
          ),
          onTap: () {},
        ),
      )