草庐IT

flutter :在 TabBarView 中动态添加/删除选项卡

coder 2023-07-22 原文

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

我正在尝试使用具有 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？
  • 如果答案是肯定的，我该如何解决这个问题？

最佳答案

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 扩展以占用所有可用空间，这正是您首先希望通过使用 实现的标签 View 。 此外，它使您能够使用 PageView.builder 动态构建 Pages，这类似于 ListView.builder，方法是显式指定页数，以及在需要时构造每一页的机制。这将显着提高您的应用程序的性能。PageView 类还为您提供专业效果，例如著名电子书阅读器提供的效果，例如 PageSnapping 效果。

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

关于 flutter :在 TabBarView 中动态添加/删除选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55932007/

TabBarViewfluttercodesectiontabController

有关flutter :在 TabBarView 中动态添加/删除选项卡的更多相关文章

  1. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  2. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

  3. ruby - 我可以使用 Ruby 从 CSV 中删除列吗？ - 2

    查看Ruby的CSV库的文档，我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列，但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html

  4. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  5. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  6. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  7. ruby - 我可以使用 aws-sdk-ruby 在 AWS S3 上使用事务性文件删除/上传吗？ - 2

    我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后，每个操作都应在S3上回滚。S3Object这可能吗？？ 最佳答案 虽然S3API具有批量删除功能，但它不支持事务，因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST)，因此每个上传操作都是通过一个独立的API调用完成的

  8. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  9. ruby - 可以通过多少种方法将方法添加到 ruby​​ 对象？ - 2

    当谈到运行时自省(introspection)和动态代码生成时，我认为ruby​​没有任何竞争对手，可能除了一些lisp方言。前几天，我正在做一些代码练习来探索ruby​​的动态功能，我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角，因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资

  10. ruby - 如何在 Ruby 中向现有方法定义添加语句 - 2

    我注意到类定义，如果我打开classMyClass，并在不覆盖的情况下添加一些东西我仍然得到了之前定义的原始方法。添加的新语句扩充了现有语句。但是对于方法定义，我仍然想要与类定义相同的行为，但是当我打开defmy_method时似乎,def中的现有语句和end被覆盖了，我需要重写一遍。那么有什么方法可以使方法定义的行为与定义相同，类似于super，但不一定是子类？ 最佳答案 我想您正在寻找alias_method:classAalias_method:old_func,:funcdeffuncold_func#similartoca

随机推荐