FlexBoxLayout：仅在按钮换行时如何实现按钮拉伸？

解决方案 #

方案一：纯XML近似实现（接近需求）

通过调整FlexboxLayout和按钮的属性，实现大部分需求：

<com.google.android.flexbox.FlexboxLayout
    android:id="@+id/buttons"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexDirection="row"
    app:flexWrap="wrap_reverse"
    app:alignItems="center"
    app:gap="16dp"> <!-- 统一设置按钮间间距 -->

  <com.google.android.material.button.MaterialButton
      android:id="@+id/negative_btn"
      style="@style/OutlinedButton"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_flexGrow="1"
      android:maxWidth="match_parent"
      android:singleLine="false"
      android:ellipsize="none"/>

  <com.google.android.material.button.MaterialButton
      android:id="@+id/positive_btn"
      style="@style/TonalButton"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_flexGrow="1"
      android:maxWidth="match_parent"
      android:singleLine="false"
      android:ellipsize="none"/>
</com.google.android.flexbox.FlexboxLayout>

修改说明：

• 用app:gap替代单独margin，统一控制按钮间距
• app:layout_flexGrow="1"让按钮在单独一行时自动填充父容器宽度
• android:maxWidth="match_parent"防止文本过长时按钮超出容器
• 开启android:singleLine="false"允许按钮文本换行，适配填充后的宽度

方案二：XML+代码完美实现（完全符合需求）

如果需要短文本时按钮严格适配内容（不被拉伸），需结合代码动态调整：
XML部分：

<com.google.android.flexbox.FlexboxLayout
    android:id="@+id/buttons"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexDirection="row"
    app:flexWrap="wrap_reverse"
    app:alignItems="center"
    app:gap="16dp">

  <com.google.android.material.button.MaterialButton
      android:id="@+id/negative_btn"
      style="@style/OutlinedButton"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"/>

  <com.google.android.material.button.MaterialButton
      android:id="@+id/positive_btn"
      style="@style/TonalButton"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"/>
</com.google.android.flexbox.FlexboxLayout>

Kotlin代码部分：

val buttons = findViewById<FlexboxLayout>(R.id.buttons)
val negativeBtn = findViewById<MaterialButton>(R.id.negative_btn)
val positiveBtn = findViewById<MaterialButton>(R.id.positive_btn)

buttons.addOnLayoutChangeListener { _, _, _, _, _, _, _, _, _ ->
    // 判断两个按钮是否在同一行
    val isSameLine = negativeBtn.top == positiveBtn.top

    val negativeParams = negativeBtn.layoutParams as FlexboxLayout.LayoutParams
    val positiveParams = positiveBtn.layoutParams as FlexboxLayout.LayoutParams

    if (isSameLine) {
        // 同一行：保持按钮宽度适配文本
        negativeParams.flexGrow = 0f
        negativeParams.width = ViewGroup.LayoutParams.WRAP_CONTENT
        positiveParams.flexGrow = 0f
        positiveParams.width = ViewGroup.LayoutParams.WRAP_CONTENT
    } else {
        // 换行：按钮填充父容器宽度
        negativeParams.flexGrow = 1f
        negativeParams.width = ViewGroup.LayoutParams.MATCH_PARENT
        positiveParams.flexGrow = 1f
        positiveParams.width = ViewGroup.LayoutParams.MATCH_PARENT
    }

    negativeBtn.layoutParams = negativeParams
    positiveBtn.layoutParams = positiveParams
}

修改说明：

• 监听布局变化，判断按钮是否处于同一行
• 同一行时保持wrap_content宽度，严格适配文本
• 换行后切换为MATCH_PARENT宽度，让按钮填充父容器

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