flutter 如何垂直滚动一个高的行
flutter 如何垂直滚动一个高的行
我想使以下的行可滚动：
Row(
children: [
Expanded(
flex: 1,
child: timeColumn, // 时间列表
),
dayColumn("Monday", "03-09-2002"), // 星期一的信息，以此类推
dayColumn("Tuesday", "03-10-2002"),
dayColumn("Wednesday", "03-11-2002"),
dayColumn("Thursday", "03-12-2002"),
dayColumn("Friday", "03-13-2002"),
dayColumn("Saturday", "03-14-2002"),
dayColumn("Sunday", "03-15-2002"),
],
)
我创建了一个dartpad来展示这段代码的效果：
https://dartpad.dev/16547cbb0f37ac52299c1dd1d11c262e
要看到溢出的问题，您可以将代码中的这部分设置为"太大"，会导致底部溢出：
/////////////////////////////////////////////////////////// double rowHeight = 50; // <-- 更改此处以设置行高 ///////////////////////////////////////////////////////////
我使用了一个行小部件，因为日期和排班信息将包含在每天一个对象中，所以我希望将数据保持为一行列。（所以，我认为listView是行不通的）
我尝试使用SingleChildScrollView( child: Row( .... 但是，我仍然遇到了溢出的情况。
我觉得现在是使用LayoutBuilder + BoxConstraints + ConstrainedBox的好时机，如此链接所示：
那么，使一行变得可滚动的最佳方法是什么？
问题出现的原因是原始的行高超出了可视区域，导致无法垂直滚动。解决方法是将行放入一个有限高度的容器中，并将容器放入SingleChildScrollView中。以下是代码解决方法的示例：
Container(
height: 50,
child: SingleChildScrollView(
child: Row(
children: [
Expanded(
flex: 1,
child: timeColumn,
),
dayColumn("Monday", "03-09-2002"),
dayColumn("Tuesday", "03-10-2002"),
dayColumn("Wednesday", "03-11-2002"),
dayColumn("Thursday", "03-12-2002"),
dayColumn("Friday", "03-13-2002"),
dayColumn("Saturday", "03-14-2002"),
dayColumn("Sunday", "03-15-2002"),
],
),
),
)
这段代码将原始的行包装在一个高度为50的Container中，并将Container放入SingleChildScrollView中，以实现垂直滚动。这样，即使行的高度超过了可视区域，用户仍然可以通过滚动来查看整个行的内容。