为什么我的导航栏没有出现Flutter?

q0qdq0h2  于 2022-11-30  发布在  Flutter
关注(0)|答案(1)|浏览(162)

我想制作一个汉堡菜单,使用导航栏显示在我的应用程序的主屏幕上,为此我创建了一个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

我的应用程序如下所示:

zxlwwiss

zxlwwiss1#

drawer的默认按钮是appbar的前导按钮,我想你的appbar有自定义的前导按钮,所以你需要为自定义的前导小部件添加一些配置。

final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey();

然后将其传递给scaffold,如下所示:

return Scaffold(
      drawer: NavBar(),
      key: scaffoldKey,
      ...
);

然后在应用程序栏中用InkWell Package 自定义前导小部件(我认为是配置文件图像),如下所示:

leading: InkWell(
      onTap: () {
        scaffoldKey.currentState!.openDrawer();
      },
      child: your leading widge,
    ),

现在,当您点击应用程序栏中的图像时,Drawer将打开。

相关问题