如何自定义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
相关产品推荐
相关产品推荐

