Flutter中如何复用仅颜色存在差异的ListTile组件？

这问题太常见啦！你说的copyWith()用不了很正常——因为你要改的颜色是外层Container的装饰色，不是ListTile本身的属性，ListTile.copyWith()只能复制它自己的内部属性，碰不到外层的Container。

最直接优雅的解决方式是把这个组件封装成自定义Widget，把可变的颜色作为参数传入，这样在ListView.builder里只需根据判断逻辑传不同颜色就行，完美复用代码。

第一步：封装自定义组件 #

我们把你的代码提取成一个可复用的Widget，接收两个核心参数：消息数据（假设你的消息是Message类型）和组件的背景色：

class CustomMessageTile extends StatelessWidget {
  final Message message;
  final Color tileColor;

  const CustomMessageTile({
    super.key,
    required this.message,
    required this.tileColor,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 8),
        decoration: BoxDecoration(
          color: tileColor, // 这里用传入的颜色参数
          borderRadius: BorderRadius.circular(12),
        ),
        child: Padding(
          padding: const EdgeInsets.fromLTRB(0, 0, 8.0, 0),
          child: ListTile(
            title: Text(message.title),
            subtitle: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(message.name),
                Row(
                  children: <Widget>[
                    const Icon(
                      Icons.alarm_on,
                      color: Colors.redAccent,
                      size: 16,
                    ),
                    Text(message.time),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

第二步：在ListView.builder中使用 #

现在你可以在列表构建器里，根据你的判断逻辑（比如message.isRead或者其他业务条件），传入不同的颜色：

ListView.builder(
  itemCount: messages.length,
  itemBuilder: (context, index) {
    final message = messages[index];
    // 根据你的业务逻辑判断颜色
    final tileColor = message.isUnread ? Colors.red[300] : Colors.grey[300];
    
    return CustomMessageTile(
      message: message,
      tileColor: tileColor!,
    );
  },
)

额外小技巧 #

如果以后还需要修改其他可变属性（比如圆角大小、内边距），直接给自定义Widget加参数就行，扩展性超强！比如想让圆角也可配置，只需给CustomMessageTile加个double borderRadius参数并设置默认值为12，这样不影响原有使用的同时，又能灵活调整。

内容的提问来源于stack exchange，提问作者landiayung