赋予“水平”视口的PageView.builder被赋予了无限的高度错误

时间:2019-03-13 09:47:21

标签: dart flutter flutter-layout

我刚起步,我正在尝试学习如何创建视图。我试图为视图创建一个单独的文件,或者如果它在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])

因此,我认为单独的窗口小部件本身没有问题。可能与我试图使用给我带来错误的ViewPager有关。

我一直在搜索PageView的实现,但是我还没有看到实际上有一个单独的视图可以调用显示的视图。我需要以这种方式学习它,这样我才能分离视图,而不仅仅是将它们全部写入一个文件中。

2 个答案:

答案 0 :(得分:0)

PageView不能是Column的直接子级。更改列以在两者之间添加Expanded,如下所示:

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

为解释这里发生的情况,Column具有无限的水平宽度,即它将继续水平扩展以占用孩子所需的空间。 PageView(以及任何其他水平滚动小部件)需要水平约束才能使滚动逻辑正常工作。

Expanded通过占用尽可能多的空间来限制PageView的水平尺寸,这应该可以解决问题。

答案 1 :(得分:0)

您可以使用具有固定高度和宽度的任何Widget 包装PageView

例如,我使用Container()

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