我GridView在我的Flutter应用程序中用于显示图像及其标题。请检查以下代码。
GridView
Flutter
import 'package:flutter/material.dart'; import '../common_ui/search_bar.dart'; class PurchaseProductsPage extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return PurchaseProductsUI(); } } class PurchaseProductsUI extends StatefulWidget { @override State<StatefulWidget> createState() { // TODO: implement createState return _PurchaseProductUIState(); } } class _PurchaseProductUIState extends State<PurchaseProductsUI> { @override Widget build(BuildContext context) { // TODO: implement build return ListView( children: <Widget>[ Container( margin: EdgeInsets.all(20), child: SearchBar(), ), Container( margin: EdgeInsets.all(20), child: GridView.builder( physics: ScrollPhysics(), // to disable GridView's scrolling shrinkWrap: true, itemCount: 20, gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2), itemBuilder: (BuildContext context, int index) { return Container( padding: EdgeInsets.all(5), child: _buildImageBoxes()); })), ], ); } Widget _buildImageBoxes() { return Column( children: <Widget>[ Container( child: Image.network("https://picsum.photos/200/300/?random"), ), Container( padding: EdgeInsets.all(10), child: Text("Text"), ) ], ); } }
运行上面的代码时出现以下错误和UI
I/flutter ( 2743): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter ( 2743): The following message was thrown during layout: I/flutter ( 2743): A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): The overflowing RenderFlex has an orientation of Axis.vertical. I/flutter ( 2743): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and I/flutter ( 2743): black striped pattern. This is usually caused by the contents being too big for the RenderFlex. I/flutter ( 2743): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the I/flutter ( 2743): RenderFlex to fit within the available space instead of being sized to their natural size. I/flutter ( 2743): This is considered an error condition because it indicates that there is content that cannot be I/flutter ( 2743): seen. If the content is legitimately bigger than the available space, consider clipping it with a I/flutter ( 2743): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, I/flutter ( 2743): like a ListView. I/flutter ( 2743): The specific RenderFlex in question is: I/flutter ( 2743): RenderFlex#4a1bb OVERFLOWING I/flutter ( 2743): creator: Column ← Padding ← Container ← RepaintBoundary-[<14>] ← IndexedSemantics ← I/flutter ( 2743): NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← SliverGrid ← I/flutter ( 2743): MediaQuery ← SliverPadding ← ShrinkWrappingViewport ← ⋯ I/flutter ( 2743): parentData: offset=Offset(5.0, 5.0) (can use size) I/flutter ( 2743): constraints: BoxConstraints(w=150.0, h=150.0) I/flutter ( 2743): size: Size(150.0, 150.0) I/flutter ( 2743): direction: vertical I/flutter ( 2743): mainAxisAlignment: start I/flutter ( 2743): mainAxisSize: max I/flutter ( 2743): crossAxisAlignment: center I/flutter ( 2743): verticalDirection: down I/flutter ( 2743): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤ I/flutter ( 2743): ════════════════════════════════════════════════════════════════════════════════════════════════════ I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. Reloaded 0 of 446 libraries in 1,179ms.
下面是UI
我该如何解决?
尝试在_buildImageBoxes()函数中使用扩展而不是容器
Widget _buildImageBoxes() { return Column( children: <Widget>[ Expanded( child: Image.network("https://picsum.photos/500/500/?random"), ), Container( padding: EdgeInsets.all(10), child: Text("Text"), ) ], ); }