颤动中 TabView 的动态子项 [英] Dynamic children for TabView in flutter

问题描述

我正在尝试构建一个将列表作为子项的选项卡式视图.

I'm trying to build a Tabbed View that has lists as children.

类别标签和列表内容都将从数据库中获取.

Both the Category labels and the lists content will be fetched from a database.

我正在从调用者页面传递标签并成功地将它们作为列表传递.现在我正在尝试加载我的列表，并且我已经构建了一个可成功返回 Future ListView 的小部件 (myList).

I am passing the labels from the caller page and successfully passing them as a List. Now I'm trying to load my lists, and I have built a Widget (myList) that returns successfully a Future ListView.

问题有两个:

1. 每次我向左或向右滑动时，列表都会自行重建，而我希望它只构建一次
2. 如何使用我制作的代码让标签的子项实际反映标签并根据我拥有的类别数量动态加载?

现在我的代码是这样的:

Right now my code is this:

import 'package:flutter/material.dart';
import 'package:flutter_app/ui/menu_category_list.dart';

// Each TabBarView contains a _Page and for each _Page there is a list
// of _CardData objects. Each _CardData object is displayed by a _CardItem.

List<Tab> Tabs(List<String> l){
  List<Tab> list;
  for (String c in l) {
    list.add(new Tab(text: c));
  }
  return list;
}



class TabsDemo extends StatelessWidget {

  const TabsDemo({ Key key , this.categorie}) : super(key: key);

  final List<Tab> categorie;

  @override
  Widget build(BuildContext ctxt) {
    return new MaterialApp(
      title: "Nice app",
      home: new DefaultTabController(
      length: 5,
      child: new Scaffold(
        appBar: new AppBar(
          title: new Text("Title"),
          bottom: new TabBar(
            tabs:
              categories,
              //new Tab(text: "First Tab"),
              //new Tab(text: "Second Tab"),

          ),

        ),
        body: new TabBarView(
            children: [
              new MenuCategoryList(),
              new MenuCategoryList(),
              new MenuCategoryList(),
              new MenuCategoryList(),
              new MenuCategoryList()
            ]
        )
      ),
    )
    );
  }
}

当前结果

先谢谢了

推荐答案

您可以使用 List.generate 来实现这一点.

You can use List<E>.generate to achieve this.

import 'package:flutter/material.dart';

假设您有一组从呼叫者页面传递过来的类别.假设这是您的类别列表.

Say you have a set of categories passed from your caller page. And let's say this is your list of categories.

List<String> categories = ["a", "b", "c", "d", "e", "f", "g", "h"];

然后你可以做这样的事情来实现你的愿望.

Then you can do something like this to achieve what you desire.

class TabsDemo extends StatefulWidget {
  @override
  _TabsDemoState createState() => _TabsDemoState();
}

class _TabsDemoState extends State<TabsDemo> {
  TabController _controller;

  @override
  void initState() {
    super.initState();
  }

    @override
    Widget build(BuildContext ctxt) {
      return new MaterialApp(
        home: DefaultTabController(
            length: categories.length,
            child: new Scaffold(
              appBar: new AppBar(
                title: new Text("Title"),
                bottom: new TabBar(
                  isScrollable: true,
                    tabs: List<Widget>.generate(categories.length, (int index){
                  print(categories[0]);
                  return new Tab(icon: Icon(Icons.directions_car), text: "some random text");

                }),

              ),
            ),

        body: new TabBarView(
             children: List<Widget>.generate(categories.length, (int index){
                print(categories[0]);
                return new Text("again some random text");

             }),
          )
       ))
      );
  }

您还可以将不同的小部件设置为选项卡的视图.您可以创建一个页面列表并遵循相同的方法.

You can also set different set of widgets as the Tab's view. You can create a list of pages and follow the same method.

这篇关于颤动中 TabView 的动态子项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！