Question

我还是Flutter的新手，并尝试创建以下布局：

我已将布局分为三个主要部分：

标题小部件（带有“此处标题”的小部件）
“信息文本”小部件（带有图标和“信息在此处”的小部件）文字）
包含按钮的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 Divider(height: 20.0, color: Theme.of(context).primaryColorDark,),
                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,
              text: "Overview",
              icon: Icons.ac_unit,
            ),
            BoxHQ(
              height: 100.0,
              text: "Overview",
              icon: Icons.ac_unit,
            ),
          ]
      );
  }
}

最后是我的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.

我尝试过但不起作用的事情：

从扩展框中的 listBoxHQ 类添加 GridView.count
在展开后的首页中添加容器的每个项目
将“主页”主列的每个子项添加到“展开的”中

仅当我用SizedBox和固定高度包装listBoxHQ的GridView.count时，它才起作用。 但是我无法做到这一点，因为我的按钮是动态的，我也不知道我可能拥有的按钮数量。

非常感谢您阅读所有内容，如果您能与我分享您的知识并帮助我解决此问题，我将非常感谢。

非常感谢，真的！

Answer 1

您应该在Gridview中添加以下两行代码：

shrinkWrap: true,   
physics: ClampingScrollPhysics(),

所以您的GridView应该看起来像这样：

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

Answer 2

在您的GridView.count中，使rinkeWrap为真。

......
return GridView.count(
    primary: false,
    shrinkWrap: true,
......

即使在展开时，也会导致“垂直视口被赋予无限高度”的Listview内的GridView

2 个答案: