Flutter中如何设置PageView的初始页面?

Chr*_*ian 16 flutter flutter-layout flutter-pageview

我有一个PageView有四页的。我想从第三页开始。这意味着当用户向上滚动时有两页可用,当用户向下滚动时有一页可用。

我试过:

home: PageView(
   controller: MyPageController(),
   children: [Page1(), Page2(), Page3(), Page4()],
   scrollDirection: Axis.vertical,
),
Run Code Online (Sandbox Code Playgroud)

和:

class MyPageController extends PageController {
   @override
   int get initialPage => 3;
}
Run Code Online (Sandbox Code Playgroud)

不幸的是,这对我没有帮助。

Igo*_*din 27

PageController构造函数已命名参数initialPage。您可以使用它,只需在构建函数之外的某处创建控制器:

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  PageController controller;

  @override
  void initState() {
    super.initState();
    controller = PageController(initialPage: 3);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: PageView(
            controller: controller,
            children: [
              for (var i = 0; i < 4; i++)
                Text('test $i')
            ],
            scrollDirection: Axis.vertical,
          )
        )
      ),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

  • 你不应该在无状态小部件中使用这样的“PageController”!您必须确保正确处置它。只需查看使用“StatefulWidget”的完整示例的文档 https://api.flutter.dev/flutter/widgets/PageController-class.html (3认同)

Bik*_*ram 12

对我来说,PageControllerwith的初始化initialPage不适用于大量页面。我还注意到,如果您想直接登陆到所需的页面,则有滚动动画,这是不可取的。

我用了以下

  PageController _pageViewController = PageController();

  @override
  void initState() {
    super.initState();
  }

  @override
  void didChangeDependencies() {
    
    WidgetsBinding.instance.addPostFrameCallback((_) {

      if (_pageViewController.hasClients)
        _pageViewController.jumpToPage(3);

    });

    super.didChangeDependencies();
  }

Run Code Online (Sandbox Code Playgroud)

  • 当无法使用“initialPage”时,这是正确的答案。通常当列表被网络响应(异步)填充并且您想要首先显示 N 页时。 (2认同)

Chy*_*erX 5

您需要设置初始页面,例如,

PageController _controller = PageController(initialPage: 3);
Run Code Online (Sandbox Code Playgroud)