You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在ChipGroup中实现Chip水平分布对齐及多行混合布局

3个Chip水平分布实现方案

ChipGroup默认不支持自动分散对齐子控件,要实现起始、居中、末尾对齐的水平分布效果,可按如下方式修改:

  • 给ChipGroup设置app:singleLine="true"、android:layout_width="match_parent",移除原有app:chipSpacingHorizontal配置
  • 在第1、2个Chip后各插入1个Space控件,给两个Space都设置android:layout_width="0dp"、android:layout_height="match_parent"、android:layout_weight="1",即可自动撑满剩余空间,实现三个Chip的分布效果
多行混合布局实现方案

你目前用LinearLayout包裹TextView实现换行的方案可正常运行,还有更简洁的原生方案:
Material Components 1.2.0及以上版本的ChipGroup支持子项强制换行属性,只需给需要另起一行的子控件添加app:layout_chip_newLine="true"属性即可,无需额外嵌套布局:

  • 给TextView添加该属性,即可让其单独占第二行
  • 给第4个Chip也添加该属性,即可让第三行的3个Chip单独成行
  • 如果需要控制行间距,可直接给对应子项设置android:layout_marginVertical属性即可
修改后完整布局代码
<com.google.android.material.chip.ChipGroup
    android:id="@+id/chipGroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:singleSelection="true">

    <!-- 第一行3个Chip -->
    <com.google.android.material.chip.Chip
        android:id="@+id/chip_1"
        style="@style/CustomChipChoice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="false"
        android:text="8:30 AM"
        app:chipCornerRadius="7dp" />

    <Space
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip_2"
        style="@style/CustomChipChoice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="false"
        android:text="9:00 AM"
        app:chipCornerRadius="7dp" />

    <Space
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip_3"
        style="@style/CustomChipChoice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="false"
        android:text="9:30 AM"
        app:chipCornerRadius="7dp" />

    <!-- 第二行TextView 强制换行 -->
    <TextView
        android:id="@+id/TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:fontFamily="@font/poppins_bold"
        android:text="TextView"
        android:textSize="18sp"
        app:layout_chip_newLine="true" />

    <!-- 第三行3个Chip 强制换行 -->
    <com.google.android.material.chip.Chip
        android:id="@+id/chip_4"
        style="@style/CustomChipChoice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="false"
        android:text="8:30 AM"
        app:chipCornerRadius="7dp"
        app:layout_chip_newLine="true" />

    <Space
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip_5"
        style="@style/CustomChipChoice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="false"
        android:text="8:30 AM"
        app:chipCornerRadius="7dp" />

    <Space
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip_6"
        style="@style/CustomChipChoice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="false"
        android:text="8:30 AM"
        app:chipCornerRadius="7dp" />
</com.google.android.material.chip.ChipGroup>

内容的提问来源于stack exchange,提问作者lawayben

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.04 10:09:02