颤振:持久的BottomAppBar和BottomNavigationBar
我是个新手，我正在开发一个有BottomAppBar的应用程序，它把属性bottomNavigationBar: of Scaffold()作为我的home_screen，因为我需要它在屏幕底部并在页面中持续存在，我还需要一个BottomNavigationBar来保持BottomAppBar顶部的持久性，但我无法做到这一点，因为BottomAppBar已经占据了bottomNavigationBar:的属性。
如何使我的BottomNavigationBar与我的BottomAppBar一起持久
注意：，我正在使用PageView()滚动我的页面，它将由BottomNavigationBar控制
编辑:这里附加的是我正在尝试实现的UI
代码片段：
import 'package:flutter/material.dart';
//screens
import 'package:timewise_flutter/screens/calendar_screen.dart';
import 'package:timewise_flutter/screens/covey_quadrants_screen.dart';
import 'package:timewise_flutter/screens/kanban_screen.dart';
import 'package:timewise_flutter/screens/todo_list_screen.dart';
class OverviewScreen extends StatefulWidget {
static const String id = 'overview_screen';
//const OverviewScreen({Key? key}) : super(key: key);
@override
_OverviewScreenState createState() => _OverviewScreenState();
}
class _OverviewScreenState extends State<OverviewScreen> {
PageController _pageController = PageController(initialPage: 2);
int _bottomNavBarCurrentIndex = 2;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
bottomNavigationBar: SafeArea(
child: BottomAppBar(
elevation: 16.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
tooltip: 'Menu',
icon: Icon(Icons.menu_rounded),
onPressed: () {
print('menu icon pressed!');
//TODO: show bottom modal bottom sheet
},
),
IconButton(
tooltip: 'Pomodoro Timer',
icon: Icon(Icons.hourglass_empty_rounded),
onPressed: () {
print('pomo icon pressed!');
//TODO: show pomodoro timer modal bottom sheet
},
),
IconButton(
tooltip: 'Add',
icon: Icon(Icons.add_circle_outline_outlined),
onPressed: () {
print('add icon pressed!');
//TODO: show add task modal bottom sheet
},
),
],
),
);,
),
body: PageView(
controller: _pageController,
onPageChanged: (page) {
setState(() {
_bottomNavBarCurrentIndex = page;
});
},
children: [
CalendarScreen(),
ToDoListScreen(),
SafeArea(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Overview Screen'),
BottomNavigationBar(
currentIndex: _bottomNavBarCurrentIndex,
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.white,
elevation: 0.0,
iconSize: 16.0,
selectedItemColor: Colors.black,
unselectedItemColor: Colors.grey,
showSelectedLabels: false,
showUnselectedLabels: false,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.calendar_today_rounded),
label: 'Calendar',
tooltip: 'Calendar',
),
BottomNavigationBarItem(
icon: Icon(Icons.checklist_rounded),
label: 'To-Do',
tooltip: 'To-Do List',
),
BottomNavigationBarItem(
icon: Icon(Icons.panorama_fish_eye_rounded),
label: 'Overview',
tooltip: 'Overview',
),
BottomNavigationBarItem(
icon: Icon(Icons.border_all_rounded),
label: 'Covey\'s 4 Quadrants',
tooltip: 'Covey\'s 4 Quadrants',
),
BottomNavigationBarItem(
icon: Icon(Icons.view_column_rounded),
label: 'Kanban Board',
tooltip: 'Kanban Board',
),
],
onTap: (index) {
setState(() {
_bottomNavBarCurrentIndex = index;
_pageController.jumpToPage(index);
});
},
),
],
),
),
),
CoveyQuadrantsScreen(),
KanbanScreen(),
],
),
);
}
}回答 2
Stack Overflow用户
发布于 2021-07-09 03:53:59
不幸的是，这不是设计移动应用程序UI的标准方式。这将导致不良的用户体验。
如果用户不小心接触到
NavigationBar而不是AppBar，该怎么办？您将被带到新的屏幕上，我在那里执行的操作将丢失或需要处理。
因此，当我们为移动应用程序设计和开发时，应该满足适当的UI准则。基于material.io的指导方针
底部的应用程序栏应该用于：
- 仅限移动设备
- 访问底部导航抽屉
- 屏幕有两到五个动作
底部应用程序栏不应用于：
- 带有底部导航条的应用程序
- 屏幕上有一个或没有一个动作
有关UI和UX指南https://material.io/的更多有用信息，请参阅此链接
Stack Overflow用户
发布于 2021-07-09 03:08:41
我建议像你一样用scaffold()制作一个bottomNavigationBar()。然后，您可以创建一个Container()对象列表，每个对象代表不同的页面。对于您的PageView，我假设您已经这样做了，如果没有，那么就是这样做的。然后，通过将scaffold的scaffold属性设置为myPages[_currentIndex]或类似的东西，可以循环遍历页面。
另外:就像评论中所问的那样，我也不知道为什么BottomNavigationBar和BottomAppBar都会做同样的事情。在这两种情况下，流程都与我前面描述的相同。
https://stackoverflow.com/questions/68314576
复制相似问题
腾讯云开发者
