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

Question

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

如何更改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
          },
        );
      }),
    );
  }