Flutter实现ToggleButton子组件分为两行布局的方法

直接通过嵌套布局容器就能搞定：用垂直布局容器包裹两个水平布局容器，分别承载1-5和6-10的文本按钮。以下是Jetpack Compose和XML两种常见实现方式：

Jetpack Compose 实现 #

Column(
    modifier = Modifier.padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    // 第一行：数字1-5
    Row(
        horizontalArrangement = Arrangement.SpaceEvenly,
        modifier = Modifier.fillMaxWidth()
    ) {
        (1..5).forEach { num ->
            ToggleButton(
                checked = false, // 替换为你的选中状态变量
                onCheckedChange = { /* 处理选中逻辑 */ },
                modifier = Modifier.padding(4.dp)
            ) {
                Text(num.toString())
            }
        }
    }

    // 第二行：数字6-10
    Row(
        horizontalArrangement = Arrangement.SpaceEvenly,
        modifier = Modifier.fillMaxWidth().padding(top = 8.dp)
    ) {
        (6..10).forEach { num ->
            ToggleButton(
                checked = false, // 替换为你的选中状态变量
                onCheckedChange = { /* 处理选中逻辑 */ },
                modifier = Modifier.padding(4.dp)
            ) {
                Text(num.toString())
            }
        }
    }
}

XML 布局实现 #

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <!-- 第一行：数字1-5 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:weightSum="5">

        <ToggleButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textOn="1"
            android:textOff="1"/>

        <ToggleButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textOn="2"
            android:textOff="2"/>

        <!-- 依次添加数字3、4、5的ToggleButton -->
    </LinearLayout>

    <!-- 第二行：数字6-10 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:weightSum="5"
        android:layout_marginTop="8dp">

        <ToggleButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textOn="6"
            android:textOff="6"/>

        <!-- 依次添加数字7、8、9、10的ToggleButton -->
    </LinearLayout>

</LinearLayout>

核心要点 #

• 外层用垂直布局（Compose的Column/XML的垂直LinearLayout）拆分两行结构
• 每行用水平布局（Compose的Row/XML的水平LinearLayout）排列按钮，通过布局权重（XML）或排列规则（Compose）让按钮均匀分布
• 选中状态可通过列表变量统一管理，比如Compose里用mutableStateListOf<Boolean>(false, false, ...)对应10个按钮的状态

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