materialToolBar 页面顶部的空白 space

Question

picture

我遇到这个问题，本应位于顶部的顶部应用栏上有空白 space。将其固定在顶部也无济于事，“android:fitsSystemWindows="true"" 也是如此。

我的文件的结构：CoordinatorLayout with MaterialToolBar（问题）- NestedScrollView - CoordinatorLayout with scrollabel content

我的代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:id="@+id/mainCoordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_gravity="center_horizontal"
        android:background="#E0ECDE"
        app:layout_anchor="@+id/topAppBar"
        app:layout_anchorGravity="center"
        app:menu="@menu/top_app_bar"
        app:subtitleTextColor="#205072"
        app:titleCentered="true"
        app:titleTextColor="#205072">

        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/montserrat_bold"
            android:gravity="center_horizontal"
            android:paddingLeft="14dp"
            android:text="text"
            android:textColor="#68B2A0"
            android:textSize="24dp" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/sendBtn"
            android:layout_marginLeft="150dp"
            style="@style/Widget.App.Button.OutlinedButton.Icon"
            android:backgroundTint="#68B2A0"
            android:layout_width="34dp"
            android:layout_height="34dp"
            app:icon="@drawable/ic_round_arrow_upward_24"
            app:iconGravity="textStart"
            app:iconSize="24dp"
            app:iconTint="#E0ECDE"
            app:strokeWidth="2dp"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle"
            app:strokeColor="#68B2A0" />
    </com.google.android.material.appbar.MaterialToolbar>


    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="90dp"
        >

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            
            <!--scrollable content-->
            
            </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>



    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:layout_anchorGravity="bottom|center"
        app:backgroundTint= "#FFFFFF"
        app:contentInsetStart="0dp"
        app:elevation= "8dp">
        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:labelVisibilityMode="unlabeled"
            app:itemIconTint="#CDE0C9"
            android:background="@drawable/background_transparent"
            app:menu="@menu/bottom_app_bar" />
    </com.google.android.material.bottomappbar.BottomAppBar>

    
</androidx.coordinatorlayout.widget.CoordinatorLayout>

这可能是因为 NestedScrollView，因为在没有它的其他页面上，顶部栏没有问题。关于为什么会发生这种情况或如何解决它的任何想法？

编辑：主题代码

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Main" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">#205072</item>
        <item name="colorPrimaryVariant">#CDE0C9</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">#329D9C</item>
        <item name="colorSecondaryVariant">#329D9C</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>

    <style name="error_appearance_one" parent="@android:style/TextAppearance">
        <item name="android:textColor">@android:color/transparent</item>
    </style>

    <style name="error_appearance_two" parent="@android:style/TextAppearance">
        <item name="android:textColor">@color/error</item>
    </style>

    <style name="Theme.Main.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="TextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
        <item name="boxStrokeColor">#56C596</item>
        <item name="boxStrokeWidth">2dp</item>
    </style>

    <style name="Theme.Main.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="Theme.Main.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <style name="Theme.ThemeOne" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">#205072</item>
        <item name="colorPrimaryVariant">@color/white</item>
        <item name="colorOnPrimary">#329D9C</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">#329D9C</item>
        <item name="colorSecondaryVariant">#329D9C</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>

    <style name="Theme.ThemeTwo" parent="Theme.MaterialComponents.Light">
        <!-- Primary brand color. -->
        <item name="colorPrimary">#CDE0C9</item>
        <item name="colorPrimaryVariant">@color/white</item>
        <item name="colorOnPrimary">#329D9C</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">#329D9C</item>
        <item name="colorSecondaryVariant">#329D9C</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimary</item>
        <!-- Customize your theme here. -->
    </style>

    <style name="Widget.App.Button.OutlinedButton.Icon" parent="Widget.MaterialComponents.Button.OutlinedButton.Icon">
        <item name="android:padding">0dp</item>
        <item name="iconPadding">0dp</item>
        <item name="android:insetTop">0dp</item>
        <item name="android:insetBottom">0dp</item>
        <item name="android:insetLeft">0dp</item>
        <item name="android:insetRight">0dp</item>
    </style>

    <style name="ShapeAppearanceOverlay.MyApp.Button.Circle" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>

</resources>

Answer 1

我认为白色的间隙是状态栏。您可能不小心将其颜色更改为白色，这最终隐藏了栏上的所有白色图标，使其看起来像一个白色间隙。

您在 ThemeOne 和 ThemeTwo 中将 colorPrimaryVariant 设置为白色，确保您没有使用这些主题，因为它们会使您的状态栏变白。

materialToolBar 页面顶部的空白 space

Blank space on top of the page over materialToolBar

android

android-coordinatorlayout

android-nestedscrollview

android-constraintlayout