在 Jetpack Compose 中将某些内容放在 LazyColumn 下方

Question

我希望我的屏幕显示一个滚动列表和一个位于其下方的按钮。该按钮应始终可见。我尝试了以下，但它没有用。 LazyColumn 占据了整个屏幕。我希望 Button 占据底部的 space，然后 LazyColumn 占据屏幕的其余部分。

Column(Modifier.fillMaxSize()) {
    LazyColumn {
        items(50) { i ->
            Text("Row $i", Modifier.fillMaxWidth().padding(8.dp))
        }
    }
    Button(onClick = { println("hi") }) {
        Text("Hello")
    }
}

Answer 1

您可以将 weight 修饰符应用于 lazyColumn：

Column(Modifier.fillMaxSize()) {
    LazyColumn(Modifier.weight(1f)) {
        items(50) { i ->
            Text("Row $i", Modifier.fillMaxWidth().padding(8.dp))
        }
    }
    Button(onClick = { println("hi") }) {
        Text("Hello")
    }
}

这在Jetpack Compose basics codelab

中也有说明

在 Jetpack Compose 中将某些内容放在 LazyColumn 下方

Putting something below a LazyColumn in Jetpack Compose

android-jetpack-compose