ConstraintLayout水平空间不足时如何仅用XML实现按钮垂直排布

核心问题原因 #

当前用固定50%占比垂直Guideline拆分水平空间的方案，本质是强制给两个按钮分配了固定宽度，完全没有给布局留自适应调整的空间，当按钮文本长度超过分配的固定宽度时，自然会触发系统默认的断字逻辑。

实现方案（无任何Java/Kotlin代码） #

使用ConstraintLayout 2.0+自带的Flow虚拟布局实现，该组件原生支持根据可用空间自动切换排布方向，全程仅需XML配置：

1. 首先给两个MaterialButton关闭断字、设置单行显示，从控件层面避免断字出现：

   <com.google.android.material.button.MaterialButton
       android:id="@+id/btn_continue"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="继续"
       android:maxLines="1"
       android:hyphenationFrequency="none"
       android:ellipsize="none"/>
   
   <com.google.android.material.button.MaterialButton
       android:id="@+id/btn_cancel"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="取消"
       android:maxLines="1"
       android:hyphenationFrequency="none"
       android:ellipsize="none"/>
   

2. 在ConstraintLayout内添加Flow虚拟布局，关联两个按钮，配置自动换行规则，替换原有的Guideline固定拆分逻辑：

   <androidx.constraintlayout.helper.widget.Flow
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       app:layout_constraintTop_toTopOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:constraint_referenced_ids="btn_continue,btn_cancel"
       app:flow_wrapMode="chain"
       app:flow_horizontalGap="16dp"
       app:flow_verticalGap="12dp"
       app:flow_horizontalStyle="spread_inside"
       app:flow_verticalStyle="packed"
       app:flow_verticalMatchConstraint="true"
       app:flow_verticalBias="0.5"/>
   

关键属性说明 #

• app:flow_wrapMode="chain"：启用链式排布模式，会自动测量子View的固有宽度，当水平空间不足以放下所有子View+间距时，自动将后续子View折行显示
• app:flow_verticalMatchConstraint="true"：子View折为垂直排布时，自动让按钮宽度匹配父布局可用宽度，避免按钮过窄
• android:hyphenationFrequency="none"：关闭系统自动断字逻辑，保证文本不会被强制拆分换行
• 按钮宽度必须设置为wrap_content，不要给按钮设置固定宽度/固定占比，否则Flow无法正确测量文本固有宽度触发布局切换

效果验证 #

• 当水平空间充足，两个按钮的文本总宽度+间距小于可用宽度时，自动保持水平并排
• 当文本过长，水平排布总宽度超过可用空间时，自动将第二个按钮折到下一行，呈上下垂直排列，全程无运行时代码介入。

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