PageView - 在插入新项目时保留页面/更改索引

Question

向列表添加新项目时，PageView 索引保持不变，但项目 随着索引的变化，我想避免这种行为。

更详细地说，这些新项目被插入到列表的乞求中。

有没有办法保留当前页面或将索引更改为正确的页面以使页面保持不变？

下面的代码只是这个问题的一个简单实现。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

class MyAppState extends State<MyApp> {
  List<String> pagesText = List.generate(10, (int index) => 'INDEX :: $index');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.add),
              onPressed: () {
                setState(() {
                  pagesText.insert(0, 'INDEX :: ${pagesText.length + 1}');
                });
              },
            ),
          ],
        ),
        body: MyPageViewBuilder(pages: pagesText),
      ),
    );
  }
}

class MyPageViewBuilder extends StatelessWidget {
  final PageController pageController = PageController(keepPage: true);

  final List<String> pages;

  MyPageViewBuilder({this.pages});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: PageView.builder(
        controller: pageController,
        itemCount: pages.length,
        onPageChanged: (int index) {
          print('PageChanged $index');
        },
        itemBuilder: (BuildContext context, int index) {
          return Center(
            key: ValueKey(pages[index]),
            child: Text(pages[index]),
          );
        },
      ),
    );
  }
}

Answer 1

您需要在插入新项目后致电PageController.jumpToPage。不过，要做到这一点，您需要在您的MyAppState 中访问PageController。

首先，我在MyPageViewBuilder 及其构造函数中添加了一个新字段，并删除了旧的pageController 字段：

// (...)
final PageController pageController;

MyPageViewBuilder({this.pages, this.pageController});
// (...)

然后，我将其添加到您的MyAppState：

final pageController = PageController(keepPage: true);

在onPressed，我打电话给PageController.jumpToPage：

setState(() {
  pagesText.insert(0, 'INDEX :: ${pagesText.length + 1}');
  pageController.jumpToPage(pageController.page.round() + 1);
});