在Flutter选项栏的活动选项卡中添加自定义小部件

Question

我需要一个TabBar和TabView，如https://flutter.dev/docs/cookbook/design/tabs所述，但有一个转折:我需要ACTIVE选项卡来显示一个额外的，自定义的小部件。

如果用户切换到不同的选项卡，我需要自定义小部件从以前的活动选项卡中消失，并在新活动选项卡上出现一个新的自定义小部件。

另一种解释方式:所有选项卡都需要托管我的自定义小部件的实例，但是自定义小部件应该隐藏在除了活动选项卡之外的所有选项卡上。

请问如何实现?

多谢

Answer 1

这都是关于状态管理的。我使用AnimatedBuilder和TabController做了一个示例，但您可以自定义以满足您的需求。

请记住:以声明的方式思考，这将帮助您使用任何业务逻辑创建任何类型的屏幕。

步骤:

• 获取当前索引
• 监听当前索引在所有选项卡上的变化
• 验证选项卡索引是否为当前选择的索引
  • 如果是，呈现自定义小部件
  • 否则，忽略，不要构建任何东西

Dartpad联系

import 'package:flutter/material.dart';
void main() {
runApp(const TabBarDemo());
}
class TabBarDemo extends StatefulWidget {
const TabBarDemo({Key? key}) : super(key: key);
@override
_TabBarDemoState createState() => _TabBarDemoState();
}
class _TabBarDemoState extends State<TabBarDemo>
with SingleTickerProviderStateMixin {
late final TabController _controller;
@override
void initState() {
super.initState();
_controller = TabController(length: 3, vsync: this, initialIndex: 0);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
bottom: TabBar(
controller: _controller,
tabs: [
Tab(
child: AnimatedBuilder(
animation: _controller,
builder: (context, chiild) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.directions_car),
if (_controller.index == 0) const MyCustomWidget(),
],
);
},
),
),
Tab(
child: AnimatedBuilder(
animation: _controller,
builder: (context, chiild) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.directions_transit),
if (_controller.index == 1) const MyCustomWidget(),
],
);
},
),
),
Tab(
child: AnimatedBuilder(
animation: _controller,
builder: (context, chiild) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.directions_bike),
if (_controller.index == 2) const MyCustomWidget(),
],
);
},
),
),
],
),
title: const Text('Tabs Demo'),
),
body: TabBarView(
controller: _controller,
children: const [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
);
}
}
class MyCustomWidget extends StatelessWidget {
const MyCustomWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
child: const Text('Your CustomWidget'),
);
}
}

Answer 2

Tab( )widget可以容纳任何widget，而不仅仅是Text和icon

首先，您需要确定选择了哪个选项卡。

然后，您需要执行"if"(?)来决定显示哪个小部件。

使用以下代码:

int selectedTab=1;
TabBar(
onTap: (index) {
selectedTab = index;
},
tabs: [
Tab(
child: (selectedTab == 1) ? yourCustomWidget1 : yourWidget1
),
Tab(
child: (selectedTab == 2) ? yourCustomWidget2 : yourWidget2
),
]);

如果这不起作用请告诉我