如何在Google Tip Time应用中实现边缘到边缘手势导航的系统栏内边距？

一、修复UI上移、「Cost of Service」被应用栏遮挡的问题 #

你之前改括号解决编译错误但没搞定布局偏移，核心是没正确给布局加上系统窗口的适配内边距，按下面的步骤来：

1. 正确配置Edge-to-Edge代码
   在MainActivity的onCreate里，用官方推荐的方式开启edge-to-edge，同时给根布局动态设置内边距（别硬写固定值，适配不同设备）：

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       // 开启edge-to-edge，让布局延伸到系统栏区域
       WindowCompat.setDecorFitsSystemWindows(window, false)
       setContentView(R.layout.activity_main)
   
       // 获取页面根布局
       val rootLayout = findViewById<View>(android.R.id.content)
       // 监听系统窗口内边距变化，动态设置padding
       ViewCompat.setOnApplyWindowInsetsListener(rootLayout) { view, insets ->
           val systemInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
           // 给根布局添加上、左、右padding，避开状态栏和侧边手势区；底部padding避开导航栏
           view.setPadding(systemInsets.left, systemInsets.top, systemInsets.right, systemInsets.bottom)
           insets
       }
   }
   

2. 检查AppBar的布局配置
   如果用了AppBarLayout和Toolbar，给下方的内容布局加上app:layout_behavior，让它自动避开AppBar的高度：

   <androidx.coordinatorlayout.widget.CoordinatorLayout
       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">
   
       <com.google.android.material.appbar.AppBarLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content">
   
           <androidx.appcompat.widget.Toolbar
               android:id="@+id/toolbar"
               android:layout_width="match_parent"
               android:layout_height="?attr/actionBarSize"
               android:background="?attr/colorPrimary"/>
       </com.google.android.material.appbar.AppBarLayout>
   
       <!-- 内容布局，加behavior自动避开AppBar -->
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           app:layout_behavior="@string/appbar_scrolling_view_behavior"
           android:orientation="vertical"
           android:padding="16dp">
   
           <!-- 这里放「Cost of Service」等控件 -->
       </LinearLayout>
   </androidx.coordinatorlayout.widget.CoordinatorLayout>
   

二、让状态栏颜色与应用栏融合 #

不用单独修改状态栏的深蓝色，直接在themes.xml里配置让状态栏继承应用栏的颜色就行：

1. 确保你的主题继承自Material Components的主题，比如Theme.MaterialComponents.DayNight.NoActionBar（用自定义Toolbar的话）
2. 添加这些属性：

   <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.NoActionBar">
       <!-- 应用栏的主颜色 -->
       <item name="colorPrimary">@color/your_appbar_color</item>
       <!-- 状态栏颜色设为和应用栏一致 -->
       <item name="android:statusBarColor">?attr/colorPrimary</item>
       <!-- 导航栏保持透明（你之前已经加了） -->
       <item name="android:navigationBarColor">@android:color/transparent</item>
       <!-- 让布局能延伸到系统栏 -->
       <item name="android:windowTranslucentStatus">true</item>
       <item name="android:windowTranslucentNavigation">true</item>
       <!-- 适配Android 11+，自动调整状态栏图标颜色（浅色主题设为true，深色设为false） -->
       <item name="android:windowLightStatusBar">@bool/is_light_theme</item>
   </style>
   

另外提醒下：WindowCompat.setDecorFitsSystemWindows(window, false)这个设置会让布局铺满整个屏幕（包括系统栏区域），所以必须配合动态设置内边距，不然就会出现控件被系统栏遮挡的问题，这也是你之前UI异常的核心原因。

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