时间戳

首页 > 解决方案 > Flutter Drawer 与底部导航栏重叠

flutter - Flutter Drawer 与底部导航栏重叠

问题描述

在此处输入图像描述----------

这是我的问题的第一个屏幕截图

这是实现单子滚动视图后的第二秒截图

我创建了一个导航抽屉和一个底部导航小部件，我面临以下问题/

  1. 打开抽屉时，它说抽屉超过了 XX 像素，所以我将它包裹在“单子滚动视图中，现在抽屉像整个页面一样打开。

  2. 此外，当抽屉被按下时，底部导航会与其重叠。

  3. 我添加了图片，您可以通过我在上面的点击看到这些图片。

这是我的一段代码。

    class Mydrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              UserAccountsDrawerHeader(
                accountName: Text('Name'),
                accountEmail: Text('Username'),
                currentAccountPicture: CircleAvatar(
                  backgroundColor: Colors.white,
                  child: Text('Hi'),
                ),
              ),
              ListTile(
                  leading: Icon(Icons.home),
                  title: Text(
                    'Home Page',
                  ),
                  onTap: () {
                    Navigator.of(context).pop();
                    Navigator.of(context).pushNamed(MyHomepage.route);
                  }),
              ListTile(
                leading: Icon(Icons.person),
                title: Text(
                  'My Account',
                ),
                onTap: () {
                  Navigator.of(context).pop();
                  Navigator.of(context).pushNamed(Account.route);
                },
              ),
              ListTile(
                leading: Icon(Icons.assignment),
                title: Text(
                  'My Lists',
                ),
                onTap: () {
                  Navigator.of(context).pop();
                  Navigator.of(context).pushNamed(Mylist.route);
                },
              ),
              ListTile(
                leading: Icon(Icons.bookmark),
                title: Text(
                  'Wishlist',
                ),
                onTap: () {
                  Navigator.of(context).pop();
                  Navigator.of(context).pushNamed(Wishlist.route);
                },
              ),
              Divider(),
              ListTile(
                leading: Icon(Icons.mail),
                title: Text(
                  'Contact us',
                ),
                onTap: () {
                  Navigator.of(context).pop();
                  Navigator.of(context).pushNamed(Contactus.route);
                },
              ),
              ListTile(
                leading: Icon(Icons.info),
                title: Text(
                  'Info & FAQ',
                ),
                onTap: () {
                  Navigator.of(context).pop();
                  Navigator.of(context).pushNamed(Infofaq.route);
                },
              ),
              Divider(),
              ListTile(
                leading: Icon(Icons.lock_open),
                title: Text(
                  'Logout',
                ),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Bottom Navigation Code

class Nav extends StatefulWidget {
  @override
  _NavState createState() => _NavState();
}

class _NavState extends State<Nav> {
  int _selectedIndex = 0;
  final List<Widget> _widgetOptions = [
    NavHome(),
    NavInspiration(),
    NavNotification(),
    NavMessages(),
  ];

  void _onitemtap(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _widgetOptions[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        showSelectedLabels: false,
        showUnselectedLabels: false,
        type: BottomNavigationBarType.fixed,
        onTap: _onitemtap,
        currentIndex: _selectedIndex,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.filter_none),
            title: Text('Inspiration'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.notifications_none),
            title: Text('Notifications'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.mail_outline),
            title: Text('Messages'),
          ),
        ],
      ),
    );
  }
}

主要飞镖

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter demo',
      home: Nav(),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      //home: Homepage(),
      //initialRoute: '/',
      routes: {
        MyHomepage.route: (_) => MyHomepage(),
        Account.route: (_) => Account(),
        Mylist.route: (_) => Mylist(),
        Wishlist.route: (_) => Wishlist(),
        Contactus.route: (_) => Contactus(),
        Infofaq.route: (_) => Infofaq(),
      },
    );
  }
}


----------

标签： flutteruser-interfacedartflutter-layout

解决方案

我已经改变了你传递代码的方式，尝试在你的代码中实现它。我已经分解Nav()了，所以请记住我没有使用Nav()整个

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MainEntry(),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      //home: Homepage(),
      //initialRoute: '/',
      routes: {
        MyHomepage.route: (_) => MyHomepage(),
        Account.route: (_) => Account(),
        Mylist.route: (_) => Mylist(),
        Wishlist.route: (_) => Wishlist(),
        Contactus.route: (_) => Contactus(),
        Infofaq.route: (_) => Infofaq(),
      },
    );
  }
}


class MainEntry extends StatefulWidget {
  @override
  _MainEntryState createState() => _MainEntryState();
}

class _MainEntryState extends State<MainEntry> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedBanner: false,
      home: Scaffold(
        drawer: MyDrawer(), 

        body: _widgetOptions[_selectedIndex] //your body

        bottomNavigationBar: BottomNavigationBar(
          showSelectedLabels: false,
          showUnselectedLabels: false,
          type: BottomNavigationBarType.fixed,
          onTap: _onitemtap,
          currentIndex: _selectedIndex,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.filter_none),
            title: Text('Inspiration'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.notifications_none),
            title: Text('Notifications'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.mail_outline),
            title: Text('Messages'),
          ),
        ],
      )
     )
    );
  }
}

推荐阅读