android 修好分辨率,android – Flutter：如何修复“像素溢出的R...

我在我的Flutter应用程序中使用GridView来显示图像及其标题.请检查以下代码.

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 createState() {

// TODO: implement createState

return _PurchaseProductUIState();

}

}

class _PurchaseProductUIState extends State {

@override

Widget build(BuildContext context) {

// TODO: implement build

return ListView(

children: [

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: [

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 ← 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.

以下是用户界面

我怎么解决这个问题？