如何为Flutter项目的ListTile添加点击和水波纹效果，添加Ink时报错如何解决？

问题原因 #

你不需要额外套Ink系列组件，ListTile本身就属于Material组件库，自带水波纹点击效果。你没看到效果、加Ink报错的原因有两个：

1. 你现在的代码里只有第一个ListTile写了onTap参数，剩下的都没有配置。ListTile只要没有配置onTap就默认是不可交互状态，自然不会显示点击效果。
2. Ink系列组件必须嵌套在Material类型的父组件下才能正常渲染，你强行套在ListTile外层/内层很容易出现上下文不匹配的报错，完全没必要。

解决方法 #

你只需要给所有需要点击效果的ListTile加上onTap参数即可，哪怕暂时不需要执行逻辑写空回调也可以，水波纹会自动生效。如果要自定义效果，直接用ListTile自带的属性修改就行：

• splashColor：自定义点击水波纹的颜色
• highlightColor：自定义长按时的高亮颜色
• hoverColor：自定义鼠标悬浮时的颜色（桌面端/Web端生效）

修改后的代码示例 #

Expanded(
  child: Padding(
    padding: EdgeInsets.all(20.0),
    child: ListView(children: <Widget>[
      ListTile(
        leading: FaIcon(FontAwesomeIcons.thermometerFull),
        title: Text("Temperature"),
        trailing: Text(temp != null ? temp.toString() + "\u00B0" : 'loading'),
        // 配置onTap后自动出水波纹
        onTap: () {
          // 这里写点击后要执行的业务逻辑，暂时没用留空即可
        },
        // 不需要自定义效果的话可以删掉下面这个参数，用默认样式就行
        splashColor: Colors.blue.withOpacity(0.3),
      ),
      ListTile(
        leading: FaIcon(FontAwesomeIcons.thermometerHalf),
        title: Text("feels like"),
        trailing: Text(feels != null ? feels.toString() : "loading"),
        onTap: () {},
      ),
      ListTile(
        // 注意：你原来的RGBO最后一位透明度参数写错了，取值范围是0~1，10会导致完全不透明
        hoverColor: Color.fromRGBO(153, 255, 255, 0.1),
        leading: FaIcon(FontAwesomeIcons.cloudMeatball),
        title: Text("Weather"),
        trailing: Text(desc != null ? desc.toString() : "loading"),
        onTap: () {},
      ),
      ListTile(
        leading: FaIcon(FontAwesomeIcons.sun),
        title: Text("Humidity"),
        trailing: Text(humidity != null ? humidity.toString() : "loading"),
        onTap: () {},
      ),
      ListTile(
        leading: FaIcon(FontAwesomeIcons.wind),
        title: Text("Wind speed"),
        trailing: Text(wind != null ? wind.toString() : "loading"),
        onTap: () {},
      ),
      ListTile(
        leading: FaIcon(FontAwesomeIcons.bug),
        title: Text("Wind speed"),
        trailing: Text(wind != null ? wind.toString() : "loading"),
        onTap: () {},
      ),
      ListTile(
        leading: FaIcon(FontAwesomeIcons.wind),
        title: Text("Wind speed"),
        trailing: Text(wind != null ? wind.toString() : "loading"),
        onTap: () {},
      ),
    ]),
  ),
);

内容的提问来源于stack exchange，提问作者alterman