加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

dart – ListView内部的GridView导致“垂直视口被赋予无限高度”

发布时间:2020-12-14 14:50:38 所属栏目:百科 来源:网络整理
导读:我还是Flutter的新手,并尝试创建以下布局: 我将布局分为3个主要组件: 标题小部件(具有“标题在此处”的小部件) Info Text小部件(带有Icon和“Info Goes Here”的小部件) 文本) GridView包含按钮 ---这个导致了问题 这是我的Main.dart: import 'package:fl
我还是Flutter的新手,并尝试创建以下布局:

eLayout Of What I'm trying to achieve

我将布局分为3个主要组件:

>标题小部件(具有“标题在此处”的小部件)
> Info Text小部件(带有Icon和“Info Goes Here”的小部件)
文本)
> GridView包含按钮< ---这个导致了问题
这是我的Main.dart:

import 'package:flutter/material.dart';
import 'package:ifp_poc/Screens/Home.dart';
import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;

void main() {
//  debugPaintSizeEnabled = true;
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: new ThemeData(
        brightness: Brightness.light,primaryColor: Colors.blue,primaryColorLight: Colors.white,primaryColorDark: Colors.black,platform: Theme.of(context).platform,),title: "POC",home: new Home(),);
  }
}

这是我的家庭班:

import 'package:flutter/material.dart';
import 'package:ifp_poc/Components/ifp/listBoxHQ.dart';
import 'package:ifp_poc/Components/ifp/infoHQ.dart';
import 'package:ifp_poc/Components/ifp/titleHQ.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: new Column(
        mainAxisSize: MainAxisSize.min,children: <Widget>[
          new TitleHQ(
            logoAsset: "assets/images/HQ-LOGO.png",title: "Hospitality Qatar",subTitle: "06-08 Nov 2018",info: "3:00 PM - 9:00 PM",url: "http://www.ifpexpo.com",new Container(
            padding: EdgeInsets.only(top: 15.0,left: 26.0,right: 26.0),child: new Column(
              mainAxisSize: MainAxisSize.min,children: <Widget>[
                new InfoHQ(text: "Qatar's Premiere International Hospitlaity & Horeca Trade Show",new Divider(height: 20.0,color: Theme.of(context).primaryColorDark,new InfoHQ(text: "Doha Exhibition & Convention Centre (DECC)",icon: Icons.location_on,new ListBoxHQ()
              ],)

        ],);
  }
}

这是我的listBoxHQ()类:

import 'package:flutter/material.dart';
import 'package:ifp_poc/Components/ifp/boxHQ.dart';

class ListBoxHQ extends StatefulWidget {
  @override
  _ListBoxHQState createState() => _ListBoxHQState();
}

class _ListBoxHQState extends State<ListBoxHQ> {
  @override
  Widget build(BuildContext context) {

    return GridView.count(
          primary: false,crossAxisSpacing: 5.0,crossAxisCount: 3,children: <Widget>[
            BoxHQ(
              height: 100.0,text: "Overview",icon: Icons.ac_unit,BoxHQ(
              height: 100.0,]
      );
  }
}

最后我的BoxHQ类:

import 'package:flutter/material.dart';

class BoxHQ extends StatefulWidget {
  final double height;
  final IconData icon;
  final String text;

  BoxHQ({Key key,@required this.height,@required this.icon,@required this.text}): super(key: key);

  @override
  _BoxHQState createState() => _BoxHQState();
}

class _BoxHQState extends State<BoxHQ> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: widget.height,width: double.infinity,padding: EdgeInsets.all(5.0),margin: EdgeInsets.all(7.0),decoration:  new BoxDecoration(
        borderRadius: new BorderRadius.all(const Radius.circular(10.0)),color: Colors.red,child: Column( // Replace with a Row for horizontal icon + text
        children: <Widget>[
          Icon(widget.icon == null? Icons.info : widget.icon,color: Theme.of(context).primaryColorLight,size: 50.0,new Padding(padding: EdgeInsets.symmetric(vertical: 5.0)),Text(widget.text,style: new TextStyle(color: Theme.of(context).primaryColorLight,fontSize: 20.0),],);
  }
}

问题(TLDR):

运行上面的代码时,我收到以下错误:

I/Choreographer( 6979): Skipped 35 frames!  The application may be doing too much work on its main thread.
D/EGL_emulation( 6979): eglMakeCurrent: 0xa6cac080: ver 2 0 (tinfo 0x970aa0c0)
I/flutter ( 6979): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 6979): The following assertion was thrown during performResize():
I/flutter ( 6979): Vertical viewport was given unbounded height.
I/flutter ( 6979): Viewports expand in the scrolling direction to fill their container.In this case,a vertical
I/flutter ( 6979): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 6979): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter ( 6979): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter ( 6979): there will always be enough vertical space for the children. In this case,consider using a Column
I/flutter ( 6979): instead. Otherwise,consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter ( 6979): the height of the viewport to the sum of the heights of its children.

我尝试过但没有用的东西:

>从Expanded中的listBoxHQ类添加GridView.count
>在Expanded中添加来自Home的Container的每个项目
>在Expanded中添加Home的主列的每个子项

它只在我用一个SizedBox和固定高度包装GridBox.cQ的listBoxHQ时才有用.但我无法做到这一点,因为我的按钮是动态的,我不知道我可能有多少按钮.

我无法感谢你阅读所有内容,如果你能与我分享你的知识并帮助我解决这个问题,我将非常感激.

非常感谢,真实!

解决方法

您应该在Gridview中添加这两行代码:

shrinkWrap: true,physics: ClampingScrollPhysics(),

所以你的GridView应该是这样的:

return GridView.count(
          shrinkWrap: true,primary: false,]
      );

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读