在TabBar中的选项卡视图页面之间保留状态-错误

Question

════════小部件库捕获到异常═══════════════════════════════════在生成KeyedSubtree-[<1>]时引发了以下断言："package:flutter/src/widgets/automatic_keep_alive.dart"：断言失败：第348行位置12："_keepAliveHandle==null"：不为真。

类MyAppState使用AutomaticKeepAliveClientMixin扩展State｛

@超控bool get wantKeepAlive=>真实；

}

Answer 1

您可以使用IndexedStack小部件，它是一个堆栈，但您使用index属性控制外部小部件

这是的使用示例

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
int tab = 0;
late final controller = TabController(length: 3, vsync: this);
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: IndexedStack(
index: tab,
children: [
FutureBuilder(
future: Future.delayed(const Duration(seconds: 3), () {
return 'Tab0, This should appear after 3 seconds';
}),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Center(child: Text(snapshot.data.toString()));
}
return const Center(child: CircularProgressIndicator());
}),
FutureBuilder(
future: Future.delayed(const Duration(seconds: 5), () {
return 'Tab1, This should appear after 5 seconds';
}),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Center(child: Text(snapshot.data.toString()));
}
return const Center(child: CircularProgressIndicator());
}),
FutureBuilder(
future: Future.delayed(const Duration(seconds: 10), () {
return 'Tab2, This should appear after 10 seconds';
}),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Center(child: Text(snapshot.data.toString()));
}
return const Center(child: CircularProgressIndicator());
}),
],
),
bottomNavigationBar: Material(
elevation: 16.0,
child: TabBar(
controller: controller,
unselectedLabelColor: Colors.black,
labelColor: Colors.blue,
onTap: (index) {
setState(() {
tab = index;
});
},
tabs: const [
Tab(icon: Icon(Icons.category)),
Tab(icon: Icon(Icons.home)),
Tab(icon: Icon(Icons.list)),
],
),
),
),
);
}
}

注意，如果您的选项卡执行网络请求，则将请求所有网络请求，除非您在TabBar.onTap: (index){}方法中控制它们