如何使用 PageView 显示多个页面？答案

【问题标题】：How to display more than one page with PageView?如何使用 PageView 显示多个页面？
【发布时间】：2019-03-26 10:58:04
【问题描述】：

我有一个使用 PageView 的应用，我想让它具有响应性——例如在平板电脑上，它显示 3 个页面，而在智能手机上，它只显示一个：

如何更改 PageView 中显示的页数？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

你可以通过一个PageController

来控制一个PageView中显示多少页

var controller = PageController(viewportFraction: 1 / 3);

然后将其传递给您的PageView：

PageView(
  controller: controller,
  ...
),

【讨论】：

这似乎只适用于视口 1/3，但不适用于 1/2，因为它在中心显示一页，在左侧显示半页，在右侧显示另一半。有没有办法让 2 个整页并排显示？

【解决方案2】：

您必须使用 LayoutBuilder 来检查最大宽度，然后您可以相应地设置 PageController(viewportFraction: );。

这是一个例子：

  PageController pageController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(builder: (context, constrains) {
        if (constrains.maxWidth < 600) {
          pageController = PageController(viewportFraction: 1.0);
        } else {
          pageController = PageController(viewportFraction: 0.3);
        }
        return PageView.builder(
          controller: pageController,
          itemCount: places.length,
          itemBuilder: (context, index) {
            // return your view for pageview
          },
        );
      }),
    );
  }

【讨论】：

【解决方案3】：

对已接受答案的一些补充：如果您想显示两个或其他偶数页，请使用 padEnds: false

          PageView.builder(
            controller: PageController(
              viewportFraction: 1/2,
            ),
            padEnds: false,
            itemCount: ...,
            itemBuilder: (context, index) {
              return ...;
            },
          );

【讨论】：

【解决方案4】：

PageView.builder(
        controller: PageController(
          viewportFraction: 0.8,
        ),
        padEnds: false,
        itemCount: ...,
        itemBuilder: (context, index) {
          return ...;
        },
      );

为我工作

【讨论】：