我在 GridView 中输入了几张卡片。但滚动条不起作用。有一个黄黑色条纹框，其中包含消息“屏幕底部溢出了 129 像素。
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 50.0),
child : Chip(
label : Text("Topics", style: TextStyle(color : Colors.white, fontSize: 25), textAlign: TextAlign.center,),
avatar: CircleAvatar(
child: Icon(Icons.clear_all, color: Colors.white,),
backgroundColor: Colors.blue[800],
),
backgroundColor: Colors.blue[800],
),
),
GridView.extent(
padding: EdgeInsets.all(10.0),
maxCrossAxisExtent: 200.0,
shrinkWrap: true,
physics: ScrollPhysics(),
primary: true,
children: <Widget>[
Card(
child : Container(
constraints: new BoxConstraints.expand(height: 0.3*screenHeight, width: 0.395*screenWidth),
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("background/music.jpg"),
fit: BoxFit.fitWidth
),
),
child: Stack(children: <Widget>[
Positioned(
left:0.0, bottom: 0.0,
child: Padding(
padding: EdgeInsets.only(left: 5.0, bottom: 5.0),
child: Text("#music", style: TextStyle(color: Colors.cyan[900] ,fontSize: 25.0, decorationStyle: TextDecorationStyle.wavy)),
)
),
Positioned(
right:0.0, top: 0.0,
child: IconButton(icon: Icon(Icons.favorite_border), onPressed: (){int x =0;},),
)
]
)
)
),
Card(
child : Container(
constraints: new BoxConstraints.expand(height: 0.3*screenHeight, width: 0.395*screenWidth),
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("background/sports.jpg"),
fit: BoxFit.fitWidth
),
),
child: Stack(children: <Widget>[
Positioned(
left:0.0, bottom: 0.0,
child: Padding(
padding: EdgeInsets.only(left: 5.0, bottom: 5.0),
child: Text("#sports", style: TextStyle(color: Colors.cyan[900] ,fontSize: 25.0, decorationStyle: TextDecorationStyle.wavy)),
)
),
Positioned(
right:0.0, top: 0.0,
child: IconButton(icon: Icon(Icons.favorite_border), onPressed: (){int x =0;},),
)
]
)
)
),
Card(
child : Container(
constraints: new BoxConstraints.expand(height: 0.3*screenHeight, width: 0.395*screenWidth),
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("background/business.jpg"),
fit: BoxFit.fitWidth
),
),
child: Stack(children: <Widget>[
Positioned(
left:0.0, bottom: 0.0,
child: Padding(
padding: EdgeInsets.only(left: 5.0, bottom: 5.0),
child: Text("#entrepreneurship", style: TextStyle(color: Colors.cyan[900] ,fontSize: 25.0, decorationStyle: TextDecorationStyle.wavy)),
)
),
Positioned(
right:0.0, top: 0.0,
child: IconButton(icon: Icon(Icons.favorite_border), onPressed: (){int x =0;},),
)
]
)
)
),
Card(
child : Container(
constraints: new BoxConstraints.expand(height: 0.3*screenHeight, width: 0.395*screenWidth),
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("background/tech.jpg"),
fit: BoxFit.fitWidth
),
),
child: Stack(children: <Widget>[
Positioned(
left:0.0, bottom: 0.0,
child: Padding(
padding: EdgeInsets.only(left: 5.0, bottom: 5.0),
child: Text("#technology", style: TextStyle(color: Colors.cyan[900] ,fontSize: 25.0, decorationStyle: TextDecorationStyle.wavy)),
)
),
Positioned(
right:0.0, top: 0.0,
child: IconButton(icon: Icon(Icons.favorite_border), onPressed: (){int x =0;},),
)
]
)
)
),
Card(
child : Container(
constraints: new BoxConstraints.expand(height: 0.3*screenHeight, width: 0.395*screenWidth),
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("background/health.png"),
fit: BoxFit.fitWidth
),
),
child: Stack(children: <Widget>[
Positioned(
left:0.0, bottom: 0.0,
child: Padding(
padding: EdgeInsets.only(left: 5.0, bottom: 5.0),
child: Text("#health", style: TextStyle(color: Colors.cyan[900] ,fontSize: 25.0, decorationStyle: TextDecorationStyle.wavy)),
)
),
Positioned(
right:0.0, top: 0.0,
child: IconButton(icon: Icon(Icons.favorite_border), onPressed: (){int x =0;},),
)
]
)
)
),
],
)
],
);
}
这是输出:
......
此外，错误消息是这样的: 在 Debug模式下在 SM N900 上启动 lib\main.dart... 构建 build\app\outputs\apk\debug\app-debug.apk。 I/flutter(6092):══╡渲染库捕获异常╞═══════════════════════════ ═══════ ═══════════════════════ I/flutter(6092):布局期间抛出以下消息: I/flutter (6092):RenderFlex 底部溢出 129 像素。 I/flutter ( 6092):溢出的 RenderFlex 的方向为 Axis.vertical。 I/flutter ( 6092):溢出的 RenderFlex 边缘已在渲染中用黄色和 I/flutter (6092):黑色条纹图案。这通常是由于内容对于 RenderFlex 来说太大造成的。 I/flutter ( 6092):考虑应用弹性因子(例如使用 Expanded 小部件)来强制 I/flutter ( 6092):RenderFlex 适合可用空间，而不是调整其自然大小。 I/flutter (6092):这被认为是错误情况，因为它表明存在无法读取的内容 我/flutter (6092):见过。如果内容确实大于可用空间，请考虑使用 I/flutter ( 6092) :在将 ClipRect 小部件放入 Flex 中之前，或者使用可滚动容器而不是 Flex， I/flutter (6092):像 ListView。 I/flutter ( 6092):有问题的具体 RenderFlex 是: I/flutter ( 6092): RenderFlex#7ae00 relayoutBoundary=up1 溢出 I/flutter ( 6092): 创建者:列 ← TopicsPage ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← I/flutter ( 6092): CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← I/flutter ( 6092): _InkFeatures-[GlobalKey#2b99c 墨迹渲染器] ← 通知监听器 ← I/flutter (6092): 物理模型 ← 动画物理模型 ← ⋯ 我/flutter (6092):parentData:offset=Offset(0.0，81.0)； id=_ScaffoldSlot.body(可以使用大小) I/flutter(6092):约束:BoxConstraints(0.0<=w<=360.0，0.0<=h<=499.0) I/flutter (6092):尺寸:尺寸(360.0，499.0) I/flutter (6092):方向:垂直 I/flutter(6092):mainAxisAlignment:开始 I/flutter (6092):mainAxisSize:最大 I/flutter(6092):crossAxisAlignment:拉伸(stretch) I/flutter ( 6092): 垂直方向: 向下 我/flutter (6092):◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤ ◢◤◢◤◢◤◢ ◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢ ◤◢◤◢◤◢◤◢◤◢ ◤◢◤◢◤◢◤ 我/flutter (6092):════════════════════════════════════ ═══════ ════════════════════════════════════════ ══════════ ═══════ V/ActivityThread( 6092): updateVisibility : ActivityRecord{223f48d5 token=android.os.BinderProxy@24aeb760 {com.example.reachoutkefglobal/com.example.reachoutkefglobal.MainActivity}} 显示: true 与设备的连接丢失。 退出(sigterm)
最佳答案
它不会滚动，因为它被包装到不可滚动的 Column 中，而错误是因为 Column 包含无法在屏幕上显示的内容，因为它不滚动。
对于您的设计，您需要将所有内容包装到 ListView 中，并使用 physicals: NeverScrollableScrollPhysics() 使 GridView 不可滚动。
在当前代码中，您可以将 Column 替换为 ListView。
关于android - gridview.extent 不会在 flutter 中滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54498319/