如何让一张卡片超出屏幕滚动，而另外两张卡片保持在屏幕边界内？

Question

下面的代码创建第一个屏幕截图。问题是黄卡被压扁了 - 字符串“长文本”应该保留在一行上，并且用户应该能够向右滚动以查看所有 14 列。请您告诉我如何解决这个问题，同时又不会导致蓝卡变宽？ （用户应该能够看到所有的每张蓝色卡片，而无需滚动） - 就像第二张图片一样。

感谢您的帮助:-)

N

class ItemDetails extends StatelessWidget {  
            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
                                      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("")
                                                    )
                                                  ]
                                              )
                                            ]
                                        ),
                                      ),
                                    ],
                                  )
                              ),
                              
                              // text
                            ]
                        )
                    )
                )
            );
          }
          },
    );
  }
}

Answer 1

用

SingleChildScrollView

包裹表格，使表格可水平滚动：

Card(
 child: SingleChildScrollView(
       scrollDirection: Axis.horizontal,
       child: YourTable(),
  ),
 )

注意：您应该为该卡提供高于

SingleChildScrollView

的固有高度