Fatal编程技术网
  • flutter/
  • Flutter 颤振抽屉与底部导航栏重叠

Flutter 颤振抽屉与底部导航栏重叠

flutter user-interface dart

Flutter 颤振抽屉与底部导航栏重叠,flutter,user-interface,dart,flutter-layout,Flutter,User Interface,Dart,Flutter Layout,---------- 这是我问题的第一个屏幕截图 这是实现单子滚动视图后的第二个屏幕截图 我已经创建了一个导航抽屉和一个底部导航小部件，我面临以下问题/ 当打开抽屉时，它说抽屉超过XX像素，所以我把它包装在“单子滚动视图”中，现在抽屉像一整页一样打开了 此外，当按下抽屉时，底部导航与之重叠 我已经添加了图片，你可以通过我的点击上面看到 这是我的一段代码 class Mydrawer extends StatelessWidget { @override Widget b

----------

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

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

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

  • 当打开抽屉时，它说抽屉超过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);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}
    检查这个

    使用
    抽屉
    部分
    脚手架（）
    

    我已经改变了你传递代码的方式，试着在你的代码中实现它。我已经分解了
    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'),
          ),
        ],
      )
     )
    );
  }
}

    

    类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
主体：maintry（），
主题：主题数据(
主样本：颜色。蓝色，
),
//主页：主页（），
//initialRoute:“/”，
路线：{
MyHomepage.route:（）=>MyHomepage（），
Account.route:（\u）=>Account（），
Mylist.route:（）=>Mylist（），
Wishlist.route:（）=>Wishlist（），
Contactus.route:（\u）=>Contactus（），
Infofaq.route:（)=>Infofaq（），
},
);
}
}
类MainEntry扩展了StatefulWidget{
@凌驾
_MainEntryState createState（）=>\u MainEntryState（）；
}
类_MainEntryState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回物料应用（debugShowCheckedBanner:false，
家：脚手架(
抽屉：MyDrawer（），
body:\u widgetOptions[\u selectedIndex]//您的body
底部导航栏：底部导航栏(
showSelectedLabels:false，
显示未选择的标签：false，
类型：BottomNavigationBarType.fixed，
onTap:\u ONITAP，
currentIndex:_selectedIndex，
项目：常数[
底部导航气压计(
图标：图标（Icons.home），
标题：文本（“主页”），
),
底部导航气压计(
图标：图标（图标。过滤器\u无），
标题：文本（“灵感”），
),
底部导航气压计(
图标：图标（图标。通知\u无），
标题：文本（“通知”），
),
底部导航气压计(
图标：图标（Icons.mail\u outline），
标题：文本（“消息”），
),
],
)
)
);
}
}

    在这里可以做的最好的事情是，就像让抽屉分离一样，创建一个没有支架或主体的独立navbar类，只有navbar。现在，在包含支架的第三个小部件中调用抽屉和navbar。要更改索引，可以将函数作为参数传递给navbar widget.
    谢谢，我尝试过，遇到了像素问题，我也在问题中添加了该图像。请查看您如何调用这两个类？在main.dart文件中，我在“home:“并为抽屉创建了路线。我们必须调用main.dart上的两个类吗？我可以看看main.dart吗？对不起，我无法在脑海中想象它：/是的，当然，我已将其添加到上面的代码中。我已添加图像，它是重叠和透明的，请检查您遇到的错误是什么？我已经在回答中更新了你的代码如果它按预期工作，请将此标记为回答并向上投票！谢谢Dunder scaffold我将导航添加到底部导航，它产生了错误，现在我已经执行了您的编辑。但是条件是一样的。也许重新考虑一下你的路线，为什么你要在抽屉类中返回
    MaterialApp
    ？只返回
    SingleChildScrollView
    应该没问题，如果没有，那么用Scaffold@MukeshBhardwaj试试上面我刚刚编辑的代码

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


----------

    

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