Question

enter image description here ----------

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

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

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

虽然打开抽屉时说抽屉超过XX像素，所以我将其包裹在“单子滚动视图中，现在抽屉像整个页面一样打开。
此外，当按下抽屉时，底部导航栏会与之重叠。
我添加了一些图片，您可以通过上面的点击查看这些图片。

这是我的代码。

    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(),
      },
    );
  }
}


----------

Answer 1

检查！

It's work for me

使用drawer的{{1}}部分。

Answer 2

我已经更改了您中继代码的方式，请尝试在您的代码中实现。而且我已经分解了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'),
          ),
        ],
      )
     )
    );
  }
}

Answer 3

在这里可以做的最好的事情是，就像将抽屉分开一样，创建一个单独的导航栏类，而没有脚手架或主体，只需导航栏即可。现在，在包含您的脚手架的第三个小部件中调用抽屉和导航栏这两者。要更改索引，您可以将该函数作为参数传递给导航栏小部件。

Flutter Drawer与底部导航栏重叠

3 个答案: