如何在Jetpack Compose中实现点击按钮多次添加山羊信息卡片？

你之前用布尔值控制新增Card的方式只能生效一次，核心原因是布尔值只有「显示/隐藏」两种状态，无法记录多个新增项。正确的做法是用动态列表数据来维护所有山羊Card的数据源，每次点击按钮就往列表里添加新的山羊数据，Compose会自动触发重组渲染新的Card。

具体实现步骤 #

1. 确保有山羊数据类（如果还没定义）

先定义一个存储山羊信息的数据类，用来给Card提供数据源：

data class Goat(
    val id: Int,
    val name: String = "", // 给默认值，新增时可以先显示空内容再录入
    val age: String = "",
    // 其他你需要的属性，比如品种、编号等
)

2. 在Composable中维护可变状态的山羊列表

用mutableStateOf结合列表来存储所有山羊数据，点击按钮时往列表里追加新数据：

@Composable
fun GoatFarmScreen() {
    // 用rememberSaveable避免屏幕旋转等配置变更丢失数据
    var goatList by rememberSaveable {
        mutableStateOf(
            // 初始列表，包含你已录入的山羊
            listOf(Goat(id = 1, name = "山羊1", age = "2岁"))
        )
    }
    var currentId by rememberSaveable { mutableStateOf(2) } // 生成唯一ID，避免重复

    Column(
        modifier = Modifier.fillMaxSize().padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        // 新增按钮
        Button(onClick = {
            // 点击时添加新的空山羊数据到列表
            goatList = goatList + Goat(id = currentId)
            currentId++ // ID自增，保证每个山羊唯一
        }) {
            Text("添加新山羊")
        }

        // 用LazyColumn渲染所有山羊Card
        LazyColumn(verticalArrangement = Arrangement.spacedBy(12.dp)) {
            items(goatList) { goat ->
                // 你的山羊Card组件，传入当前山羊的数据
                GoatCard(goat = goat)
            }
        }
    }
}

3. 调整你的GoatCard组件

让Card组件接收Goat数据作为参数，这样每个Card都能对应唯一的山羊信息：

@Composable
fun GoatCard(goat: Goat) {
    Card(
        modifier = Modifier.fillMaxWidth(),
        elevation = CardDefaults.cardElevation(4.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = "ID: ${goat.id}")
            Text(text = "姓名: ${goat.name}")
            Text(text = "年龄: ${goat.age}")
            // 这里放你原来的录入UI，比如输入框（如果需要可编辑，要结合状态更新goat数据）
        }
    }
}

进阶：用ViewModel分离业务逻辑（推荐） #

如果项目规模稍大，建议把列表状态放到ViewModel里，避免Composable代码太臃肿，同时更方便处理数据持久化等逻辑：

class GoatViewModel : ViewModel() {
    // 用mutableStateListOf，修改时Compose能自动感知
    private val _goatList = mutableStateListOf<Goat>(Goat(id = 1, name = "山羊1", age = "2岁"))
    val goatList: List<Goat> = _goatList

    private var currentId = 2

    fun addNewGoat() {
        _goatList.add(Goat(id = currentId))
        currentId++
    }
}

// 在Composable中使用ViewModel
@Composable
fun GoatFarmScreen(viewModel: GoatViewModel = viewModel()) {
    Column(
        modifier = Modifier.fillMaxSize().padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        Button(onClick = { viewModel.addNewGoat() }) {
            Text("添加新山羊")
        }

        LazyColumn(verticalArrangement = Arrangement.spacedBy(12.dp)) {
            items(viewModel.goatList) { goat ->
                GoatCard(goat = goat)
            }
        }
    }
}

这样每次点击按钮，都会往列表里新增一个山羊数据项，LazyColumn会自动渲染对应的Card，完美实现点击一次新增一个的需求。

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