“This is the fourth day of my participation in the August More Text Challenge. For details, see: August More Text Challenge.”

Compose can be used with multiple Jetpack components

Compose can work with multiple Jetpack components to improve development efficiency

Multiple combinations

Compose is used with ViewModel

An overview of the

In Compose, the ViewModel is used in the same way that Jetpack is used. Normally, when we’re building a page, we can only pass in the method parameters if we want to use one piece of data for multiple layouts. But this is obviously unreasonable and reduces the readability of the code.

The ViewModel is a perfect solution to this problem. To use the ViewModel in Compose, you need to introduce the Lifecycle viewModel-compose library. To obtain the ViewModel, you need to use the extension function ViewModel () :

Using viewModel() to retrieve the viewModel object in multiple @composable decorated functions enables the same viewModel object to be fetched. This is why we were able to solve the problem

The above is limited to the same navigation page. If you’re in a different navigation page, the viewModels you get are different objects, just as if you’re getting different ViewModels from different activities

Depend on the support

implementation 'androidx. Lifecycle: lifecycle - viewmodel - compose: 1.0.0 - alpha07'
Copy the code

code

@Composable
fun useWithViewModel(a) {
    val datas = remember {
        mutableStateListOf(
            ItemData(title = "Increments the value in the ViewModel by 1 and displays.", content = "0"))}val model: ExampleViewModel = viewModel()// Get the ViewModel object
    Scaffold(topBar = {
        buildTopBar(title = "Compose and ViewModel.")
    }) {
        ListView(
            datas = datas,
            state = rememberLazyListState(),
            click = { itemData: ItemData, index, _ ->
                model.increase()// The object in the ViewModel increments by 1
                itemData.content = model.count.toString()// Refresh the data
                changeData(datas, index)
            })
    }
}
Copy the code

ExampleViewModel object

class ExampleViewModel: ViewModel() {
    fun increase(a) {
        count++
    }

    var count =0
}
Copy the code

The data stream Flow

An overview of the

Compose can use Flow without importing dependencies, and the usage is basically the same. For example, if StateFlow is used in Compose, you do not need to enable collect in coroutine to collect data flows. You can directly use Flow. CollectAsState to obtain the values in StateFlow for display.

The sample code

The following code uses MutableStateFlow to implement data listening. The function is refreshed when the value of MutableStateFlow is updated, and collectAsState is used to retrieve the latest value for display.

Click on the button below to change the value, and the contents of the button above will change the display effect


@Composable
fun useStateFlow(a) {
    var repository = remember {
        Repository()
    }
    Column {
        listItem(
            itemData = ItemData(
                title = "Click to change the value of StateFlow",
                content = repository.stateFlow.collectAsState().value// Get the value display in StateFlow
            ), onClick = {
            })
        changeUiWithState(repository)
    }

}

@Composable
fun changeUiWithState(repository: Repository) {
    listItem(itemData = ItemData(title = "Click to change data"), onClick = {
        repository.increase()// Click to increase the value by 1})}class Repository {
    val stateFlow = MutableStateFlow("Initial value 0")
    var count = 0
    fun increase(a): Int {
        stateFlow.value = count.toString()// Change the value in StateFlow
        return count++
    }
}
Copy the code

Running effect

Hilt

Beginners can delay learning Hilt, which is not necessary for learning something

Hilt is used in much the same way as traditional development. Check out my other post: juejin.cn/post/696714…

coil

Coil is a gallery that you can use to load remote images in Compose

Rely on

implementation 'IO. Coil - kt: coil - compose: 1.3.2'
Copy the code

code

@Composable
fun useCoil(a) {
    val painter =
        rememberImagePainter(data = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201501%2F27%2F20150127103509 _KvXhU. Jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1631501719 & t = 9653 a6a5bb4e29505b9b582c770b42ef",
            builder = {
                crossfade(true)
            })
    Image(
        modifier = Modifier
            .size(300.dp)
            .clip(shape = RoundedCornerShape(20.dp)),
        painter = painter,
        contentDescription = "")}Copy the code

Effect of various

Circular effect display

 rememberImagePainter(data = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201501%2F27%2F20150127103509 _KvXhU. Jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1631501719 & t = 9653 a6a5bb4e29505b9b582c770b42ef",
            builder = {
                transformations(CircleCropTransformation())
            })
Copy the code

The rounded effect

  rememberImagePainter(data = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201501%2F27%2F20150127103509 _KvXhU. Jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1631501719 & t = 9653 a6a5bb4e29505b9b582c770b42ef",
            builder = {
                transformations(
                    RoundedCornersTransformation()
                )
            })
Copy the code

Circle with grey effect

  val painter =
        rememberImagePainter(data = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201501%2F27%2F20150127103509 _KvXhU. Jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1631501719 & t = 9653 a6a5bb4e29505b9b582c770b42ef",
            builder = {
                transformations(
                    listOf(GrayscaleTransformation(), CircleCropTransformation())
                )
            })
Copy the code

Follow my official account “Ananzhuo” to learn more