Question

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

下面是ListTile的代码。

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

Answer 1

您可以使用InkWell：

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

Answer 2

用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"),
    ),
),

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

2 个答案: