当底部导航栏存在时,应用栏与通知栏重叠

问题描述 投票:0回答:2

当我通过底部导航导航到页面时,页面应用栏会被手机通知栏覆盖。

底部导航页面:

同一页面没有底部导航:

***我需要我的应用程序栏看起来像带有底部导航的第二张图片。当我对底部导航发表评论时,页面恢复正常。


  import 'package:flutter/material.dart';
    // import 'package:flutter_ecommerce_app/main.dart';
    // import 'package:font_awesome_flutter/font_awesome_flutter.dart';
    import 'package:curved_navigation_bar/curved_navigation_bar.dart';
    import 'package:flutter_ecommerce_app/screens/ShoppingCartPage(p).dart';
    import 'package:flutter_ecommerce_app/screens/HomeScreen.dart';
    import 'package:flutter_ecommerce_app/screens/profilePage.dart';
    import 'package:flutter_ecommerce_app/screens/OurStores.dart';
    import 'package:flutter_ecommerce_app/screens/NotificationsScreen.dart';
    
    class BottomNavBarWidget extends StatefulWidget {
      @override
      _BottomNavBarWidgetState createState() => new _BottomNavBarWidgetState();
    }
    
    class _BottomNavBarWidgetState extends State<BottomNavBarWidget> {
      int currentIndex = 2;
      GlobalKey _bottomNavigationKey = GlobalKey();
      final List<Widget> viewContainer = [
        StoresNearMe(),
        notifications(),
        HomeScreen(),
        CartScreen(),
        ProfilePage()
      ];
    
      @override
      Widget build(BuildContext context) {
        // void onTap(int index) {
        //   setState(() {
        //     currentIndex = index;
        //   });
        // }
    
        return SafeArea(
          child: new Scaffold(
            body: viewContainer[currentIndex],
            bottomNavigationBar: CurvedNavigationBar(
              key: _bottomNavigationKey,
              index: currentIndex,
              height: 45.0,
              items: <Widget>[
                Icon(Icons.menu_open),
                Icon(Icons.notifications_active_rounded),
                Icon(
                  Icons.home,
                  size: 35,
                  color: Colors.redAccent,
                ),
                Icon(Icons.shopping_cart),
                Icon(Icons.person),
              ],
              color: Colors.grey[200],
              buttonBackgroundColor: Colors.grey[400],
              backgroundColor: Colors.white,
              animationCurve: Curves.fastOutSlowIn,
              animationDuration: Duration(milliseconds: 600),
              onTap: (index) {
                setState(() {
                  currentIndex = index;
                  print(currentIndex);
                });
              },
            ),
          ),
        );
      }
    }
flutter appbar
2个回答
2
投票

您可以在身体周围使用衬垫。

Padding(
  padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top,),
  child: child,
)

0
投票

它想在状态栏上播放您的应用程序样式,但 SafeArea 小部件阻止了它。因此,要么删除 SafeAre 小部件,要么在 SafeArea 中设置

top:false

© www.soinside.com 2019 - 2024. All rights reserved.