用Riverpod颤振navigationBar
用Riverpod颤振navigationBar
提问于 2020-10-19 22:40:21
我试图管理我的州，但我不能真正做到这一点。我想学习如何创建一个导航栏在管理页面底部与河运荚包。
我设法管理我们单击的页面，但是我不知道如何根据所选的按钮返回正确的寻呼机。
Main.dart :
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:app/ui/screens/my_app/my_app_screen.dart';
void main() {
runApp(
const ProviderScope(child: MyApp()),
);
}NavigationBarScreen.dart:
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
final provider = StateNotifierProvider((ref) => NavigationNotifier());
class NavigationBarScreen extends HookWidget
{
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body : Container(
margin: EdgeInsets.only(left : 8, right : 8, bottom: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(20), topLeft: Radius.circular(20)),
boxShadow: [
BoxShadow(color: AppColors.colorShadowLight, spreadRadius: 0, blurRadius: 10),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(50.0),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
backgroundColor: AppColors.colorBgDark,
fixedColor: AppColors.colorContrastOrange,
unselectedItemColor: AppColors.colorFontLight2,
currentIndex: 0,
showSelectedLabels: false,
showUnselectedLabels: false,
onTap: context.read(provider).selectPage,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text('Settings'),
),
],
),
),
),
),
);
}
}NavigationNotifier.dart:
import 'package:hooks_riverpod/hooks_riverpod.dart';
enum NavigationBarEvent { HOME, PROFIL}
class NavigationNotifier extends StateNotifier<PageModel> {
NavigationNotifier() : super(defaultPage);
static const defaultPage = PageModel(NavigationBarEvent.HOME);
void selectPage(int i){
switch (i) {
case 0:
state = PageModel(NavigationBarEvent.HOME);
break;
case 1:
state = PageModel(NavigationBarEvent.PROFIL);
break;
}
}
}
class PageModel {
const PageModel(this.page);
final NavigationBarEvent page;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2020-10-19 22:53:45
当用户单击底部栏时，您似乎已经实现了修改状态的所有逻辑。
唯一剩下的部分是监听状态(可能在Scaffold中)，并决定显示哪个页面。
一种可能是写：
class NavigationBarScreen extends HookWidget {
@override
Widget build(BuildContext context) {
final pageModel = useProvider(provider.state);
Widget body;
switch (pageModel.page) {
case NavigationBarEvent.HOME:
body = Home();
break;
case NavigationBarEvent.PROFIL:
body: Profile();
break;
}
return Scaffold(
body: body,
bottomBar: ...
);
}
} Stack Overflow用户
发布于 2022-01-28 02:21:53
更新日期:2022年1月27日. https://pub.dev/packages/flutter_riverpod/versions/1.0.3
这是另一种对我有效的方法，如果您也希望在拖动中控制“页面查看+底部导航栏”：
class Index extends StateNotifier<int> {
Index() : super(0);
set value(int index) => state = index;
}
final indexProvider = StateNotifierProvider((ref) => Index());
class Home extends ConsumerWidget {
static const route = '/home';
const Home({Key? key}) : super(key: key);
final List<Widget> fragments = const [
Text('Page 1'),
Text('Page 2'),
Text('Page 3')
];
final List<BottomNavigationBarItem> navItems = const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(icon: Icon(Icons.camera), label: 'Camera'),
BottomNavigationBarItem(icon: Icon(Icons.edit), label: 'Edit'),
];
final Text title = const Text('My App');
@override
Widget build(BuildContext context, WidgetRef ref) {
final PageController controller = PageController();
final int menuIndex = ref.watch(indexProvider) as int;
return Scaffold(
appBar: AppBar(title: title, actions: [
IconButton(onPressed: () {}, icon: const Icon(Icons.list))
]),
body: PageView(
controller: controller,
children: fragments,
onPageChanged: (i) => ref.read(indexProvider.notifier).value = i),
bottomNavigationBar: BottomNavigationBar(
items: navItems,
currentIndex: menuIndex,
onTap: (i) {
ref.read(indexProvider.notifier).value = i;
controller.animateToPage(i,
duration: const Duration(seconds: 1), curve: Curves.easeInOut);
}),
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64435989
复制相关文章
相似问题
腾讯云开发者
