有没有办法从我的列表图块中删除飞溅？

Posted 2023-02-23

【中文标题】有没有办法从我的列表图块中删除飞溅？

【英文标题】：Is there a way to remove the splash from my list tile?

【发布时间】：2020-10-19 17:07:30

【问题描述】：

我有以下列表图块

  Container buildContactTile(BuildContext context, Color backgroundColor, Color foregroundColor, UserModel contact,
      ContactListController controller) 
    final ThemeData theme = Theme.of(context);

    return Container(
      decoration: BoxDecoration(color: backgroundColor, borderRadius: const BorderRadius.all(Radius.circular(5.0))),
      child: ListTile(
        leading: ProfileAvatar(
          backgroundColor: foregroundColor,
          photoURL: contact.photoURL,
          radius: 15.0,
          fallback: ProfileAvatar.nameAvatar(displayName: contact.displayName),
        ),
        title: Text(contact.displayName, style: theme.textTheme.bodyText1.apply(color: foregroundColor)),
        trailing: _interactive ? Icon(Icons.add, color: foregroundColor) : null,
        onTap: () => _interactive ? controller.updateSelectedContacts(contact) : null,
      ),
    );
  

我用一个容器包装它，根据小部件的状态为其赋予不同的背景颜色。但是发生的情况是，我的飞溅没有考虑圆形边框半径，因此飞溅颜色最终出现在列表图块的角落。如何使初始颜色透明，或使其考虑圆角？

当您按住 ListTile 并按住时，您会在角落看到以下内容

【问题讨论】：

你能添加屏幕外观的图片吗？

添加了一张按下列表磁贴时的样子

我正在阅读InkWell 文档，我认为通过将ListTile 包装在InkWell 中，我们可以通过在@ 中设置containedInkWell:true 来配置触摸波纹以解决圆角问题987654328@

刚试了，不行

抱歉我的笔记本电脑崩溃了，我希望明天测试一下

【参考方案1】：

将整个Container 包裹在Theme 中，并将ThemeData 的splashColor 和highlightColor 设置为Colors.transparent。

参考How to disable default Widget splash effect in Flutter?

class MyWidget extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Theme(
      data: ThemeData(
        splashColor: Colors.transparent,
        highlightColor: Colors.transparent,
      ),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.blueGrey,
          borderRadius: const BorderRadius.all(Radius.circular(15.0)),
        ),
        child: ListTile(
          leading: const Icon(Icons.flight_land),
          title: const Text("Trix's airplane"),
          subtitle: const Text('The airplane is only in Act II.'),
          enabled: true,
          onTap: () 
            print('Something');
          ,
        ),
      ),
    );
  

【讨论】：

刚来得及测试，可惜没有解决问题。

如果你快速点击它看起来它是固定的。但是，当您将手指放在瓷砖上较长时间时，您会看到角落变黑。

更新，发现similar question