Flutter中的ListView水波纹效果

Question

我在Flutter中有一个简单的列表视图。

final List<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[600, 500, 100];

ListView.builder(
  padding: const EdgeInsets.all(8),
  itemCount: entries.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 50,
      color: Colors.amber[colorCodes[index]],
      child: Center(child: Text('Entry ${entries[index]}')),
    );
  }
);

当我点击/轻触它时，会出现一个圆形水波纹效果，然后扩展到我在列表中点击的元素的其余部分。我想改变这种行为并删除圆形水波纹效果。相反，当有人点击列表中的元素时，我希望该元素突出显示并淡出整个元素。其中一个例子是 WhatsApp 应用程序。当你点击一个会话时，你会看到你在列表中点击的元素会闪烁，显示完整元素的涟漪效果。你将看到一个矩形涟漪效果而不是圆形涟漪效果，其中你单击，然后扩展到元素的其余部分。

如何更改Flutter中ListView的默认行为？如果我没有讲清楚，请让我知道，提前感谢。

- yoohoo

Answer 1

在你的代码片段中的第8行，将Container()类替换为InkWell()类，如下所示。

child: ListView.builder(
        itemCount: list.length,
        itemBuilder: (context, i) {
          return InkWell( 
            onTap: (){},
            child: Container(
              height: 50,
              color: Colors.amber[colorCodes[index]],
              child: Center(child: Text('Entry ${entries[index]}')),
            );
          );
        },
      ),

欲了解更多信息，请访问flutter.dev文档

- Saiful Islam