PageView.builder会出现“给定水平视口的高度无限”的错误

Question

我很新手 flutter，正在学习如何创建视图。我尝试创建一个视图的单独文件（如果在flutter中称为小部件），然后只需从 main.dart 中调用它。

我有一个包含此代码的单独小部件

class PageEntryWidgetMain extends StatefulWidget {
  final PageViewEntryMain pageViewEntryMain;

  const PageEntryWidgetMain({Key key, this.pageViewEntryMain})
      : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _PageEntryWidgetMainState();
  }
}

class _PageEntryWidgetMainState extends State<PageEntryWidgetMain> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: <Widget>[
          Text(widget.pageViewEntryMain.title)
        ],
      ),
    );
  }
}

我正在尝试通过使用以下代码的视图翻页器来展示它

return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            PageView.builder(
              itemBuilder: (context, position) {
                PageEntryWidgetMain(
                  pageViewEntryMain: pages[position],
                );
              },
              itemCount: pages.length,
              scrollDirection: Axis.horizontal,
            )
          ],
        ),
      ),
    );

但是它给了我以下错误

• 水平视区高度未绑定。
• 视区在横轴上扩展以填充其容器，并约束其子元素在横轴上与其范围匹配。在这种情况下，水平视口被赋予了无限量的垂直空间来扩展。

我有点困惑它实际上在抱怨什么。通过使用此代码替换PageView.builder，我可以显示一个视图：

PageEntryWidgetMain(pageViewEntryMain: pages[0])

所以我认为，单独的widget本身并没有问题。问题可能出在我尝试使用ViewPager时导致了错误。

我一直在搜索PageView的实现，但是我没有看到一个真正具有分离视图以供调用显示的。我需要通过这种方式学习它，这样我就能够将视图分开而不仅仅是在一个文件中编写所有内容。

- Rick

Answer 1

PageView 不能直接作为 Column 的子节点。请将你的列添加一个Expanded，如下所示：

Column(
  children: <Widget>[
    Expanded(
      child: PageView.builder(),
    ),
  ]
)

为了解释这里发生的情况，Column 拥有无界水平宽度，也就是说它会在水平方向上持续扩展以适应其子部件所需的空间。PageView （以及任何其他可以水平滚动的小部件）需要水平约束条件才能使滚动逻辑正常工作。 Expanded 通过尽可能占据空间来限制 PageView 的水平大小，这应该可以解决问题。

- greyaurora

---

这是一个名为Expanded的小部件非常反直觉的行为。 - Kirill Karmazin

Answer 2

你可以使用任何具有固定高度和宽度的小部件来包装PageView。

例如，我使用Container()：

Column(
  children: <Widget>[
    Container(
      width: double.infinity,
      height: 100.0,
      child: PageView.builder(),
    ),
  ]
)

- tahaphuong

Answer 3

请注意，如果您的小部件树是 `SingleChildSrollView > Column > PageView`，

那么将 PageView 包裹在 Expanded 或 Flexible 中会导致 `RenderFlex children have non-zero flex but incoming height constraints are unbounded` 错误。

您可以使用 Container 作为包装器。

- Huỳnh Đức Bùi