Flutter基础-044-Ink和InkWell添加水波纹效果

区别

• Ink 可以给一个widget添加一个decoration，如背景色，形状，大小等。
• InkWell 添加水波纹效果，只是描绘一个水波纹。

Ink构造方法

Ink({
    Key key,
    this.padding,// 
    Color color,
    Decoration decoration,
    this.width,
    this.height,
    this.child,
  })

InkWell水波纹由两部分组成：

• 水波纹底色，也就是背景色，点击时该背景大小不变。
• 水波纹扩展动作，点击时会逐渐扩大

InkWell构造方法

const InkWell({
    Key key,
    Widget child,// 内部可添加widget，给任何widget添加水波纹
    GestureTapCallback onTap,// 单击回调
    GestureTapCallback onDoubleTap,//双击回调
    GestureLongPressCallback onLongPress,// 长按回调
    GestureTapDownCallback onTapDown,//按下
    GestureTapCancelCallback onTapCancel,//松开
    ValueChanged<bool> onHighlightChanged,
    ValueChanged<bool> onHover,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,//点击时，水波纹的底色颜色
    Color splashColor,// 点击时，水波纹扩展的颜色
    InteractiveInkFeatureFactory splashFactory,
    double radius,// 点击时，水波纹扩展的半径，不是底色背景大小
    BorderRadius borderRadius,// 水波纹底色背景的弧度
    ShapeBorder customBorder,
    bool enableFeedback = true,
    bool excludeFromSemantics = false,
  })

#####示例

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Material(
          child: Ink(
            decoration: BoxDecoration(
              color: Colors.green[100], // 背景色
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(10),
            ),
            child: InkWell(
              borderRadius: new BorderRadius.circular(30.0), // 点击时水波纹阴影背景的形状
              customBorder: RoundedRectangleBorder(
                  side: BorderSide(
                      color: Colors.black, width: 5, style: BorderStyle.solid)),// 没发现什么作用

              splashColor: Colors.blue[200], //水波纹的颜色
              highlightColor: Colors.orange[200], //点击后背景高亮颜色

              onTap: () {
                print("sssssss");
              }, // 单击
              onDoubleTap: () {}, //双击,
              onLongPress: () {}, // 长按,

              radius: 50, //水波纹的扩展半径，不是水波纹的背景

              child: Padding(
                padding: EdgeInsets.all(10),
                child: Text(
                  "水波纹",
                  maxLines: 1,
                  style: TextStyle(color: Colors.blue),
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}