Flow是什么

Flow 是一种新的虚拟布局，它专门用来构建链式排版效果，当出现空间不足的情况时，它能够自动换行，甚至是自动延展到屏幕的另一区域。

Flow应用场景

当您需要对多个元素进行链式布局，但不确定在运行时布局空间的实际大小是多少，那么 Flow 对您来说就非常有用。您可以使用 Flow 来实现让布局随着应用屏幕尺寸的变化 (比如设备发生旋转后出现的屏幕宽度变化) 而动态地进行自适应。

Flow 是一种虚拟布局。在 Constraint Layout 中，虚拟布局 (Virtual layouts) 作为 virtual view group 的角色参与约束和布局中，但是它们并不会作为视图添加到视图层级结构中，而是仅仅引用其它视图来辅助它们在布局系统中完成各自的布局功能。

在 Constraint Layout 2.0 中，您可以用 Flow 标签来使用这一功能。Flow 会通过您传递的 constraint_referenced_ids 参数来获取到要引用的所有视图，然后根据这些视图创建一个虚拟的 virtual view group，再对这些视图进行链式布局。

Flow属性

wrapMode

Flow 中最重要的一个配置选项是 wrapMode，它可以决定在内容溢出 (或出现换行) 时的布局行为。

您可以对 wrapMode 指定三种模式:

none – 所有引用的视图以一条链的方式进行布局，如果内容溢出则溢出内容不可见；
chain – 当出现溢出时，溢出的内容会自动换行，以新的一条链的方式进行布局；
align – 同 chain 类似，但是不以行而是以列的方式进行布局。

布局代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context=".MainActivity">

    <androidx.constraintlayout.helper.widget.Flow
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="card1,card2,card3,card4"
        app:flow_horizontalGap="12dp"
        app:flow_verticalGap="12dp"
        app:flow_wrapMode="chain"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/card1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/purple_200"
        app:cardCornerRadius="8dp">

        <androidx.appcompat.widget.AppCompatTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="The Card 1 Ha" />
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/card2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/purple_200"
        app:cardCornerRadius="8dp">

        <androidx.appcompat.widget.AppCompatTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="Card 2" />
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/card3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/purple_200"
        app:cardCornerRadius="8dp">

        <androidx.appcompat.widget.AppCompatTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="The Card 3" />
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/card4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/purple_200"
        app:cardCornerRadius="8dp">

        <androidx.appcompat.widget.AppCompatTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="Card 4" />
    </com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.widget.ConstraintLayout>

app:flow_wrapMode="chain"如图1：