You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何自定义ListTile的leading、trailing样式并为其添加阴影效果

实现目标ListTile效果的修改方案

针对你遇到的三个问题,仅需在原有代码基础上做如下调整即可实现需求:

  • leading高度适配:ListTile默认内置了leading的尺寸约束,新增minLeadingWidth: 70匹配你的图片容器宽度,同时调整visualDensity和垂直内边距给70高度的图片预留足够空间,Flutter 3.10+版本也可以直接设置height: 90(可根据实际效果微调数值)确定ListTile整体高度。
  • trailing评分实现:直接在ListTile的trailing属性中嵌套Row布局,放入星星图标和评分文本即可。
  • 阴影效果优化:外层Container增加和ListTile一致的圆角配置,同时添加clipBehavior: Clip.antiAlias,避免阴影与圆角冲突出现直角异常。

修改后的完整代码如下:

Container(
  margin: const EdgeInsets.symmetric(vertical: 8.0),
  // 新增和ListTile一致的圆角
  borderRadius: BorderRadius.circular(defaultBorderRadiusCircular),
  // 新增裁剪属性
  clipBehavior: Clip.antiAlias,
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: const Color(0xFF7090B0).withOpacity(0.2),
        blurRadius: 20.0,
        offset: const Offset(0, 10.0),
      )
    ],
  ),
  child: ListTile(
    // 可根据需求调整整体高度,Flutter 3.10+支持
    height: 90,
    tileColor: kWhiteColor,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(defaultBorderRadiusCircular),
    ),
    // 调整内边距,垂直方向留足空间
    contentPadding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 10.0),
    // 匹配leading宽度,取消默认约束限制
    minLeadingWidth: 70,
    visualDensity: VisualDensity.comfortable,
    leading: Container(
      width: 70.0,
      height: 70.0,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(defaultBorderRadiusCircular),
        image: const DecorationImage(
          fit: BoxFit.cover,
          image: AssetImage('assets/image_destination6.png'),
        ),
      ),
    ),
    title: Text(
      'Danau Beretan',
      style: blackTextStyle.copyWith(
        fontSize: 18.0,
        fontWeight: medium,
      ),
    ),
    subtitle: Text(
      'Indonesia',
      style: greyTextStyle.copyWith(
        fontSize: 14.0,
        fontWeight: light,
      ),
    ),
    // 新增trailing评分布局
    trailing: Row(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Icon(Icons.star, color: Colors.amber, size: 20),
        SizedBox(width: 4),
        Text(
          '4.8',
          style: blackTextStyle.copyWith(fontSize: 16),
        )
      ],
    ),
  ),
),

内容的提问来源于stack exchange,提问作者caeruleum

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.05 00:09:01