我正在尝试通过以下挑战改进我的应用程序:我想用最初为空的TabPages(小部件)填充我的选项卡视图,并在单击选项卡或选项卡时在TabViews中执行复杂的操作(例如数据库操作)被刷过。 我现在完成了编程,但仅当我在 TabHeader 上单击选项卡时视图才会刷新,但如果我从一页滑动到另一页则不会刷新。在调试器中,我看到该小部件已被正确的小部件替换,但未显示。它保留在旧的小部件上。
我写了一个小应用程序来显示问题。它有 5 个选项卡,最初填充为 MyDefaultWidget,如果选择,则替换为 MySpecialWidget。这是代码
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Tab Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
super.key,
});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
late TabController _tabController;
List<Tab> myTabHeaders = [];
List<Widget> myTabPages = [];
@override
void initState() {
super.initState();
_tabController = TabController(length: 5, vsync: this);
_tabController.addListener(myTabControllerListener);
for (int i = 0; i < 5; i++) {
myTabHeaders.add(Tab(text: '$i'));
myTabPages.add(const MyDefaultWidget());
}
}
void myTabControllerListener() {
if (_tabController.indexIsChanging) {
int newIndex = _tabController.index;
setState(() {
myTabPages[newIndex] = const MySpecialWidget();
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
title: TabBar(
controller: _tabController,
indicatorColor: Colors.orange,
labelColor: Colors.orange,
unselectedLabelColor: Colors.black54,
tabs: myTabHeaders,
),
),
body: TabBarView(
controller: _tabController,
children: myTabPages,
),
);
}
}
class MyDefaultWidget extends StatelessWidget {
const MyDefaultWidget({super.key});
@override
Widget build(BuildContext context) {
return const Center(
child: Text('DEFAULT'),
);
}
}
class MySpecialWidget extends StatelessWidget {
const MySpecialWidget({super.key});
@override
Widget build(BuildContext context) {
return const Center(
child: Text('SPECIAL'),
);
}
}
如果显示点击 MySpecialWidget。如果显示滑动 MyDefaultWidget。
有什么我忘记配置的吗?我对这种不一致感到有点困惑。预先非常感谢您的帮助!
这确实是
indexIsChanging
属性的行为。来自文档:
在用户点击 TabBar 选项卡时触发的 animateTo 动画期间,该值为 true。当用户拖动(和“猛击”)TabBarView 导致偏移量发生变化时,该值为 false。
如果您想观看控制器的更新,请使用其
addListener
方法。