Jetpack Compose，屏幕渲染时间较长

Question

我的项目链接：我的项目链接

点击左侧导航栏的“测试”按钮，花很长时间绘制“TestApplyView”。

@Composable
fun TestView(testViewModel: TestViewModel) {
    val navController = rememberNavController()

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 10.dp)
                .background(Color.White)
        ) {
            TopTabBar(text = "Apply", R.mipmap.ic_home_view_barrel, onClick = { navController.navigate("Apply") })
            TopTabBar(text = "Test", R.mipmap.ic_home_view_barrel, onClick = { navController.navigate("Test") })
            TopTabBar(text = "Record", R.mipmap.ic_home_view_barrel, onClick = { navController.navigate("Record") })
            TopTabBar(text = "Report", R.mipmap.ic_home_view_barrel, onClick = { navController.navigate("Report") })
        }

        NavHost(
            navController = navController,
            startDestination = "Apply"
        ) {
            composable("Apply") { TestApplyView(viewModel = testViewModel) }
            composable("Test") { Text("Test") }
            composable("Record") { TestRecordView(testViewModel = testViewModel) }
            composable("Report") { TestReportView() }
        }
    }
}

点击“测试”，编写“TestApplyView”

@Composable
fun TestApplyView(viewModel: TestViewModel) {

    Column(modifier = Modifier.fillMaxSize()) {
        RackSelectView(viewModel = viewModel)
        Row(
            modifier = Modifier
                .fillMaxSize()
                .padding(top = 10.dp)
        ) {
            TubeSelectView(modifier = Modifier.weight(2f))
            Spacer(modifier = Modifier.width(10.dp))
            ItemSelectView(modifier = Modifier.weight(1f))
        }
    }
}

@Composable
fun TubeSelectView(modifier: Modifier) {

    val tubes = List(8) { it }

    Column(
        modifier = modifier
            .fillMaxSize()
            .background(Color.White)
            .border(1.dp, color = Color.Black),
    ) {
        Header()

        LazyColumn(modifier = Modifier.weight(1f)) {
            items(tubes, key = { it }) { tube ->
                TubeItem(tubeIndex = tube + 1)
            }
        }

        Footer()
    }
}

@可组合 私人乐趣 TubeItem(tubeIndex: Int) {

val context = LocalContext.current
val sampleTypes = listOf("血清", "血浆", "全血", "尿液")

Row(
    modifier = Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically
) {

    Text(text = tubeIndex.toString(), fontSize = 24.sp, modifier = Modifier.weight(0.5f), textAlign = TextAlign.Center)


    OutlinedTextField(
        value = "",
        onValueChange = {  },
        modifier = Modifier
            .weight(1.2f)
            .padding(horizontal = 5.dp),
        singleLine = true,
        textStyle = TextStyle(fontSize = 18.sp, lineHeight = 24.sp, textAlign = TextAlign.Center)
    )

    OutlinedTextField(
        value = "",
        onValueChange = {  },
        modifier = Modifier
            .weight(2.5f)
            .padding(horizontal = 5.dp),
        singleLine = true,
        textStyle = TextStyle(fontSize = 18.sp, lineHeight = 24.sp, textAlign = TextAlign.Center)
    )

    DropDownMenu(
        modifier = Modifier
            .weight(1f)
            .padding(horizontal = 5.dp),
        options = sampleTypes,
        onItemSelected = {  }
    )

    DropDownMenu(
        modifier = Modifier
            .weight(1.2f)
            .padding(horizontal = 5.dp),
        options = sampleTypes,
        onItemSelected = {  }
    )

    OutlinedTextField(
        value = "",
        onValueChange = {  },
        modifier = Modifier
            .weight(1f)
            .padding(horizontal = 5.dp),
        singleLine = true,
        textStyle = TextStyle(fontSize = 18.sp, lineHeight = 24.sp, textAlign = TextAlign.Center)
    )

    OutlinedTextField(
        value = "",
        onValueChange = {  },
        modifier = Modifier
            .weight(1.8f)
            .padding(horizontal = 5.dp),
        singleLine = true,
        textStyle = TextStyle(fontSize = 18.sp, lineHeight = 24.sp, textAlign = TextAlign.Center)
    )

    IconTubeDelete(
        modifier = Modifier.width(60.dp),
        size = 32.dp,
        onClick = {
            Toast.makeText(context, "delete1", Toast.LENGTH_SHORT).show()
        }
    )
}

}

我发现在 TubeItem 控件中注释掉 OutlinedTextField 可以使界面绘制速度更快。 OutlinedTextField 是否消耗设备性能？

我刚刚开始使用jetpackcompound，我真的找不到原因。

帮助

Answer 1

我使用 Jetpack Compose 和 NavHost 进行导航，在切换屏幕时遇到性能问题。导航转换后，UI 需要大约 7 秒的时间来渲染并完全显示新屏幕。屏幕渲染的这种延迟非常明显，我正在寻找潜在的原因和优化建议来提高性能。