flutter - 如何在底部导航上方制作颤振抽屉
问题描述
我在 Flutter 项目中有一个简单的抽屉,我想让抽屉在用户滑动/打开时始终位于底部导航栏上方。我玩弄我的代码,但还没有找到任何解决方案。
import 'package:flutter/material.dart';
import 'package:testing2/pages/ChannelsPage.dart';
import 'package:testing2/pages/HomePage.dart';
import 'package:testing2/pages/ExplorePage.dart';
import 'package:testing2/fragments/first_fragment.dart';
import 'package:testing2/fragments/second_fragment.dart';
import 'package:testing2/fragments/third_fragment.dart';
import 'package:testing2/Shared/drawer.dart';
class MyHomePage extends StatefulWidget {
@override
_MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}
class _MyBottomNavigationBarState extends State<MyHomePage> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
int _currentSelected = 0;
GlobalKey<ScaffoldState> _drawerKey = GlobalKey<ScaffoldState>();
final List<Widget> _children = [
HomePage(),
SettingsPage(),
ContactPage(),
HomePage()
];
void onTappedBar(int index){
index == 3
? _drawerKey.currentState.openDrawer()
: setState((){
_currentSelected = index;
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
key: _drawerKey,
drawer: new Drawer(
child: ListView(
children: <Widget>[
new DrawerHeader(
child: new Text('Jonathan'),
decoration: new BoxDecoration(color: Colors.orange),),
new ListTile(
leading: const Icon(Icons.notifications),
title: new Text('Notifications'),
onTap: (){
Navigator.pop(context);
Navigator.push(context, new MaterialPageRoute(builder: (context) => new FirstFragment()));
},
),
new ListTile(
leading: const Icon(Icons.list),
title: new Text('Preferences'),
onTap: (){
Navigator.pop(context);
Navigator.push(context, new MaterialPageRoute(builder: (context) => new SecondFragment()));
},
),
new ListTile(
leading: const Icon(Icons.help),
title: new Text('Help'),
onTap: (){
Navigator.pop(context);
Navigator.push(context, new MaterialPageRoute(builder: (context) => new ThirdFragment()));
},
),
new ListTile(
leading: const Icon(Icons.outlined_flag),
title: new Text('Logout'),
onTap: (){
Navigator.pop(context);
Navigator.push(context, new MaterialPageRoute(builder: (context) => new FirstFragment()));
},
),
],
)
),
body:_children[_currentSelected],
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.blueGrey[900],
type: BottomNavigationBarType.fixed,
onTap: onTappedBar,
currentIndex: _currentSelected,
showUnselectedLabels: true,
unselectedItemColor: Colors.white,
selectedItemColor: Color.fromRGBO(10, 135, 255, 1),
items: <BottomNavigationBarItem> [
BottomNavigationBarItem(icon: new Icon(Icons.home), title: new Text('Home')),
BottomNavigationBarItem(icon: new Icon(Icons.search), title: new Text('Explore')),
BottomNavigationBarItem(icon: new Icon(Icons.device_hub), title: new Text('Channels')),
BottomNavigationBarItem(icon: new Icon(Icons.dehaze), title: new Text('More')),
],
),
);
}
}
class Page extends StatelessWidget {
const Page({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container();
}
}
我按照你告诉我的方式做了,抽屉位于底部导航栏上方,但打开抽屉的第四个图标不再起作用。
解决方案
您可以通过以下方式执行此操作。
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Scaffold(
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
appBar: AppBar(
title: Text("data"),
),
drawer: Drawer(
child: Center(
child: RaisedButton(
child: Text("Press"),
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => Hello1()));
},
),
),
),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Business'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
class Hello1 extends StatelessWidget {
const Hello1({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Center(
child: Text("data"),
),
),
);
}
}
推荐阅读
- javascript - IE 11 的选项组问题
- css - Chrome 在移动视图上的滚动条位置问题
- facebook - 新域未得到验证。错误 - URL 被阻止:此重定向失败,因为重定向 URI 未列入白名单
- angular - 使用闪屏检测应用程序何时以离子/角度完全加载
- json - 小值的 Elasticsearch 查询范围精度问题
- r - 问题在行动按钮
- node.js - 在 prod 的同一台机器上安装两个 nodeJs 版本是否安全
- javascript - 使用 Cloud Functions 从 Firebase Storage 获取下载网址
- python - 刷新页面时烧瓶网站重复返回值
- opencv - 无法在 cnn 中获取图像通道