Flutter ListTile 飞溅/波纹效果与边框不匹配

Posted 2023-02-23

【中文标题】Flutter ListTile 飞溅/波纹效果与边框不匹配

【英文标题】：Flutter ListTile splash/ripple effect not matching border

【发布时间】：2020-05-19 07:29:25

【问题描述】：

我有一个 ListTile 在颤动，但我似乎无法弄清楚如何使飞溅/波纹效果适合边框。我的边框是圆形的，但飞溅只是一个没有圆形边框的普通矩形，如下图所示。

ListTile

下面是 ListTile 的代码。

Ink(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
    ),
    child: ListTile(
      title: text(title, 0.0),
      leading: Icon(
        icon,
        color: primaryColor,
      ),
    )
)

【问题讨论】：

尝试将您的 listtile 包裹在卡片中，并从 Ink 中移除装饰属性，并改为为您的卡片设置样式

【参考方案1】：

将Ink 或InkWell 与ClipRRect 包围，其边界半径值等于 BorderRadius.all(Radius.circular(borderRadius))

更好的是，将Ink 替换为InkWell 并设置不需要剪辑的borderRadius: BorderRadius.all(Radius.circular(borderRadius))。

这样你就可以写

InkWell(
    borderRadius: BorderRadius.circular(borderRadius),
    onTap: () ,
    splashColor: Colors.red,
    child: ListTile(
        title: Text("Title"),
    ),
),

【参考方案2】：

您可以使用 InkWell：

InkWell(
    customBorder: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
    ),
    onTap: () ,
    splashColor: Colors.red,
    child: ListTile(
        title: Text("Title"),
    ),
),

【讨论】：

我只能说：它与 customBorder 配合得非常好