我使用过底部导航器。
但我也想使用侧边栏。
侧边栏:
class MainDrawer extends StatelessWidget {
const MainDrawer({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(children: [
Container(
child: Padding(
padding: EdgeInsets.only(top: 50.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
CircleAvatar(
radius: 50.0,
backgroundImage: NetworkImage(
"https://1.bp.blogspot.com/-VqCqBEa3iXc/YGHvtn6-JpI/AAAAAAAAACo/P0dHB90T_2wqrDnsClsYG5f1SP5vAwwHgCLcBGAsYHQ/s59/logo.png",
),
),
SizedBox(
height: 5.0,
),
Text(
"YongWonGo",
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.w800,
fontFamily: 'cage',
),
),
SizedBox(
height: 5.0,
),
Text(
"행정실 055\)541-1173",
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w400,
fontFamily: 'cage',
),
),
],
),
),
),
SizedBox(
height: 20.0,
),
//Now let's Add the button for the Menu
//and let's copy that and modify it
ListTile(
onTap: () {},
leading: Icon(
Icons.home,
color: kPrimaryColor,
),
title: Text(
"메인",
style: TextStyle(fontFamily: 'cage'),
),
),
ListTile(
onTap: () {},
leading: Icon(
Icons.notifications_none_rounded,
color: kPrimaryColor,
),
title: Text(
"공지사항 및 안내",
style: TextStyle(fontFamily: 'cage'),
),
),
ListTile(
onTap: () {},
leading: Icon(
Icons.chat,
color: kPrimaryColor,
),
title: Text(
"동아리방",
style: TextStyle(fontFamily: 'cage'),
),
),
ListTile(
onTap: () {},
leading: Icon(
Icons.masks_rounded,
color: kPrimaryColor,
),
title: Text(
"코로나19 현황과 날씨",
style: TextStyle(fontFamily: 'cage'),
),
),
ListTile(
onTap: () {},
leading: Icon(
Icons.supervised_user_circle,
color: kPrimaryColor,
),
title: Text(
"개발자",
style: TextStyle(fontFamily: 'cage'),
),
),
]);
}
}
底部导航栏:
import 'package:flutter/material.dart';
import 'package:plant_app/constants.dart';
import 'package:plant_app/screens/corona/home/coronascreen.dart';
import 'package:plant_app/screens/etc/etcScreen.dart';
import 'package:plant_app/screens/home/components/gongji.dart';
import 'package:plant_app/screens/news/components/screens/gongjiScreen.dart';
import 'package:plant_app/screens/home/home_screen.dart';
class YongWonGo extends StatefulWidget {
@override
_YongWonGoState createState() => _YongWonGoState();
}
class _YongWonGoState extends State<YongWonGo> {
int _selectedItemIndex = 0;
final List pages = [
HomePage(),
GongjiScreen(),
MainScreen(),
CoronaScreen(),
EtcScreen(),
];
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
scaffoldBackgroundColor: kBackgroundColor,
primaryColor: kPrimaryColor,
textTheme: Theme.of(context).textTheme.apply(bodyColor: kTextColor),
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Scaffold(
bottomNavigationBar: BottomNavigationBar(
elevation: 0,
backgroundColor: Color(0xFFF0F0F0),
unselectedItemColor: Colors.grey,
selectedItemColor: Colors.black,
selectedIconTheme: IconThemeData(color: Colors.blueGrey[600]),
currentIndex: _selectedItemIndex,
type: BottomNavigationBarType.fixed,
onTap: (int index) {
setState(() {
_selectedItemIndex = index;
});
},
items: [
BottomNavigationBarItem(
title: Text(""),
icon: Icon(Icons.home),
),
BottomNavigationBarItem(
title: Text(""),
icon: Icon(Icons.notifications_none_rounded),
),
BottomNavigationBarItem(
title: Text(""),
icon: Icon(Icons.chat),
),
BottomNavigationBarItem(
title: Text(""),
icon: Icon(Icons.masks_rounded),
),
BottomNavigationBarItem(
title: Text(""),
icon: Icon(Icons.supervised_user_circle),
),
],
),
body: pages[_selectedItemIndex]),
);
}
}
我认为如果我让 onTap 工作,我可以更改底部导航栏的 _selectedItemIndex
以按我想要的方式工作。
似乎几乎所有事情都交给你了,但我经常谷歌搜索并问你问题。谢谢。
附言请使用翻译器理解。我身边没有老师可以提问。
答案 0 :(得分:0)
可以使用这个:
IconButton(
tooltip: "Text",
icon: const Icon(Icons.home),
onPressed: () {
Navigator.pushNamed(context, "/routeName");
},
),
答案 1 :(得分:0)
Scaffold(
AppBar(
drawer: YourDrawerWidget(),
)
bottomModalSheet: YourBottomSheet(),
)