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

Question

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

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

Answer 1

您可以通过 PageController

控制在 PageView 中显示多少个页面。

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

然后将其传递给您的 PageView ：

PageView(
  controller: controller,
  ...
), 

Answer 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
          },
        );
      }),
    );
  }