#android #ios #flutter #gridview #overflow
#Android #iOS #прерывание #просмотр сетки #переполнение
Вопрос:
В моем приложении я поместил 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, но он выдает ту же ошибку, так что скажите мне, где я допустил ошибку в этом.
Ответ №1:
Просто оберните свой вид сетки расширенным виджетом, подобным этому
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),
),
),
),
);
},
),
),
),
)
Комментарии:
1. можете ли вы объяснить, почему мы переносим это в расширенный
2. Когда родительская высота или ширина не определены или не ограничены, и если его дочерняя высота / ширина больше высоты / ширины экрана, то flutter выдает исключение переполненного пикселя. Итак, в этом случае нам нужно обернуть этот дочерний элемент с помощью Expanded или Flexible. Эти виджеты занимают расширенную область для дочернего элемента. Пожалуйста, пройдите api.flutter.dev/flutter/widgets/Expanded-class.html для получения дополнительной информации.
Ответ №2:
Добавьте SingleChildScrollView выше Column , который будет прокручивать внутреннюю сетку, также добавит
физика: 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, bottom: 90, left: 10, right: 10),
child: GridView.count(
scrollDirection: Axis.vertical,
crossAxisCount: 3,
crossAxisSpacing: 5.0,
mainAxisSpacing: 5.0,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
children: List.generate(
20,
(index) {
return Padding(
padding: EdgeInsets.all(5.0),
child: Container(
padding: EdgeInsets.all(20.0),
height: 135.0,
width: 135.0,
decoration: BoxDecoration(
border: Border.all(
width: 1.0,
color: Color(0xFFF9AD16),
),
),
),
);
},
),
),
),
],
),
),
),
),
],
),
);
}
Примечание: Я заменил ресурсы изображения на container , поскольку у меня нет изображения
Вывод:
