问题描述
在我的应用中，我将gridview.count放在列小部件中，但是gridview.count不会滚动并在底部显示溢出，因此请提出一些建议
这是我的代码
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Image.asset(
"images/background.png",height: MediaQuery.of(context).size.height,width: MediaQuery.of(context).size.width,fit: BoxFit.fill,),Scaffold(
backgroundColor: Color(0x00000000),body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[
Container(
child: Padding(
padding: EdgeInsets.only(top: 50,bottom: 10),child: Row(
children: <Widget>[
Spacer(flex: 2),Text(
'Interests',textAlign: TextAlign.center,overflow: TextOverflow.ellipsis,maxLines: 1,style: TextStyle(
color: Color(0xFF0066CB),fontSize: 20.0,Spacer(),Expanded(
child:SvgPicture.asset(
"images/vector.svg",height: 30.0,width: 30.0,)
],Padding(
padding: EdgeInsets.only(top: 10,bottom: 90,left: 10,right: 10),child: GridView.count(
scrollDirection: Axis.vertical,crossAxisCount: 3,crossAxisspacing: 5.0,mainAxisspacing: 5.0,shrinkWrap: true,children: List.generate(20,(index) {
return Padding(
padding: EdgeInsets.all(5.0),child: Container(
child: SvgPicture.asset(
"images/register_top_logo_new.svg",padding: EdgeInsets.all(20.0),height: 135.0,width: 135.0,decoration: Boxdecoration(
border: Border.all(
width: 1.0,color: Color(0xFFF9AD16),);
},],);
}
这是我运行该应用程序时得到的日志
I/Flutter (16748): The relevant error-causing widget was:
I/Flutter (16748): Column
I/Flutter (16748): file:///C:/Users/mayur/AndroidStudioProjects/Flutter/webinar-mobile/lib/activities/interests_activity.dart:30:22
I/Flutter (16748):
I/Flutter (16748): The overflowing RenderFlex has an orientation of Axis.vertical.
I/Flutter (16748): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/Flutter (16748): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/Flutter (16748): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/Flutter (16748): RenderFlex to fit within the available space instead of being sized to their natural size.
I/Flutter (16748): This is considered an error condition because it indicates that there is content that cannot be
I/Flutter (16748): seen. If the content is legitimately bigger than the available space,consider clipping it with a
I/Flutter (16748): ClipRect widget before putting it in the flex,or using a scrollable container rather than a Flex,I/Flutter (16748): like a ListView.
I/Flutter (16748): The specific RenderFlex in question is: RenderFlex#42dda relayoutBoundary=up5 OVERFLOWING:
I/Flutter (16748): needs compositing
I/Flutter (16748): creator: Column ← Center ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ←
I/Flutter (16748): CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
I/Flutter (16748): _InkFeatures-[GlobalKey#417d7 ink renderer] ← NotificationListener<LayoutChangednotification> ←
I/Flutter (16748): PhysicalModel ← ⋯
I/Flutter (16748): parentData: offset=Offset(0.0,0.0) (can use size)
I/Flutter (16748): constraints: BoxConstraints(0.0<=w<=360.0,0.0<=h<=640.0)
I/Flutter (16748): size: Size(360.0,640.0)
I/Flutter (16748): direction: vertical
I/Flutter (16748): mainAxisAlignment: start
I/Flutter (16748): mainAxisSize: max
I/Flutter (16748): crossAxisAlignment: center
I/Flutter (16748): verticalDirection: down
I/Flutter (16748): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/Flutter (16748): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/Flutter (16748): unhandled element Metadata; Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#bcd18(),name: "images/register_top_logo_new.svg",colorFilter: null)
所以在这里gridview.count不会滚动，我尝试使用gridview.builder但它给出了同样的错误，所以请告诉我我在哪里出错了。
解决方法
只需使用这样的扩展小部件包装您的网格视图
Expanded(
child: Padding(
padding: EdgeInsets.only(top: 10,bottom: 90,left: 10,right: 10),child: GridView.count(
scrollDirection: Axis.vertical,crossAxisCount: 3,crossAxisSpacing: 5.0,mainAxisSpacing: 5.0,shrinkWrap: true,children: List.generate(20,(index) {
return Padding(
padding: EdgeInsets.all(5.0),child: Container(
child: SvgPicture.asset(
"images/register_top_logo_new.svg",),padding: EdgeInsets.all(20.0),height: 135.0,width: 135.0,decoration: BoxDecoration(
border: Border.all(
width: 1.0,color: Color(0xFFF9AD16),);
},)
在SingleChildScrollView上方添加Column，这将滚动内部GridView并添加
物理学：NeverScrollableScrollPhysics()，在内部
GridView.count(
//.... existing code
physics: NeverScrollableScrollPhysics(),）
之所以会这样，是因为Column和Gridview都占据了屏幕的全部高度，因此这里应该停止滚动。因此，对于NeverScrollableScrollPhysics，我们告诉GridView不要滚动，以便父窗口小部件可以滚动。
代码：
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("ListView Sample"),body: Stack(
children: <Widget>[
Image.asset(
"images/background.png",height: MediaQuery.of(context).size.height,width: MediaQuery.of(context).size.width,fit: BoxFit.fill,Scaffold(
backgroundColor: Color(0x00000000),body: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[
Container(
child: Padding(
padding: EdgeInsets.only(top: 50,bottom: 10),child: Row(
children: <Widget>[
Spacer(flex: 2),Text(
'Interests',textAlign: TextAlign.center,overflow: TextOverflow.ellipsis,maxLines: 1,style: TextStyle(
color: Color(0xFF0066CB),fontSize: 20.0,Spacer(),Expanded(
child: Container(
height: 30.0,width: 30.0,)
],Padding(
padding: EdgeInsets.only(
top: 10,child: GridView.count(
scrollDirection: Axis.vertical,physics: NeverScrollableScrollPhysics(),children: List.generate(
20,(index) {
return Padding(
padding: EdgeInsets.all(5.0),child: Container(
padding: EdgeInsets.all(20.0),decoration: BoxDecoration(
border: Border.all(
width: 1.0,);
},],);
}
注意：由于我没有图片，我用container替换了图片素材资源
输出：
