我想制作一个汉堡菜单,使用导航栏显示在我的应用程序的主屏幕上,为此我创建了一个nav_bar.dart文件,并将其导入到我的home_screen.dart和我的main.dart中,我通过执行import'nav_bar. dart'来实现这一点。然而,我的导航栏并没有显示在我的home_screen.dart的应用程序栏上,
nav_bar.dart的代码如下:
import 'package:flutter/material.dart';
import 'home_screen.dart';
class NavBar extends StatelessWidget {
const NavBar({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
UserAccountsDrawerHeader(
accountName: Text("Wilson Machoco"),
accountEmail: Text("wmachoco202076@willow.org.mz"),
currentAccountPicture: CircleAvatar(
child: ClipOval(
child: Image.asset(
"assets/user.png",
width: 90,
height: 90,
fit: BoxFit.cover,
),
),
),
decoration: BoxDecoration(
color: Colors.yellowAccent,
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://oflutter.com/wp-content/uploads/2021/02/profile-bg3.jpg')),
),
),
ListTile(
leading: Icon(Icons.favorite),
title: Text('Favorites'),
onTap: () => null,
),
ListTile(
leading: Icon(Icons.person),
title: Text('Friends'),
onTap: () => null,
),
ListTile(
leading: Icon(Icons.share),
title: Text('Share'),
onTap: () => null,
),
ListTile(
leading: Icon(Icons.notifications),
title: Text('Request'),
onTap: () => null,
trailing: ClipOval(
child: Container(
color: Colors.deepOrange,
width: 20,
height: 20,
child: Center(
child: Text(
"8",
style: TextStyle(color: Colors.white, fontSize: 12),
),
)),
),
),
Divider(),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
onTap: () => null,
),
ListTile(
leading: Icon(Icons.description),
title: Text('Policies'),
onTap: () => null,
),
Divider(),
ListTile(
title: Text('Exit'),
leading: Icon(Icons.exit_to_app),
onTap: () => null,
),
],
),
);
}
}
在我主屏幕上我这样做:
import 'dart:ui';
import 'package:url_launcher/url_launcher.dart';
import 'dart:async';
import 'package:flutter/material.dart';
import 'nav_bar.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: NavBar(),
appBar: AppBar(... etc
我的应用程序如下所示:
1条答案
按热度按时间zxlwwiss1#
drawer
的默认按钮是appbar的前导按钮,我想你的appbar有自定义的前导按钮,所以你需要为自定义的前导小部件添加一些配置。然后将其传递给
scaffold
,如下所示:然后在应用程序栏中用InkWell Package 自定义前导小部件(我认为是配置文件图像),如下所示:
现在,当您点击应用程序栏中的图像时,
Drawer
将打开。