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

第一个

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 {

        }
    }