【Android Compose】ListView效果

Jetpack Compose 使用入门
Jetpack Compose 教程
Jetpack Compose

1、Column、Row 和 Box

Compose 中的三个基本标准布局元素是 Column、Row 和 Box 可组合项。

2、LazyColumn和LazyRow

androidx.compose.foundation.lazy.LazyColumn
androidx.compose.foundation.lazy.LazyRow
androidx.compose.foundation.lazy.items

3、Compose 中的状态

7. Compose 中的状态

• mutableStateOf 函数，该函数可让 Compose 重组读取该 State 的函数
• 如需在重组后保留状态，请使用 remember 记住可变状态
• onClick 它不接受值，而接受函数

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
// ...@Composable
fun Greeting(...) {val expanded = remember { mutableStateOf(false) }ElevatedButton(onClick = { expanded.value = !expanded.value },) {Text(if (expanded.value) "Show less" else "Show more")}
}

4、ListView效果

https://gitee.com/xhbruce/XhAndroidDemo

package com.xhbruce.xhandroiddemoimport Message
import SampleData
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.ElevatedButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.core.view.WindowCompat
import com.xhbruce.xhandroiddemo.ui.theme.XhAndroidDemoThemeclass MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)enableEdgeToEdge()WindowCompat.setDecorFitsSystemWindows(window, true)setContent {XhAndroidDemoTheme {//PreviewGreeting()Conversation(SampleData.conversationSample)}}}
}@Composable
fun MessageCard(msg: Message) {// We keep track if the message is expanded or not in this// variablevar isExpanded by remember { mutableStateOf(false) }// surfaceColor will be updated gradually from one color to the otherval surfaceColor by animateColorAsState(if (isExpanded)MaterialTheme.colorScheme.primaryelseMaterialTheme.colorScheme.surface,)// We toggle the isExpanded variable when we click on this ColumnColumn(modifier = Modifier.clickable { isExpanded = !isExpanded }.fillMaxSize()) {Text(text = msg.author,color = MaterialTheme.colorScheme.secondary,style = MaterialTheme.typography.titleSmall)Spacer(modifier = Modifier.height(4.dp))Surface(shape = MaterialTheme.shapes.medium,shadowElevation = 1.dp,// surfaceColor color will be changing gradually from primary to surfacecolor = surfaceColor,// animateContentSize will change the Surface size graduallymodifier = Modifier.animateContentSize().padding(1.dp)) {Text(text = msg.body,modifier = Modifier.padding(all = 4.dp),// If the message is expanded, we display all its content// otherwise we only display the first linemaxLines = if (isExpanded) Int.MAX_VALUE else 1,style = MaterialTheme.typography.bodyMedium)}}
}@Composable
fun Conversation(messages: List<Message>) {LazyColumn {items(messages) { message ->MessageCard(message)}}
}@Preview
@Composable
fun PreviewMessageCard() {XhAndroidDemoTheme {Conversation(SampleData.conversationSample)}
}@Preview
@Composable
fun PreviewGreeting() {val expanded = remember { mutableStateOf(false) }ElevatedButton(onClick = { expanded.value = !expanded.value },) {Text(if (expanded.value) "Show less" else "Show more")}
}

5、android-compose-codelabs

git clone https://github.com/googlecodelabs/android-compose-codelabs.git