Flutter Listtile 悬停颜色不起作用

Question

我正在尝试向列表图块添加悬停效果。我尝试将其包装在 Material 小部件中以启用它。平铺颜色工作正常，但悬停颜色不起作用。 请提出一些想法。

只是代码片段

 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()),
          ),
        );
      },
    ));

Answer 1

Flutter的ListTile中的hoverColor属性仅适用于支持悬停事件的Web或桌面。它不适用于移动设备，因为它们依赖于触摸交互，而不是悬停。

如果你想在移动设备上实现类似的触摸交互效果，可以使用

onTap

修改了您的代码：

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

快乐编码:)