LazyColumn 落后于 Jetpack Compose

Question

我使用lazyColumn制作了简单的30天应用程序，但是当我在手机上启动它时，它有巨大的滞后。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            _30DaysTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    _30DaysApp()

                }
            }
        }
    }
}

@Composable
fun _30DaysApp() {
    Scaffold(topBar =  {
        TopBar()
    }) {
        LazyColumn(
            contentPadding = it,
            verticalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            itemsIndexed(items = tasks,
                key = { _, task ->
                    task.id
                }) { index, task ->
                CardTask(task = task, day = index + 1)
            }
        }
    }
}

@Composable
fun CardTask(task: Task, day: Int, modifier: Modifier = Modifier) {
    var expand by remember { mutableStateOf(false )}
    Card(shape = RoundedCornerShape(16.dp),
        modifier = Modifier
            .padding(horizontal = 8.dp)
            .clickable { expand = !expand }) {
        Column(
            modifier = modifier
                .animateContentSize(
                    animationSpec = spring(
                        dampingRatio = Spring.DampingRatioNoBouncy,
                        stiffness = Spring.StiffnessMedium
                    )
                )
                .padding(12.dp)
        ) {
            Row {
                Text(
                    text = stringResource(R.string.day, day),
                    fontSize = 16.sp,
                    fontWeight = FontWeight.Bold
                )
                Spacer(modifier = modifier.weight(1f))
                ExpandButton(
                    expanded = expand,
                    modifier = Modifier.size(24.dp)
                )
            }
            Text(
                text = stringResource(task.articleRes),
                fontSize = 24.sp
            )
            Spacer(modifier = Modifier.size(8.dp))
            Image(
                painter = painterResource(task.imageRes), contentDescription = null,
                contentScale = ContentScale.FillWidth,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(160.dp)
                    .clip(RoundedCornerShape(12.dp)),
            )
            if (expand) {
                Text(
                    text = stringResource(task.descriptionRes),
                    fontFamily = Poppins,
                    modifier = Modifier.padding(top = 12.dp)
                )
            }

        }
    }
}

@Composable
fun ExpandButton(expanded: Boolean, modifier: Modifier = Modifier) {
        Icon(modifier = modifier,
            imageVector = if (expanded) Icons.Filled.ExpandLess else Icons.Filled.ExpandMore,
            contentDescription = null,
            tint = MaterialTheme.colorScheme.secondary
        )
}

@Stable
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopBar(modifier: Modifier = Modifier){
    CenterAlignedTopAppBar(title = {
        Text(text = stringResource(R.string.topBarDescription),
            style = MaterialTheme.typography.headlineMedium,
            fontSize = 26.sp)
    })

}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    _30DaysTheme {
        _30DaysApp()

    }
}

这是我正在使用的课程

@Immutable
data class Task(
    @StringRes val articleRes: Int,
    @StringRes val descriptionRes: Int,
    @DrawableRes val imageRes: Int,
    val id: String = UUID.randomUUID().toString()
)

我尝试添加密钥、图像压缩、添加 @Immutable 和 @Stable 注释，发布构建和 R8 编译器，但它仍然滞后很多。如有任何帮助，我们将不胜感激。

Answer 1

问题是在列表中加载图像。为此，您必须安装线圈库并更改线路

Image(
            painter = rememberAsyncImagePainter(task.imageRes)