Flutter ListTile hoverColor属性不生效问题求助

尝试为ListTile添加悬停效果，已将其包裹在Material组件中以启用该功能。TileColor属性可正常工作，但hoverColor属性无法生效。代码片段如下：

return Container(
        child: ListView.builder(
      itemCount: listdata.length,
      itemBuilder: (context, index) {
        return Material(
          child: ListTile(
            shape:
                const Border(bottom: BorderSide(width: 1, color: Colors.white)),
            hoverColor: Colors.red,
            tileColor: Colors.blueAccent,
            title: Text(listdata[index]['data'].toString()),
          ),
        );
      },
    ));

解决方案 #

方案一：为Material组件设置透明背景色 #

默认Material组件的背景色会遮挡ListTile的hover效果，只需添加color: Colors.transparent即可让hoverColor正常显示：

return Container(
        child: ListView.builder(
      itemCount: listdata.length,
      itemBuilder: (context, index) {
        return Material(
          color: Colors.transparent, // 添加此行
          child: ListTile(
            shape:
                const Border(bottom: BorderSide(width: 1, color: Colors.white)),
            hoverColor: Colors.red,
            tileColor: Colors.blueAccent,
            title: Text(listdata[index]['data'].toString()),
          ),
        );
      },
    ));

方案二：用InkWell自定义悬停效果 #

如果需要更灵活的交互控制，可通过InkWell包裹ListTile，直接利用其hoverColor属性实现效果：

return Container(
        child: ListView.builder(
      itemCount: listdata.length,
      itemBuilder: (context, index) {
        return Material(
          child: InkWell(
            hoverColor: Colors.red,
            child: ListTile(
              shape:
                  const Border(bottom: BorderSide(width: 1, color: Colors.white)),
              tileColor: Colors.blueAccent,
              title: Text(listdata[index]['data'].toString()),
            ),
          ),
        );
      },
    ));

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