Jetpack Compose 的 3 大错误（不惜一切代价避免）

Posted 2023-01-02 安果移不动

第一个

package com.example.test_compose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.viewModels
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.MaterialTheme.colors
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.dp
import com.example.test_compose.ui.MainViewModel
import com.example.test_compose.ui.theme.Test_composeTheme

class MainActivity : ComponentActivity() 
    private val viewModel by viewModels<MainViewModel>()
    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)
        viewModel.test()
        setContent 
            Test_composeTheme 
                // A surface container using the 'background' color from the theme
                Surface(modifier = Modifier.fillMaxSize(), color = colors.background) 
                    Mistake1()
                
            
        
    


@Composable
fun Mistake1() 
    val scrollState = rememberScrollState()
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(scrollState)
    ) 
        for (i in 1..20) 
            MyListItem(
                scrollState = scrollState.value.toFloat(), modifier = Modifier.fillMaxWidth()
            )
        

    



@Composable
fun MyListItem(scrollState: Float, modifier: Modifier) 

    Text(text = "scroll Item", modifier = modifier
        .padding(32.dp)
        .graphicsLayer 
            translationX = scrollState
        )

上述会导致频繁绘制。

正确写法。也很简单

package com.example.test_compose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.viewModels
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.MaterialTheme.colors
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.dp
import com.example.test_compose.ui.MainViewModel
import com.example.test_compose.ui.theme.Test_composeTheme

class MainActivity : ComponentActivity() 
    private val viewModel by viewModels<MainViewModel>()
    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)
        viewModel.test()
        setContent 
            Test_composeTheme 
                // A surface container using the 'background' color from the theme
                Surface(modifier = Modifier.fillMaxSize(), color = colors.background) 
                    Mistake1()
                
            
        
    


@Composable
fun Mistake1() 
    val scrollState = rememberScrollState()
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(scrollState)
    ) 
        for (i in 1..20) 
            MyListItem(
                scrollState = 
                    scrollState.value.toFloat()
                , modifier = Modifier.fillMaxWidth()
            )
        

    



@Composable
fun MyListItem(scrollState: () -> Float, modifier: Modifier) 

    Text(text = "scroll Item", modifier = modifier
        .padding(32.dp)
        .graphicsLayer 
            translationX = scrollState()
        )

将复杂的重绘放到一个方法里面

每次变动才重新绘制 而不是没20个条目变动一起绘制

错误2

@Composable
fun LoginScreen(viewModel: MainViewModel) 
    val scope = rememberCoroutineScope()
    Box 
        Button(onClick = 

            scope.launch 
                viewModel.test()
            
        ) 
    

 

而是应该用

 

 错误3

 @Composable
    fun LoginScreen(
        isLoggedIn: Boolean,
        navController: NavController
    ) 
        if (isLoggedIn) 
            navController.navigate("main_screen")
        
        Box 
            
        
    

正确写法

    @Composable
    fun LoginScreen(
        isLoggedIn: Boolean,
        navController: NavController
    ) 
        LaunchedEffect(key1 = isLoggedIn, block =
            if (isLoggedIn) 
                navController.navigate("main_screen")
            
         )

        Box