Android BottomSheet初始显示内容未贴合顶部的问题求助

我按照BottomSheet官方文档完成集成，但遇到一个问题：初始显示时，BottomSheet内容顶部与组件顶部存在明显间距（见截图1）；向上滚动展示全部内容后，内容会贴合组件顶部（见截图2）。相关代码与布局如下，求修复方法？

布局文件 bottomsheet_layout.xml #

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
  android:id="@+id/coordinator"
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  xmlns:app="http://schemas.android.com/apk/res-auto">
  
  <FrameLayout
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
    
    <androidx.constraintlayout.widget.ConstraintLayout
      android:id="@+id/clBottomSheet"
      android:layout_width="match_parent"
      android:layout_height="wrap_content">

      <com.google.android.material.bottomsheet.BottomSheetDragHandleView
        android:id="@+id/drag_handle"
        android:layout_width="match_parent"
        android:layout_height="16dp"
        android:contentDescription="@string/no_qr_code_button"
        app:layout_constraintTop_toTopOf="parent"/>

      <TextView
        android:id="@+id/bottom_sheet_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/section_header_style"
        android:background="@color/background"
        android:text="@string/no_qr_code_button"
        android:textStyle="bold"
        android:layout_below="@+id/drag_handle"
        app:layout_constraintTop_toBottomOf="@+id/drag_handle"
        app:layout_constraintStart_toStartOf="parent"/>
      
      <ImageButton
        android:id="@+id/bottom_sheet_button_close"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_close"
        android:background="@color/background"
        android:layout_toEndOf="@+id/bottom_sheet_title"
        android:layout_above="@+id/tv_no_qr_help_body_1"
        android:contentDescription="@string/no_qr_help_close_button_content_description"
        app:layout_constraintTop_toBottomOf="@id/drag_handle"
        app:layout_constraintEnd_toEndOf="parent"
        android:paddingEnd="@dimen/readid_margin"
        android:paddingTop="@dimen/readid_margin_small"/>

      <TextView
        android:id="@+id/tv_no_qr_help_body_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/text_style"
        android:padding="@dimen/readid_margin"
        android:text="@string/no_qr_help_body_1"
        android:layout_below="@+id/bottom_sheet_title"
        android:background="@color/background"
        app:layout_constraintTop_toBottomOf="@id/bottom_sheet_title"/>
      
      <TextView
        android:id="@+id/tv_no_qr_help_title_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/section_header_style"
        android:text="@string/no_qr_help_title_2"
        android:textStyle="bold"
        android:background="@color/background"
        android:layout_below="@+id/tv_no_qr_help_body_1"
        app:layout_constraintTop_toBottomOf="@id/tv_no_qr_help_body_1"/>
      
      
      <TextView
        android:id="@+id/tv_no_qr_help_body_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/text_style"
        android:padding="@dimen/readid_margin"
        android:text="@string/no_qr_help_body_2"
        android:layout_below="@+id/tv_no_qr_help_title_2"
        app:layout_constraintTop_toBottomOf="@id/tv_no_qr_help_title_2"/>
      
      <TextView
        android:id="@+id/tv_no_qr_help_title_3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/section_header_style"
        android:text="@string/no_qr_help_title_3"
        android:textStyle="bold"
        android:background="@color/background"
        android:layout_below="@+id/tv_no_qr_help_body_2"
        app:layout_constraintTop_toBottomOf="@id/tv_no_qr_help_body_2"/>
      
      <TextView
        android:id="@+id/tv_no_qr_help_body_3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/text_style"
        android:padding="@dimen/readid_margin"
        android:text="@string/no_qr_help_body_3"
        android:layout_below="@+id/tv_no_qr_help_title_3"
        app:layout_constraintTop_toBottomOf="@id/tv_no_qr_help_title_3"/>
      
    </androidx.constraintlayout.widget.ConstraintLayout>
  </FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

调用代码 #

private fun showNoQrCodeBottomSheet(context: Context) {
    val bottomSheet = BottomSheetDialog(context)
    bottomSheet.setContentView(R.layout.bottomsheet_layout)
    bottomSheet.show()

    val button = bottomSheet.findViewById<ImageButton>(R.id.bottom_sheet_button_close)
    button?.setOnClickListener {
        bottomSheet.dismiss()
    }
}

