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.
我正在从呼叫者页面传递标签,并成功地将它们作为列表传递. 现在,我正在尝试加载列表,并且构建了一个小部件(myList),该小部件成功返回了Future ListView.
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.
问题有两个:
- 每次我向左或向右滑动时,列表都会自动重建,而我只希望一次构建一次.
- 我如何使用我制作的使标签的子代实际反映标签的代码,并根据我拥有的类别将其动态加载?
现在我的代码是这样:
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<E>.generate
来实现.
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屋!