Flutter-InkWell-水波纹效果

InkWell有的叫溅墨效果，有的叫水波纹效果。使用场景是给一些无点击事件的部件添加点击事件时使用（也支持长按、双击等事件），同时你也可以去修改它的颜色和形状。

InkWell(
  borderRadius: BorderRadius.circular(8.0), // 圆角
  splashColor: Colors.transparent, // 溅墨色（波纹色）
  highlightColor: Colors.transparent, // 点击时的背景色（高亮色）
  onTap: () {},// 点击事件
  child: Container(),
 );

实现水波纹效果 两种方式

1.包一层 Material，将背景色设置在 Material中的color里。

Material(
  color: Colors.white,
  child: InkWell(),)

2.使用Stack布局，将InkWell放置在上层。这种适用于给图片添加点击效果，比如Banner图的点击。

Stack(
    children: <Widget>[
      Positioned.fill(
        child: Image(),
      ),
      Positioned.fill(
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            splashColor: Color(0X40FFFFFF),
            highlightColor: Colors.transparent,
            onTap: () {},
          ),
        ),
      )
    ],
  )

示例

import 'package:flutter/material.dart';
import './datas.dart';

class NavigatorDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              onPressed: () {},
              child: OutlineButton(
                onPressed: () {},
                child: Text('Home'),
              ),
            ),
            OutlineButton(
              onPressed: () {
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (BuildContext contetxt) {
                  return Page(title: 'Page页面');
                }));
              },
              child: Text('Page'),
            ),
          ],
        ),
      ),
    );
  }
}

class Page extends StatelessWidget {
  String title;
  Page({this.title});
  Widget _buildItem(BuildContext context, int index) {
    return Container(
      margin: EdgeInsets.all(8.0),
      color: Colors.white,
      child: Stack(
        children: <Widget>[
          Column(
            children: <Widget>[
              Image.network(datas[index].imageUrl),
              SizedBox(
                height: 16.0,
              ),
              Text(
                datas[index].title,
                style: Theme.of(context).textTheme.title,
              ),
              Text(
                datas[index].author,
                style: Theme.of(context).textTheme.subhead,
              ),
              SizedBox(
                height: 16.0,
              ),
            ],
          ),
          Positioned.fill(
            child: Material(
              color: Colors.transparent,
              child: InkWell(
                splashColor: Colors.white.withOpacity(0.3),
                highlightColor: Colors.white.withOpacity(0.1),
                onTap: () {},
              ),
            ),
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: ListView.builder(
        itemBuilder: _buildItem,
        itemCount: datas.length,
      ),
    );
  }
}