截图 #

修复方案 #

问题根源 #

1. 双重BottomSheet行为冲突：BottomSheetDialog内部已经自带了CoordinatorLayout和BottomSheetBehavior，你在布局里又额外嵌套了一层带BottomSheetBehavior的布局，导致布局计算异常，出现初始顶部间距。
2. 混合布局属性：布局中同时使用了RelativeLayout的layout_below、layout_toEndOf等属性和ConstraintLayout的约束，干扰了布局的正确计算。

具体修复步骤 #

1. 简化布局结构：删除外层的CoordinatorLayout和带BottomSheetBehavior的FrameLayout，直接用ConstraintLayout作为布局根节点，因为BottomSheetDialog会自动处理BottomSheet的行为。
2. 清理混合属性：删除所有RelativeLayout相关属性（比如layout_below、layout_toEndOf），只保留ConstraintLayout的约束配置。
3. （可选）自定义Behavior参数：如果需要设置初始高度（peek height）等，可以通过BottomSheetDialog获取内部的BottomSheetBehavior来配置。

修改后的布局示例 #

<?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:id="@+id/clBottomSheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/background">

    <com.google.android.material.bottomsheet.BottomSheetDragHandleView
        android:id="@+id/drag_handle"
        android:layout_width="match_parent"
        android:layout_height="16dp"
        android:contentDescription="@string/no_qr_code_button"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/bottom_sheet_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/section_header_style"
        android:text="@string/no_qr_code_button"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/drag_handle"
        app:layout_constraintStart_toStartOf="parent"/>
    
    <ImageButton
        android:id="@+id/bottom_sheet_button_close"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_close"
        android:contentDescription="@string/no_qr_help_close_button_content_description"
        app:layout_constraintTop_toBottomOf="@id/drag_handle"
        app:layout_constraintEnd_toEndOf="parent"
        android:paddingEnd="@dimen/readid_margin"
        android:paddingTop="@dimen/readid_margin_small"/>

    <TextView
        android:id="@+id/tv_no_qr_help_body_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/text_style"
        android:padding="@dimen/readid_margin"
        android:text="@string/no_qr_help_body_1"
        app:layout_constraintTop_toBottomOf="@id/bottom_sheet_title"/>
    
    <TextView
        android:id="@+id/tv_no_qr_help_title_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/section_header_style"
        android:text="@string/no_qr_help_title_2"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@id/tv_no_qr_help_body_1"/>
    
    <TextView
        android:id="@+id/tv_no_qr_help_body_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/text_style"
        android:padding="@dimen/readid_margin"
        android:text="@string/no_qr_help_body_2"
        app:layout_constraintTop_toBottomOf="@id/tv_no_qr_help_title_2"/>
    
    <TextView
        android:id="@+id/tv_no_qr_help_title_3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/section_header_style"
        android:text="@string/no_qr_help_title_3"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@id/tv_no_qr_help_body_2"/>
    
    <TextView
        android:id="@+id/tv_no_qr_help_body_3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/text_style"
        android:padding="@dimen/readid_margin"
        android:text="@string/no_qr_help_body_3"
        app:layout_constraintTop_toBottomOf="@id/tv_no_qr_help_title_3"/>
    
</androidx.constraintlayout.widget.ConstraintLayout>

（可选）设置初始显示高度 #

如果需要自定义BottomSheet的初始显示高度，可以在调用代码中添加：

private fun showNoQrCodeBottomSheet(context: Context) {
    val bottomSheet = BottomSheetDialog(context)
    bottomSheet.setContentView(R.layout.bottomsheet_layout)
    
    // 获取BottomSheetBehavior并设置初始高度
    val bottomSheetView = bottomSheet.findViewById<View>(R.id.clBottomSheet)
    bottomSheetView?.let {
        val behavior = BottomSheetBehavior.from(it)
        behavior.peekHeight = 300 // 单位：px，可根据需求调整
    }
    
    bottomSheet.show()

    val button = bottomSheet.findViewById<ImageButton>(R.id.bottom_sheet_button_close)
    button?.setOnClickListener {
        bottomSheet.dismiss()
    }
}

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