Флаттер: динамическое добавление/удаление вкладок в TabBarView

Я хотел бы сделать электронную книгу как приложение с очень длинным списком страниц, и я могу провести пальцем влево или вправо, чтобы перейти к следующей/предыдущей странице. Поскольку у нас будут тысячи страниц, а количество страниц может варьироваться в зависимости от длины книги, не имеет смысла создавать все страницы в начале.

Я пытаюсь использовать TabBarView с 3 начальными страницами (предыдущая - текущая - следующая страницы) и динамически добавлять и удалять вкладки всякий раз, когда пользователь проводит пальцем влево или вправо.

Я сделал упрощенную версию здесь:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyTabbedPage(),
    );   } }

class MyTabbedPage extends StatefulWidget {   const MyTabbedPage({Key key}) : super(key: key);

  @override   _MyTabbedPageState createState() => new
_MyTabbedPageState(); }

class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin {   int num = 4;   final List<Tab> myTabs = <Tab>[
    new Tab(text: '1'),
    new Tab(text: '2'),
    new Tab(text: '3'),   ];

  TabController _tabController;

  @override   void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: myTabs.length, initialIndex: 1);
    _tabController.addListener(_handleTabChange);   }

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

  void _handleTabChange() {
    myTabs.add(new Tab(text: num.toString()));
    myTabs.removeAt(0);
    _tabController.animateTo(1);   }

  @override   Widget build(BuildContext context) {
    return new Scaffold(
      body: new TabBarView(
        controller: _tabController,
        children: myTabs.map((Tab tab) {
          return new Center(child: new Text(tab.text));
        }).toList(),
      ),
    );   } }

Мое намерение здесь заключается в том, что

  • начальные табы: 1, 2, 3
  • после свайпа вправо выполняется _handleTabChange, добавляется tab4, удаляется tab1, animateTo tab3, поэтому конечный результат — 2, 3, 4 -> текущая страница — tab3

Но он не добавляет и не удаляет страницы, у меня есть только tab1, 2, 3 после свайпа.

мой вопрос

  • Есть ли лучший способ сделать этот пользовательский интерфейс для электронной книги, чем TabBarView?
  • Если ответ да, как я могу решить эту проблему?
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
2 120
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Is there a better way to make this ebook swipe UI than TabBarView?

да, там виджет PageView.

If the answer is yes, how can I fix this issue?

PageView заставляет каждого из своих дочерних элементов или Pages расширяться, чтобы занять все доступное пространство, чего вы и хотели добиться в первую очередь с помощью TabView. Кроме того, это дает вам возможность создавать Pages на лету, используя PageView.builder, который похож на ListView.builder, явно указывая количество страниц и механизм создания каждой из них при необходимости. Это значительно повысит производительность вашего приложения. PageView класс также предоставляет вам профессиональные эффекты, подобные тем, которые предоставляются известными программами для чтения электронных книг, например эффект PageSnapping.

Если вы хотите создать индивидуальный PageView, вы можете использовать конструктор PageView.custom.

Другие вопросы по теме