如何使用ConstraintLayout-Flow实现不同单元格尺寸的GridView

Hey there, let's tackle that annoying gap showing up right after your v3 view in the Flow layout. The root of the issue lies in how flow_maxElementsWrap="2" interacts with your dummy view and weight configuration—even though your dummy has a weight of 0, Flow still reserves space for it in the row because of the max elements per wrap rule, creating that unwanted gap.

Solution 1: Remove the Dummy View & Adjust Flow Styles #

This is the cleaner approach, as we can eliminate the dummy view entirely by tweaking Flow's row-specific styling:

<androidx.constraintlayout.helper.widget.Flow 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    app:constraint_referenced_ids="v1,v2,v3,v4,v5" 
    app:flow_horizontalGap="10dp" 
    app:flow_verticalGap="10dp" 
    app:flow_horizontalStyle="spread_inside" 
    app:flow_firstHorizontalStyle="spread" <!-- Fixes single-element row stretching -->
    app:flow_maxElementsWrap="2" 
    app:flow_verticalAlign="top" 
    app:flow_wrapMode="aligned"/> <!-- Ensures consistent weight calculation across rows -->

<View android:id="@+id/v1" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    app:layout_constraintHorizontal_weight="1"/> 
<View android:id="@+id/v2" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    app:layout_constraintHorizontal_weight="1"/> 
<View android:id="@+id/v3" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    app:layout_constraintHorizontal_weight="2"/> 
<View android:id="@+id/v4" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    app:layout_constraintHorizontal_weight="1"/> 
<View android:id="@+id/v5" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    app:layout_constraintHorizontal_weight="1"/>

Why this works:

• flow_firstHorizontalStyle="spread" makes the row containing only v3 stretch to fill the full width (since v3's weight of 2 equals the sum of v1 + v2's weights), eliminating the gap.
• flow_wrapMode="aligned" ensures rows align properly and weight calculations stay consistent across all rows.

Solution 2: Keep the Dummy View & Ignore Invisible Elements #

If you need to retain the dummy view for specific logic, adjust its visibility and tell Flow to ignore it:

<androidx.constraintlayout.helper.widget.Flow 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    app:constraint_referenced_ids="v1,v2,v3,dummyView,v4,v5" 
    app:flow_horizontalGap="10dp" 
    app:flow_verticalGap="10dp" 
    app:flow_horizontalStyle="spread_inside" 
    app:flow_maxElementsWrap="2" 
    app:flow_verticalAlign="top" 
    app:flow_wrapMode="chain"
    app:flow_ignoreInvisible="true"/> <!-- Tells Flow to skip gone views -->

<View android:id="@+id/v1" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    app:layout_constraintHorizontal_weight="1"/> 
<View android:id="@+id/v2" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    app:layout_constraintHorizontal_weight="1"/> 
<View android:id="@+id/v3" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    app:layout_constraintHorizontal_weight="2"/> 
<View android:id="@+id/dummyView" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    app:layout_constraintHorizontal_weight="0"
    android:visibility="gone"/> <!-- Hide the dummy view -->
<View android:id="@+id/v4" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    app:layout_constraintHorizontal_weight="1"/> 
<View android:id="@+id/v5" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    app:layout_constraintHorizontal_weight="1"/>

Why this works:

• Setting android:visibility="gone" on the dummy view removes it from the layout, and app:flow_ignoreInvisible="true" ensures Flow doesn't reserve space for it in the row with v3, eliminating the gap.

Either solution should resolve the gap issue while keeping your desired grid layout intact.

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