Flutter中的SingleChildScrollView内部的Column不会滚动。
Flutter中的SingleChildScrollView内部的Column不会滚动。
当我尝试在SingleScrollChildView中使用Card时,我遇到了以下错误:\n在布局过程中抛出了以下断言:\nRenderFlex在底部溢出了178像素。\n相关错误引起的小部件是:\n Column file:///C:/Users/emirs/AndroidStudioProjects/view_met/lib/home.dart:197:16\n溢出的RenderFlex的方向为Axis.vertical。\n溢出的RenderFlex边缘在渲染中被标记为黄色和黑色的条纹模式。这通常是由于内容超出了RenderFlex的大小所致。\n考虑应用弹性系数(例如使用Expanded小部件),以强制RenderFlex的子项适应可用空间,而不是按照其自然大小进行调整。\n这被认为是错误条件,因为它表示存在无法查看的内容。如果内容确实比可用空间大,请在放入弹性容器之前使用ClipRect小部件进行裁剪,或者使用可滚动的容器而不是Flex,如ListView。\n问题中特定的RenderFlex是:RenderFlex#d861f relayoutBoundary=up2 OVERFLOWING\n...需要合成\n...parentData:offset=Offset(0.0, 0.0)(可以使用size)\n...约束:BoxConstraints(0.0<=w<=411.4, 0.0<=h<=820.6)\n...大小:Size(411.4, 820.6)\n...方向:垂直\n...mainAxisAlignment:start\n...mainAxisSize:max\n...crossAxisAlignment:center\n...verticalDirection:down\n◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤\n
\n这是我的代码:\nPadding(\n padding: EdgeInsets.fromLTRB(0, 20, 0, 0),\n child: Column(\n children:
\n这是builder()
函数:\nbuilder(String id) {\n return FutureBuilder(\n future: fetchData(id),\n builder: (BuildContext context, snapshot) {\n if (snapshot.connectionState == ConnectionState.waiting) {\n return Padding(\n padding: EdgeInsets.fromLTRB(0, 20, 0, 0),\n child: CircularProgressIndicator(),\n );\n }\n var data = jsonDecode(snapshot.data.toString());\n var leading;\n var artist;\n if (data[\"primaryImageSmall\"] == \"\") {\n leading = Icon(Icons.dangerous);\n }\n else {\n leading = Image.network(data[\"primaryImageSmall\"]);\n }\n if (data[\"artistDisplayName\"]== \"\") {\n artist = \"未知\";\n }\n else {\n artist = data[\"artistDisplayName\"];\n }\n return Card(\n clipBehavior: Clip.antiAlias,\n child: Column(\n children: [\n ListTile(\n leading: leading,\n title: Text(data[\"title\"]),\n subtitle: Text(\n \"由$artist创作\",\n style: TextStyle(color: Colors.black.withOpacity(0.6)),\n ),\n ),\n ButtonBar(\n alignment: MainAxisAlignment.start,\n children: [\n TextButton(\n onPressed: () {\n Navigator.push(\n context,\n MaterialPageRoute(builder: (context) => DetailsPage()),\n );\n },\n child: Text(\"详情\", style: TextStyle(color: Color(0xFF6200EE))),\n ),\n TextButton(\n onPressed: () {\n Navigator.push(\n context,\n MaterialPageRoute(builder: (context) => DetailsPage()),\n );\n },\n child: Text(\"添加到收藏夹\", style: TextStyle(color: Color(0xFF6200EE))),\n ),\n ],\n ),\n ],\n ),\n );\n },\n );\n }\n
\n这是结果:\n\n我也看了其他的问题,但它们都没有真正帮助我,也没有我想要的答案。我真的不知道现在该怎么办。如果需要,我可以提供更多信息。
在上面的代码中,问题出现在使用了一个Column作为SingleChildScrollView的child。由于Column默认会占满整个屏幕高度,所以SingleChildScrollView无法生效,导致无法滚动。
要解决这个问题,可以使用Expanded包裹Column,使其在垂直方向上占满剩余空间,然后再将Expanded作为SingleChildScrollView的child。这样就可以实现滚动效果。
下面是修改后的代码:
Padding(
padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
child: Stack(
children: [
Align(
alignment: Alignment.topCenter,
child: Text("Random Items You Could Like", style: GoogleFonts.merriweather(fontSize: 18, color: Colors.black)),
),
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Expanded(
child: Column(
children:
Column(
children:
builder(randint1.toString()),
builder(randint2.toString()),
builder(randint3.toString()),
builder(randint4.toString()),
builder(randint5.toString()),
],
),
],
),
),
),
],
),
)
通过上述修改,现在Column会根据内容的高度来动态调整自身的高度,这样SingleChildScrollView就可以正常滚动了。
在这个问题中,出现了一个使用Flutter的SingleChildScrollView无法滚动的问题。原因是使用SingleChildScrollView的方式不正确。解决方法是将SingleChildScrollView和scrollDirection移除,并将其用于包装以下部分的代码:
Column(
children:
builder(randint1.toString()),
builder(randint2.toString()),
builder(randint3.toString()),
builder(randint4.toString()),
builder(randint5.toString()),
],
)
修改后的代码如下:
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children:
builder(randint1.toString()),
builder(randint2.toString()),
builder(randint3.toString()),
builder(randint4.toString()),
builder(randint5.toString()),
],
),
)
这样就能正确地使用SingleChildScrollView并实现滚动效果。
问题的原因是在Flutter中,当将一个Column放在SingleChildScrollView中时,Column的高度会被限制为屏幕的高度,因此如果Column的内容超过了屏幕的高度,就无法滚动。
解决方法是将SingleChildScrollView包裹在Expanded组件中,Expanded组件会将SingleChildScrollView的高度设置为尽可能大的值,这样就可以实现滚动了。
具体的代码如下:
Column(
children: [
// ...
Expanded(
child: SingleChildScrollView(),
),
],
),
这个解决方法是从另一个问题中找到的,链接为:stackoverflow.com/a/52801899/12920146