Flutter ListTile的trailing组件占满宽度引发商品列表页白屏如何解决

ListTile的trailing属性有默认宽度限制，你代码中trailing使用的Row默认会尽可能拉伸占满全部可用宽度，超出了ListTile给trailing分配的宽度阈值，触发布局报错导致白屏。

有两种常用修复方式：

方案1：为Row设置最小主轴尺寸（推荐） #

给Row添加mainAxisSize: MainAxisSize.min属性，让Row仅包裹子控件的实际宽度，不会强行占满可用空间，修改后的完整代码如下：

import 'package:flutter/material.dart';

class UserProductItem extends StatelessWidget {
  final String title;
  final String imageUrl;
  UserProductItem(this.title, this.imageUrl);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(title),
      leading: CircleAvatar(
        backgroundImage: NetworkImage(imageUrl),
      ),
      trailing: Row(
        // 新增此行配置
        mainAxisSize: MainAxisSize.min,
        children: [
          IconButton(
            icon: Icon(Icons.edit),
            onPressed: () {},
            color: Theme.of(context).primaryColor,
          ),
          IconButton(
            icon: Icon(Icons.delete),
            onPressed: () {},
            color: Theme.of(context).errorColor,
          )
        ],
      ),
    );
  }
}

方案2：为trailing设置固定宽度 #

给Row外层套一个SizedBox指定固定宽度，明确告知ListTile trailing需要占用的宽度：

trailing: SizedBox(
  // 宽度可根据实际布局需求调整
  width: 100,
  child: Row(
    children: [
      IconButton(
        icon: Icon(Icons.edit),
        onPressed: () {},
        color: Theme.of(context).primaryColor,
      ),
      IconButton(
        icon: Icon(Icons.delete),
        onPressed: () {},
        color: Theme.of(context).errorColor,
      )
    ],
  ),
)

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