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 после вставки нового предмета. Чтобы сделать это, вам нужно иметь доступ к PageController в вашем MyAppState.

Во-первых, я добавил новое поле в ваш 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);
});