Flutter移除底部导航栏灰色容器并实现悬浮显示需求

一、去掉底部导航的灰色容器 #

找到底部导航栏的布局代码，按以下方式修改：

• 布局文件里如果有android:background="@color/grey"这类背景设置，直接删掉
• 代码里如果动态设置了背景色，移除bottomNav.setBackgroundColor(getResources().getColor(R.color.grey))这类语句
• 把BottomNavigationView的android:background设为透明（@android:color/transparent）或者直接不设置，只保留图标和文字样式

二、调整导航栏和GridView的层级与布局 #

要让导航栏悬浮在GridView上方，滚动时列表底部能在导航栏下方正常显示，用ConstraintLayout或者FrameLayout调整结构：

用ConstraintLayout的情况 #

• 给GridView设置底部约束：app:layout_constraintBottom_toTopOf="@id/bottom_nav"，顶部约束贴父布局顶部
• 底部导航栏的底部约束贴父布局底部：app:layout_constraintBottom_toBottomOf="parent"
• 给导航栏加android:elevation="4dp"，确保它在GridView之上

用FrameLayout的情况 #

• 先放GridView，设置宽高为match_parent，再加android:layout_marginBottom="?attr/bottomNavigationBarHeight"，预留导航栏的高度
• 再放底部导航栏，宽设match_parent，高wrap_content，android:layout_gravity="bottom"，同样加android:elevation="4dp"

三、代码示例（ConstraintLayout版） #

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <GridView
        android:id="@+id/grid_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/bottom_nav"
        android:numColumns="2" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/bottom_nav_menu"
        android:background="@android:color/transparent"
        app:itemIconTint="@color/nav_item_color"
        app:itemTextColor="@color/nav_item_color"
        android:elevation="4dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

四、注意点 #

• 要是导航栏图标点击没反应，检查下有没有设置合适的minHeight或padding，保证点击区域正常
• 若GridView底部内容被截断，确认约束或margin的高度和导航栏实际高度匹配，用?attr/bottomNavigationBarHeight能适配不同设备

内容的提问来源于stack exchange，提问作者Ibtissam