Flutter 你会设置Button吗

Flutter的细节问题太多，今天分享一下关于button的设置，Ink-Inkwell-InkResponse,别着急划走，有可能你真的不会设置Button。

先上代码 

Material(
      color: backgroundColor ?? Colors.transparent,
      child: Ink(
        decoration: decoration,
        child: InkResponse(
          // borderRadius: new BorderRadius.all(new Radius.circular(25.0)),
          //点击或者toch控件高亮时显示的控件在控件上层,水波纹下层
          highlightColor: Colors.transparent,
          //点击或者toch控件高亮的shape形状
          highlightShape: BoxShape.rectangle,
          //.InkResponse内部的radius这个需要注意的是，我们需要半径大于控件的宽，如果radius过小，显示的水波纹就是一个很小的圆，
          //水波纹的半径
          // radius: 20.0,
          //水波纹的颜色
          splashColor: _animationColor,
          //true表示要剪裁水波纹响应的界面 false不剪裁 如果控件是圆角不剪裁的话水波纹是矩形
          containedInkWell: true,
          onTap: () {
            if (onTap != null) {
              onTap!();
            }
          },
          child: child,
        ),
      ),
    )

首先，外层套Material，如果不加的话，水波纹直接失效。

这里主要说一个问题，我想大家在无论在使用Ink还是GestureDetector的时候，目的只有一个，就是仅仅给child包裹一层事件，我们并不想改变child的ui。所以问题就来了，那么上面的代码为什么又要给Material设置颜色，还要加decoration。

先说背景色，经过尝试，Material这里设置为透明色的话，不会影响child的背景色。Ink里面的颜色即使设置为透明色，还是会有白色背景。所以，最好在这里设置背景色为透明色。

然后Ink里面的decoration，我们经常会有需求圆角、阴影、渐变这些，你不得不使用到decoration，假如在你的child里面去做这些，你会发现水波纹失效，所以还是在Ink里面设置比较好。

最后InkResponse，这里没有使用到InkWell，其实是一样的，InkWell也是用的InkResponse，用InkResponse可以选择性的修改水波纹的特效以及按钮的高亮特性等等。

如果需要更详细的ui配置可以参考这篇文章。转载参考

如果大家有新的Flutter细节发现欢迎留言，互相学习。