You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何设置Bottom Sheet的peek高度以初始仅显示指定部分?

动态设置Bottom Sheet Peek高度的实用方案

这个问题我太有共鸣了!之前做表单类Bottom Sheet时,硬写app:behavior_peekHeight简直是噩梦——内容一调整就得改数值,完全不灵活。下面给你几个亲测有效的解决方案:

方法一:测量目标View高度动态设置peekHeight

这是最直接的方案,核心思路是等布局完成后,测量前两个LinearLayout的实际高度,再把总和设为peekHeight。

关键代码示例(Kotlin)

// 获取Bottom Sheet的根布局(假设是LinearLayout,id为bottomSheetRoot)
val bottomSheetRoot = findViewById<LinearLayout>(R.id.bottomSheetRoot)
val behavior = BottomSheetBehavior.from(bottomSheetRoot)

// 必须等布局完成后才能拿到正确的View高度,用post()延迟执行
bottomSheetRoot.post {
    // 获取前两个LinearLayout
    val firstLayout = bottomSheetRoot.getChildAt(0) as LinearLayout
    val secondLayout = bottomSheetRoot.getChildAt(1) as LinearLayout
    
    // 计算总高度:两个View的高度 + 它们之间的间距(如果有margin的话)
    val firstMargin = (firstLayout.layoutParams as MarginLayoutParams).bottomMargin
    val totalPeekHeight = firstLayout.measuredHeight + secondLayout.measuredHeight + firstMargin
    
    // 设置peek高度
    behavior.peekHeight = totalPeekHeight
}

注意点

  • 绝对不能直接在onCreate/onViewCreated里拿View高度!那时候View还没完成测量,拿到的都是0。post()会把任务放到UI队列末尾,等布局渲染完成后执行,能保证拿到真实高度。
  • 别忘了算上View的margin、padding,不然peek高度会比实际显示的少一截,视觉上很别扭。

方法二:自定义BottomSheetBehavior实现自动适配

如果你的Bottom Sheet内容会动态变化(比如加载网络数据、用户操作修改内容),可以自定义Behavior,让它自动在布局时计算peek高度。

自定义Behavior示例

class AutoPeekBottomSheetBehavior(context: Context, attrs: AttributeSet) : BottomSheetBehavior<View>(context, attrs) {

    override fun onLayoutChild(parent: CoordinatorLayout, child: View, layoutDirection: Int): Boolean {
        val result = super.onLayoutChild(parent, child, layoutDirection)
        
        // 仅当根布局是LinearLayout时处理
        if (child is LinearLayout && child.childCount >= 2) {
            val firstView = child.getChildAt(0)
            val secondView = child.getChildAt(1)
            
            // 计算前两个View的总高度(包含间距)
            val margin = (firstView.layoutParams as MarginLayoutParams).bottomMargin
            val peekHeight = firstView.measuredHeight + secondView.measuredHeight + margin
            
            this.peekHeight = peekHeight
        }
        return result
    }
}

XML中使用自定义Behavior

<LinearLayout
    android:id="@+id/bottomSheetRoot"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="com.yourpackage.AutoPeekBottomSheetBehavior">
    
    <!-- 你的前两个LinearLayout及其他内容 -->
</LinearLayout>

额外提示

  • 如果内容是RecyclerView,需要监听RecyclerView的布局完成事件,等前两个item渲染后再测量高度总和。
  • 可以把计算高度的逻辑封装成工具方法,比如calculatePeekHeight(rootView: LinearLayout, showItemCount: Int),方便复用。

内容的提问来源于stack exchange,提问作者Damn Vegetables

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.19 10:30:42