时间戳

首页 > 解决方案 > 颤振：在 TabBarView 中动态添加/删除选项卡

flutter - 颤振：在 TabBarView 中动态添加/删除选项卡

问题描述

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

我正在尝试使用带有 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(),
      ),
    );   } }

我的意图是

但它不会添加或删除页面，滑动后我只有tab1、2、3。

我的问题是

标签： flutter

解决方案

有没有比 TabBarView 更好的方法来制作这本电子书的滑动 UI？

是的，有PageView小部件。

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

PageView强制其每个子级或Pages扩展以占用所有可用空间，这是您首先想要通过使用TabView. 此外，它使您能够Pages使用PageView.builder类似于ListView.builder通过显式指定页数以及在需要时构造每个页的机制来构建动态。这将显着提高您的应用程序的性能。PageView类还为您提供专业的效果，就像著名的电子书阅读器提供的PageSnapping效果一样。

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

推荐阅读