如何修改Flutter代码解决水平压缩时的Render Overflow问题？

以下是针对你的代码的修改方案，解决界面水平压缩时的Render Overflow问题：

核心修改点 #

• 优化日期选择器内部布局：移除图标按钮的Expanded，避免图标占用不必要的宽度，让日期文本获得更多显示空间
• 添加文本溢出处理：给日期文本设置省略号，防止过长文本溢出
• 调整外层间距与图标区域布局：缩小固定间距，给右侧状态图标设置固定宽度，避免挤压日期区域
• 兜底滚动方案：可选为最外层Row添加水平滚动，极端窄屏时仍可正常查看

修改后的完整代码 #

Container(
  padding: EdgeInsets.fromLTRB(12, 20, 12, 2),
  child: SingleChildScrollView( // 可选：极端窄屏时允许水平滚动
    scrollDirection: Axis.horizontal,
    child: Row(
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: EdgeInsets.fromLTRB(0, 0, 0, 8),
                child: Text(
                  "Manufacturing Date",
                  style: TextStyle(
                    fontSize: 15.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.black,
                  ),
                ),
              ),
              Container(
                padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
                width: double.infinity,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey),
                  borderRadius: BorderRadius.circular(5.0),
                ),
                child: Row(
                  children: [
                    Expanded(
                      child: Text(
                        selectedDate,
                        style: TextStyle(color: Colors.black),
                        textAlign: TextAlign.left,
                        overflow: TextOverflow.ellipsis, // 添加文本溢出处理
                        maxLines: 1,
                      ),
                    ),
                    // 移除IconButton的Expanded，图标仅占用自身大小
                    IconButton(
                      onPressed: () => _selectManufacturingDate(context),
                      icon: Icon(Icons.calendar_today, color: Colors.blue),
                      padding: EdgeInsets.zero, // 移除默认padding节省空间
                      constraints: BoxConstraints(minWidth: 32, minHeight: 32), // 设置图标最小尺寸
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
        SizedBox(width: 12), // 缩小固定间距，减少宽度占用
        Expanded(
          flex: 1,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: EdgeInsets.fromLTRB(0, 0, 0, 8),
                child: Text(
                  "Expiry Date",
                  style: TextStyle(
                    fontSize: 15.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.black,
                  ),
                ),
              ),
              Container(
                width: double.infinity,
                padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey),
                  borderRadius: BorderRadius.circular(5.0),
                ),
                child: Row(
                  children: [
                    Expanded(
                      child: Text(
                        selectedDate2,
                        style: TextStyle(color: Colors.black),
                        textAlign: TextAlign.left,
                        overflow: TextOverflow.ellipsis, // 添加文本溢出处理
                        maxLines: 1,
                      ),
                    ),
                    // 移除IconButton的Expanded
                    IconButton(
                      onPressed: () => _selectExpiryDate(context),
                      icon: Icon(Icons.calendar_today, color: Colors.blue),
                      padding: EdgeInsets.zero,
                      constraints: BoxConstraints(minWidth: 32, minHeight: 32),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
        SizedBox(width: 12), // 缩小固定间距
        // 给状态图标设置固定宽度，避免挤压日期区域
        Container(
          width: 40,
          alignment: Alignment.center,
          child: Column(
            children: [
              if (manufacturingDate == null || expiryDate == null)
                Icon(Icons.remove, color: Colors.grey)
              else
                isProductValid
                    ? Icon(Icons.check_circle, color: Colors.green)
                    : Icon(Icons.cancel, color: Colors.red),
            ],
          ),
        ),
      ],
    ),
  ),
),

修改说明 #

1. 移除IconButton的Expanded：原来的Expanded会让图标占用日期容器一半宽度，移除后图标仅占用自身尺寸，日期文本可利用更多空间
2. 文本溢出处理：通过TextOverflow.ellipsis和maxLines:1，确保日期文本过长时自动显示省略号，不会溢出
3. 缩小固定间距：将原来的20px间距改为12px，减少不必要的宽度占用
4. 固定图标区域宽度：给右侧状态图标容器设置固定宽度，避免它在窄屏时挤压日期区域
5. 可选水平滚动：用SingleChildScrollView包裹最外层Row，极端窄屏时用户可横向滚动查看完整内容

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