Flutter布局修复：单卡片横向滚动，其余卡片适配屏幕显示

问题描述 #

现有代码运行后，黄色Card内的表格文本"Long text"被挤压换行，需实现：

• 黄色Card内的表格支持横向滚动，完整显示8列内容
• 两张蓝色Card完全适配屏幕，无需滚动即可查看全部内容

当前效果：

期望效果：

解决方案 #

核心思路是给黄色Card内的表格添加横向滚动容器，使用SingleChildScrollView并设置scrollDirection: Axis.horizontal，让表格超出屏幕宽度时可横向滚动，同时外层的纵向滚动不影响蓝色Card的适配。

修改关键代码 #

将黄色Card内的表格容器外层包裹SingleChildScrollView：

/// Detailed payscale table
SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Container(
    alignment: Alignment.centerLeft,
    decoration: BoxDecoration(
        border: Border.all(color: Colors.blueAccent)
    ),
    padding: EdgeInsets.all(0.0),
    child: Table(
        // 表格原有代码保持不变
    ),
  ),
),

完整修改后代码 #

class ItemDetails extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Test Page"),
      ),
      body: SingleChildScrollView(
        child: Container(
          margin: const EdgeInsets.all(10.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Card(
                color: Colors.yellow.shade200,
                elevation: 4.0,
                child: Column(
                  children: [
                    ListTile(
                      title: Text("Card 1",
                        style: TextStyle(color: Colors.black, decoration: TextDecoration.underline, fontWeight: FontWeight.w700),
                      ),
                      trailing: IconButton(
                          onPressed: () async {
                            await goToWebPage("https://www.google.com");
                          },
                          icon: Icon(Icons.edit)
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.all(0.0),
                      alignment: Alignment.centerLeft,
                      child: Table(
                        columnWidths: const <int, TableColumnWidth>{
                          0: FlexColumnWidth(),
                          1: IntrinsicColumnWidth(),
                        },
                        children: []
                      ),
                    ),
                    /// Detailed payscale table
                    SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: Container(
                        alignment: Alignment.centerLeft,
                        decoration: BoxDecoration(
                            border: Border.all(color: Colors.blueAccent)
                        ),
                        padding: EdgeInsets.all(0.0),
                        child: Table(
                          columnWidths: const <int, TableColumnWidth>{
                            0: IntrinsicColumnWidth(),
                            1: IntrinsicColumnWidth(),
                            2: IntrinsicColumnWidth(),
                            3: IntrinsicColumnWidth(),
                            4: IntrinsicColumnWidth(),
                            5: IntrinsicColumnWidth(),
                            6: IntrinsicColumnWidth(),
                            7: IntrinsicColumnWidth(),
                            8: IntrinsicColumnWidth(),
                            9: IntrinsicColumnWidth(),
                            10: IntrinsicColumnWidth(),
                            11: IntrinsicColumnWidth(),
                            12: IntrinsicColumnWidth(),
                            13: IntrinsicColumnWidth(),
                            14: IntrinsicColumnWidth(),
                            15: IntrinsicColumnWidth(),
                            16: IntrinsicColumnWidth()
                          },
                          children: [
                            TableRow(
                              children: [
                                TableCell(
                                  child: Text("Column",
                                      style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                  ),
                                ),
                                TableCell(
                                  child: SizedBox(
                                    width: 10.0,
                                    height: 1.0,
                                  )
                                ),
                                TableCell(
                                  child: Text("1",
                                      style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                  ),
                                ),
                                TableCell(
                                  child: SizedBox(
                                    width: 10.0,
                                    height: 1.0,
                                  )
                                ),
                                TableCell(
                                  child: Text("2",
                                      style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                  ),
                                ),
                                TableCell(
                                  child: SizedBox(
                                    width: 10.0,
                                    height: 1.0,
                                  )
                                ),
                                TableCell(
                                  child: Text("3",
                                      style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                  ),
                                ),
                                TableCell(
                                  child: SizedBox(
                                    width: 10.0,
                                    height: 1.0,
                                  )
                                ),
                                TableCell(
                                  child: Text("4",
                                      style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                  ),
                                ),
                                TableCell(
                                  child: SizedBox(
                                    width: 10.0,
                                    height: 1.0,
                                  )
                                ),
                                TableCell(
                                  child: Text("5",
                                      style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                  ),
                                ),
                                TableCell(
                                  child: SizedBox(
                                    width: 10.0,
                                    height: 1.0,
                                  )
                                ),
                                TableCell(
                                  child: Text("6",
                                      style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                  ),
                                ),
                                TableCell(
                                  child: SizedBox(
                                    width: 10.0,
                                    height: 1.0,
                                  )
                                ),
                                TableCell(
                                  child: Text("7",
                                      style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                  ),
                                ),
                                TableCell(
                                  child: SizedBox(
                                    width: 10.0,
                                    height: 1.0,
                                  )
                                ),
                                TableCell(
                                  child: Text("8",
                                      style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                  ),
                                )
                              ]
                            ),
                            TableRow(
                              children: [
                                TableCell(
                                  child: Text("Row",
                                      style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                  ),
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text(""),
                                )
                              ]
                            ),
                            TableRow(
                              children: [
                                TableCell(
                                  child: Text("1",
                                      style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                  ),
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text("Long text",
                                      style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
                                  )
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text("Long text",
                                      style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
                                  )
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text("Long text",
                                      style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
                                  )
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text("Long text",
                                      style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
                                  )
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text("Long text",
                                      style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
                                  )
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text("Long text",
                                      style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
                                  )
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text("Long text",
                                      style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
                                  )
                                ),
                                TableCell(
                                  child: Text(""),
                                ),
                                TableCell(
                                  child: Text("Long text",
                                      style: data?['ddet'] == data?['dlastupd'] ? TextStyle(color: Colors.red, fontWeight: FontWeight.w700): TextStyle(color:Colors.black)
                                  )
                                )
                              ]
                            ),
                          ]
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Card(
                color: Colors.blue.shade200,
                elevation: 4.0,
                child: Column(
                  children: [
                    ListTile(
                      title: Text("Card 2",
                        style: TextStyle(color: Colors.black, decoration: TextDecoration.underline, fontWeight: FontWeight.w700),
                      ),
                      trailing: IconButton(
                          onPressed: () async {
                            await goToWebPage("https://www.google.com");
                          },
                          icon: Icon(Icons.edit)
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.all(0.0),
                      alignment: Alignment.centerLeft,
                      child: Table(
                        columnWidths: const <int, TableColumnWidth>{
                          0: FlexColumnWidth(),
                          1: IntrinsicColumnWidth(),
                        },
                        children: [
                          TableRow(
                            children: [
                              TableCell(
                                child: Text("Sub Title",
                                    style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                ),
                              ),
                              TableCell(
                                child: Text("")
                              )
                            ]
                          ),
                          TableRow(
                            children: [
                              TableCell(
                                child: Text("Short text",
                                )
                              ),
                              TableCell(
                                child: Text("")
                              )
                            ]
                          )
                        ]
                      ),
                    ),
                  ],
                )
              ),
              Card(
                color: Colors.blue.shade200,
                elevation: 4.0,
                child: Column(
                  children: [
                    ListTile(
                      title: Text("Card 3",
                        style: TextStyle(color: Colors.black, decoration: TextDecoration.underline, fontWeight: FontWeight.w700),
                      ),
                      trailing: IconButton(
                          onPressed: () async {
                            await goToWebPage("https://www.google.com");
                          },
                          icon: Icon(Icons.edit)
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.all(0.0),
                      alignment: Alignment.centerLeft,
                      child: Table(
                        columnWidths: const <int, TableColumnWidth>{
                          0: FlexColumnWidth(),
                          1: IntrinsicColumnWidth(),
                        },
                        children: [
                          TableRow(
                            children: [
                              TableCell(
                                child: Text("Sub Title",
                                    style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700)
                                ),
                              ),
                              TableCell(
                                child: Text("")
                              )
                            ]
                          ),
                          TableRow(
                            children: [
                              TableCell(
                                child: Text("Short text",
                                )
                              ),
                              TableCell(
                                child: Text("")
                              )
                            ]
                          )
                        ]
                      ),
                    ),
                  ],
                )
              ),
            ]
          ),
        ),
      ),
    );
  }
}

效果说明 #

• 黄色Card内的表格可横向滚动，完整显示所有列内容，文本不再挤压换行
• 外层SingleChildScrollView保持页面纵向滚动能力
• 蓝色Card内容自动适配屏幕宽度，无需额外滚动即可查看全部内容

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