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

Question

我有以下列表图块

  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 并按住时，您会在角落看到以下内容

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