我正在尝试扩展作为答案提出的 TabView here 。
具体来说,我想要有类别标签,而不是灰点,并将与该类别相对应的小部件作为选项卡内容加载。
我尝试遵循文档,但如果我更改 AppBar 中的某些内容,它只会给我一个重新渲染错误。
最佳答案
您可以通过DefaultTabController
小部件实现您想要的。你可以看例子here仅包含图标。这是带有标题的修改版本。 TabBar
部分用于选项卡及其规范。 TabBarView
用于内部 View 。
class TabBarDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car), text: "Car",),
Tab(icon: Icon(Icons.directions_transit), text: "Transit"),
Tab(icon: Icon(Icons.directions_bike), text: "Bike",),
],
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
);
}
}
如果您使用上面的代码,您将获得一个带有解释性文本的 3 个选项卡式选项卡 View 。
编辑:
//Call the widget as follows
new TabBarDemo(createTabsDynamically());
//method to use for dynamic creation.
List<Tab> createTabsDynamically() {
List<String> titles = ["Car", "Transit", "Bike"];
List<IconData> iconData = [Icons.directions_car, Icons.directions_transit, Icons.directions_bike];
List<Tab> tabs = new List();
// Assuming titles and icons have the same length
for (int i = 0; i< titles.length; i++) {
tabs.add(Tab(icon: Icon(iconData[i]), text: titles[i],));
}
return tabs;
}
class TabBarDemo extends StatelessWidget {
List<Tab> tabs;
TabBarDemo(this.tabs);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: tabs,
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
);
}
}
关于android-studio - Flutter中向TabView添加选项卡标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51124651/