如何用Google Flexbox库实现类似StaggeredLayoutManager的瀑布流布局？

当然可以用Google的Flexbox库实现类似StaggeredLayoutManager的瀑布流效果！你当前遇到的单列布局和宽高比丢失问题，主要是因为没给Flexbox配置正确的方向和Item尺寸规则，我来帮你一步步解决：

1. 先解决多列布局问题 #

你之前的代码里，FlexboxLayoutManager默认的flexDirection是COLUMN（垂直方向），所以才会变成单列。我们需要把方向改成ROW，再给每个Item设置宽度占比，让它们自动换行排列：

方法一：在Item布局里直接配置Flex属性 #

创建你的图片Item布局（比如item_waterfall_image.xml），给ImageView加上Flex相关属性，控制它的宽度占比：

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/iv_waterfall"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true" <!-- 关键：保留宽高比 -->
    android:scaleType="centerCrop" <!-- 可选：按需选择图片缩放方式 -->
    app:layout_flexBasisPercent="50%" <!-- 两列布局，每列占父容器50%宽度 -->
    app:layout_flexGrow="1" /> <!-- 让Item自动填充剩余空间 -->

方法二：在代码中动态设置Item的Flex参数 #

如果需要根据屏幕尺寸动态调整列数，可以在Adapter的onCreateViewHolder里给Item设置布局参数：

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ImageViewHolder {
    val view = LayoutInflater.from(parent.context).inflate(R.layout.item_waterfall_image, parent, false)
    // 给Item设置Flex布局参数
    val layoutParams = view.layoutParams as FlexboxLayoutManager.LayoutParams
    layoutParams.flexBasisPercent = 0.5f // 两列，可根据需求改成0.33f（三列）等
    layoutParams.flexGrow = 1f
    view.layoutParams = layoutParams
    return ImageViewHolder(view)
}

2. 配置RecyclerView的FlexboxLayoutManager #

更新你的RecyclerView初始化代码，设置正确的Flex方向和换行规则：

recyclerView.apply {
    layoutManager = FlexboxLayoutManager(context).apply {
        flexDirection = FlexDirection.ROW // 设置为水平方向排列
        flexWrap = FlexWrap.WRAP // 自动换行
        justifyContent = JustifyContent.SPACE_BETWEEN // 让列间距更均匀，可选
    }
    adapter = mAdapter
    // 可选：添加Item间距，让布局更美观
    addItemDecoration(object : RecyclerView.ItemDecoration() {
        override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
            val spacing = 8.dpToPx(parent.context)
            outRect.set(spacing, spacing, spacing, spacing)
        }
    })
}

// 扩展函数：dp转px，方便计算间距
fun Int.dpToPx(context: Context): Int {
    return (this * context.resources.displayMetrics.density).toInt()
}

为什么你的原始代码不行？ #

• 默认flexDirection是COLUMN，所以Item垂直排列成单列，改成ROW才能横向排列并换行
• 没有给Item设置宽度占比，图片会撑满父容器宽度，加上没开启adjustViewBounds，导致宽高比丢失

额外优化：动态调整列数 #

如果想根据屏幕宽度自动适配列数（比如平板上显示3列，手机上显示2列），可以计算flexBasisPercent：

val screenWidth = Resources.getSystem().displayMetrics.widthPixels
val columnCount = if (screenWidth > 1200) 3 else 2 // 屏幕宽度大于1200dp时显示3列
val flexBasisPercent = 1f / columnCount // 计算每列的宽度占比

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