在Flutter中出现“水平视口给定了无限高度”的错误。

Question

13 浏览2023年1月21日

匿名的 2023年1月21日

0 Comments

我试图在一个容器中放置一个带有水平GridView子项的ExpansionTile。代码如下所示。我收到错误消息“水平视口的高度未确定。”

我不想明确指定ExpansionTile或GridView的高度，而是希望它从Expanded小部件和GridView的子项中计算得出。

我尝试在GridView中设置'shrinkWrap: true'，如这里建议的，但没有成功。我还尝试根据这个答案中的建议，将GridView包装在Flexible中，但是我收到错误消息“RenderFlex的子项具有非零flex，但传入的高度约束是未确定的。”

我认为问题出在我如何使用GridView上，但我对Flutter还是很陌生，不太确定。以下是我的代码：

import 'package:flutter/material.dart';


void main() => runApp(
  MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text("Title")),
      body: Column(
        children: [
          Expanded(
            flex: 3,
            child: ExpansionTile(
              title: Text("可展开项"),
              children: [
                GridView.count(
                  scrollDirection: Axis.horizontal,
                  crossAxisCount: 2,
                  children: [
                    RawChip(label: Text("你好")),
                    RawChip(label: Text("世界")),
                  ],
                ),
              ],
            ),
          ),
          Expanded(
            flex: 7,
            child: Container(
              color: Colors.blue
            ),
          ),
        ],
      ),
    ),
  ),
);

0

1 答案

匿名的 · Answer 1 · 2023-08-09T11:32:50+00:00

在Flutter中，当使用GridView组件时，有时会出现"Horizontal viewport was given unbounded height"的错误。这个错误的出现原因是GridView没有明确的高度约束。

为了解决这个问题，我们可以为GridView添加一个高度约束。可以使用SizedBox组件来设置GridView的高度，如下所示：


ExpansionTile(
  title: Text("Expandable"),
  children: [
    SizedBox(
      height: 200.0,
      child: GridView.count(
        scrollDirection: Axis.horizontal,
        crossAxisCount: 2,
        children: [
          RawChip(label: Text("Hello")),
          RawChip(label: Text("World")),
        ],
      ),
    ),
  ],
),

通过在SizedBox中设置一个具体的高度（例如200.0），我们为GridView提供了一个明确的高度约束，从而解决了"Horizontal viewport was given unbounded height"错误。