Flutter容器宽度控制问题：容器过小且与其他容器重叠

问题分析 #

你遇到的容器重叠问题核心原因有两个：

1. 第一个容器使用固定宽度660.0，在不同屏幕尺寸下无法适配，容易和下方占满屏幕宽度的容器产生重叠。
2. 下方Table的列宽依赖data.size.width * 0.1，结合水平滚动布局，会导致滚动区域宽度计算异常，进一步加剧重叠问题。

解决方案及代码修改 #

1. 修复上方Serial Number容器的宽度适配

移除固定宽度，改用自适应布局，同时简化嵌套结构：

Container(
  margin: EdgeInsets.only(top: 5, left: 10, right: 10),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
        width: 90.0,
        height: 40.0,
        alignment: Alignment.centerLeft,
        child: Text(
          "Serial Number",
          style: TextStyle(color: Colors.black),
        ),
      ),
      SizedBox(height: 5),
      Container(
        width: double.infinity,
        height: 30.0,
        decoration: BoxDecoration(
          color: Colors.grey[200],
          borderRadius: BorderRadius.circular(2.0),
        ),
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 15, vertical: 2),
          child: TextFormField(
            decoration: const InputDecoration(
              border: InputBorder.none,
            ),
          ),
        ),
      ),
    ],
  ),
),

2. 修复下方表格的滚动与宽度问题

将Table的列宽改为固定值，避免依赖屏幕宽度，同时优化布局嵌套：

Container(
  width: double.infinity,
  margin: EdgeInsets.only(top: 1),
  child: Scrollbar(
    isAlwaysShown: true,
    child: SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            alignment: Alignment.center,
            height: 40,
            width: 306,
            decoration: BoxDecoration(
              border: Border.all(width: 1.0, color: Colors.grey),
              color: Colors.grey[600],
            ),
            child: Text('1', style: TextStyle(color: Colors.white)),
          ),
          Table(
            defaultColumnWidth: FixedColumnWidth(100.0),
            border: TableBorder.all(width: 1.0, color: Colors.grey[500]),
            children: [
              TableRow(
                children: ["A", "B", "C", "D"]
                    .map((label) => Container(
                          height: 40,
                          color: Colors.black,
                          alignment: Alignment.center,
                          child: Text(
                            label,
                            style: TextStyle(color: Colors.white),
                          ),
                        ))
                    .toList(),
              ),
              ...this.rowList.map((row) {
                return TableRow(
                  children: ["valueA", "valueB", "valueC", "valueD"]
                      .map((label) => Container(
                            color: Colors.white,
                            padding: EdgeInsets.symmetric(vertical: 4),
                            child: TextFormField(
                              initialValue: row['1'][label],
                              onChanged: (value) {
                                row['1'][label] = value;
                                updateDetails();
                              },
                              cursorColor: Colors.grey,
                              keyboardType: TextInputType.text,
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                isDense: true,
                                contentPadding: EdgeInsets.symmetric(horizontal: 4, vertical: 4),
                              ),
                              style: TextStyle(fontSize: 14),
                            ),
                          ))
                      .toList(),
                );
              }).toList(),
            ],
          ),
          Container(
            alignment: Alignment.center,
            height: 40,
            width: 306,
            decoration: BoxDecoration(
              border: Border.all(width: 1.0, color: Colors.grey),
              color: Colors.grey[600],
            ),
            child: Text('2', style: TextStyle(color: Colors.white)),
          ),
          Table(
            defaultColumnWidth: FixedColumnWidth(100.0),
            border: TableBorder.all(width: 1.0, color: Colors.grey[500]),
            children: [
              TableRow(
                children: ["A", "B", "C", "D"]
                    .map((label) => Container(
                          height: 40,
                          color: Colors.black,
                          alignment: Alignment.center,
                          child: Text(
                            label,
                            style: TextStyle(color: Colors.white),
                          ),
                        ))
                    .toList(),
              ),
              ...this.rowList.map((row) {
                return TableRow(
                  children: ["valueA", "valueB", "valueC", "valueD"]
                      .map((label) => Container(
                            color: Colors.white,
                            padding: EdgeInsets.symmetric(vertical: 4),
                            child: TextFormField(
                              initialValue: row['2'][label],
                              onChanged: (value) {
                                row['2'][label] = value;
                                updateDetails();
                              },
                              cursorColor: Colors.grey,
                              keyboardType: TextInputType.text,
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                isDense: true,
                                contentPadding: EdgeInsets.symmetric(horizontal: 4, vertical: 4),
                              ),
                              style: TextStyle(fontSize: 14),
                            ),
                          ))
                      .toList(),
                );
              }).toList(),
            ],
          ),
        ],
      ),
    ),
  ),
),

关键修改说明 #

• 移除固定宽度：改用double.infinity让容器自适应父布局，避免固定值导致的适配问题。
• 简化布局嵌套：去掉多余的Row和Center组件，用alignment属性直接控制对齐，减少层级。
• 固定Table列宽：避免依赖屏幕宽度计算列宽，确保水平滚动区域宽度稳定，不会与上方容器重叠。
• 优化字号：替换data.size.width * 0.016为固定字号，避免小屏幕下字体过小。

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