LazyColumn 包含 20 个 TextField 组件，UI 体验冻结和耗时和滚动滞后

问：

LazyColumn 包含 20 个 TextField 组件。导航到此屏幕时，UI 会遇到冻结和耗时，并且在滚动时会出现滞后行为。 如何解决

@Composable
fun LazyColumnTest(){
    LazyColumn{
        items(5){
            CardView()
        }
    }
}

card在这里查看功能

@Composable
fun CardView(){
    val primaryColor = 0xFF8C1517 // Hex color value for #8C1517

    Card(
        modifier = Modifier
            .padding(16.dp)
            .wrapContentHeight()
    )
    {
        Column(
            modifier = Modifier.padding(16.dp),
            verticalArrangement = Arrangement.Top
        ) {

            Text(
                text = "text1 ",
                color = Color(primaryColor),
                fontWeight = FontWeight.Bold,
                style = TextStyle(fontSize = 18.sp)
            )

            Row(
            ) {
                //Field 1
                var firstID by remember { mutableStateOf(TextFieldValue("")) }
                OutlinedTextField(
                    value = firstID, onValueChange = { newText ->
                        if (newText.text.length <= 12) { // Limit to 12 characters
                            firstID = newText
                        }
                    },
                    singleLine = true,
                    modifier = Modifier
                        .weight(1f)
                        .padding(8.dp),
                    label = { Text(text = "First UID*", color = Color(primaryColor)) },
                    keyboardOptions = KeyboardOptions.Default.copy(
                        keyboardType = KeyboardType.Number,
                        imeAction = ImeAction.Done
                    ),
                    colors = TextFieldDefaults.outlinedTextFieldColors(
                        focusedBorderColor = Color(primaryColor),
                        cursorColor = Color(primaryColor),
                        placeholderColor = Color(primaryColor)
                    )
                )
                //Field 2
                var secondId by remember { mutableStateOf(TextFieldValue("")) }
                OutlinedTextField(
                    value = secondId, onValueChange = {
                        secondId = it
                    },
                    singleLine = true,
                    modifier = Modifier
                        .weight(1f)
                        .padding(8.dp),
                    label = { Text(text = "second ID", color = Color(primaryColor)) },
                    colors = TextFieldDefaults.outlinedTextFieldColors(
                        focusedBorderColor = Color(primaryColor),
                        cursorColor = Color(primaryColor),
                        placeholderColor = Color(primaryColor)
                    )
                )
                OutlinedTextField(
                    value = firstID, onValueChange = { newText ->
                        if (newText.text.length <= 12) { // Limit to 12 characters
                            firstID = newText
                        }
                    },
                    singleLine = true,
                    modifier = Modifier
                        .weight(1f)
                        .padding(8.dp),
                    label = { Text(text = "First UID*", color = Color(primaryColor)) },
                    keyboardOptions = KeyboardOptions.Default.copy(
                        keyboardType = KeyboardType.Number,
                        imeAction = ImeAction.Done
                    ),
                    colors = TextFieldDefaults.outlinedTextFieldColors(
                        focusedBorderColor = Color(primaryColor),
                        cursorColor = Color(primaryColor),
                        placeholderColor = Color(primaryColor)
                    )
                )
                //Field 2
                OutlinedTextField(
                    value = secondId, onValueChange = {
                        secondId = it
                    },
                    singleLine = true,
                    modifier = Modifier
                        .weight(1f)
                        .padding(8.dp),
                    label = { Text(text = "second ID", color = Color(primaryColor)) },
                    colors = TextFieldDefaults.outlinedTextFieldColors(
                        focusedBorderColor = Color(primaryColor),
                        cursorColor = Color(primaryColor),
                        placeholderColor = Color(primaryColor)
                    )
                )
            }
        }
    }
}

@Composable
fun AsyncContent() {
    var loading by remember { mutableStateOf(true) }

    LaunchedEffect(true) {
        withContext(Dispatchers.IO) {
            delay(500)
            loading = false
        }
    }



    if (loading) {
        LoadingScreen()
    } else {
         LazyColumnTest()
    }
}

MainActivity 调用可组合函数 AsyncContent（）

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
 setContent {
            SHFLTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                   AsyncContent()
                   
                }
            }
}
}

我也尝试过具有平滑滚动的列，但是当导航到该屏幕时，它消耗了更多时间。现在尝试使用 lazyColumn 实现这一目标，但仍然没有任何帮助。

我想实现 30 个或更多，然后它 OutlinedTextField 和其他字段以单屏形式加载，加载流畅，无需花费很长时间，也不会面临任何形式的延迟

因为它使用异步布局 Inflater 加载 XML 的长屏 UI

如果还有什么可以帮助实现这一目标，请告诉我。

谢谢