我使用 NestedScrollView 和 SliverAppBar 在滚动时隐藏应用栏。在 NestedScrollView 的正文中,我有一个带有 PageStorageKey 的 CustomScrollView,但是当我切换回事件选项卡时,滚动位置会丢失。我不明白。请你帮助我好吗?
home_screen.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:liveitup/app/screens/HomeScreen/drawer_icon.dart';
import 'package:liveitup/app/screens/HomeScreen/drawer_page.dart';
import 'package:liveitup/app/screens/HomeScreen/tabs/bottom_navigation.dart';
import 'package:liveitup/app/screens/HomeScreen/tabs/tab_item.dart';
import 'package:liveitup/app/screens/HomeScreen/tabs/tab_navigators/event_tab_navigator.dart';
import 'package:liveitup/app/screens/HomeScreen/tabs/tab_navigators/message_tab_navigator.dart';
import 'package:liveitup/app/screens/HomeScreen/tabs/tab_navigators/notification_tab_navigator.dart';
import 'package:liveitup/blocs/UserBloc/bloc.dart';
import '../../../constants.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
var _currentTab = TabItem.events;
void _selectTab(TabItem tabItem) {
setState(() => _currentTab = tabItem);
}
@override
Widget build(BuildContext context) {
var scaffoldKey = GlobalKey<ScaffoldState>();
UserBloc _userBloc = BlocProvider.of<UserBloc>(context);
return Scaffold(
backgroundColor: Colors.blue,
drawer: DrawerPage(),
key: scaffoldKey,
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 0,
pinned: false,
floating: true,
forceElevated: innerBoxIsScrolled,
backgroundColor: Colors.green,
leading: GestureDetector(
onTap: () => scaffoldKey.currentState?.openDrawer(),
child: const DrawerIcon()),
title: const Center(
child: Text(app_name),
),
actions: [
//Icon(Icons.search),
(_currentTab == TabItem.events)
? Icon(Icons.filter)
: Container(),
],
),
];
},
body: Builder(builder: (BuildContext context) {
if (_currentTab == TabItem.events) {
return CustomScrollView(
key: const PageStorageKey<TabItem>(TabItem.events),
slivers: [
SliverList(
delegate: SliverChildListDelegate([
for (var index = 1; index < 1000; index++)
Text(
index.toString(),
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 40.0,
letterSpacing: 2.0,
wordSpacing: 100.0,
),
),
])),
],
);
} else if (_currentTab == TabItem.messages) {
return const Center(
child: Text('message list'),
);
} else if (_currentTab == TabItem.notifications) {
return const Center(
child: Text('notitifcatiion list'),
);
}
return Text('notitifcatiion list');
}),
),
bottomNavigationBar: BottomNavigation(
currentTab: _currentTab,
onSelectTab: _selectTab,
),
);
}
}
tab_item.dart
import 'package:flutter/material.dart';
enum TabItem { events, messages, notifications }
const Map<TabItem, String> tabName = {
TabItem.events: 'events',
TabItem.messages: 'messages',
TabItem.notifications: 'notifications',
};
botom_navigation.dart
import 'package:flutter/material.dart';
import 'package:liveitup/app/screens/HomeScreen/tabs/tab_item.dart';
class BottomNavigation extends StatelessWidget {
BottomNavigation({required this.currentTab, required this.onSelectTab});
final TabItem currentTab;
final ValueChanged<TabItem> onSelectTab;
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: currentTab == TabItem.events ? Colors.black : Colors.grey,
),
label: tabName[TabItem.events],
),
BottomNavigationBarItem(
icon: Icon(
Icons.message,
color: currentTab == TabItem.messages ? Colors.black : Colors.grey,
),
label: tabName[TabItem.messages],
),
BottomNavigationBarItem(
icon: Icon(
Icons.notifications,
color: currentTab == TabItem.notifications
? Colors.black
: Colors.grey,
),
label: tabName[TabItem.notifications],
),
],
onTap: (index) => onSelectTab(
TabItem.values[index],
),
currentIndex: currentTab.index,
//selectedItemColor: Colors.black,
);
}
}