Question

我想制作像应用程序这样的电子书，它的页面列表很长，我可以向左或向右滑动以转到下一页/上一页。因为我们将有成千上万的页面，并且页面的数量会根据书的长度而有所不同，所以从一开始就构建所有页面都是没有意义的。

我正在尝试使用具有3个初始页面（上一页-当前-下一页）的TabBarView，并在用户向左或向右滑动时动态添加和删除标签。

我在这里做了一个简化版：

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相比，有没有更好的方法使电子书滑动UI？
如果是，我该如何解决此问题？

Answer 1

与TabBarView相比，有没有更好的方法来制作此电子书滑动用户界面？

是的，有PageView小部件。

如果答案是肯定的，我该如何解决此问题？

PageView强制其每个子级或Pages扩展以占用所有可用空间，这是您首先要使用TabView来实现的。此外，通过显式指定页数，它还使您能够使用Pages快速构建PageView.builder，该操作类似于ListView.builder，并提供了在需要时构造每页的机制。这将大大提高应用程序的性能。PageView类还为您提供专业效果，例如著名的电子书阅读器提供的效果，例如PageSnapping效果。

如果您想构建自定义的PageView，则可以使用PageView.custom构造函数。

颤抖：在TabBarView中动态添加/删除标签页

1 个答案: