Question

I have an Android Jetpack Compose screen. I am showing a list of things that includes an image and some text on each row. I have implemented LazyRow to do this.

我要补充以下内容:当我点击任何一行时,我会再举一句话。另一个点击将掩盖这一补充案文。因此,点击名单上的行踪像 to。

Is there a way to granularly update a specific row? I have a viewModel that backs the data for this composable. But if I force a refresh with the whole list with one row updated, it recomposes the image for all the rows which wasteful.

建议采取什么方法做 compos? 我找不到任何途径来更新一只 la。

Is there a way to cache the painter object so that it does not get recreated unncesserarily? I am beginning to miss the good old RecyclerView!

 LazyColumn(modifier) {
    this.itemsIndexed(flags, key = {_, flagData -> "${flagData.countryName}:${flagData.group} "}) {index, flagData ->
        RenderFlagRow(index, flagData, onRowClicked)
        HorizontalDivider(modifier = Modifier.fillMaxWidth(), thickness = 2.dp, color = Color.LightGray)
    }
}

Answer 1

Well, one of the ways is just creating a conditional based on a trigger/saved value.

如果用户点击DogItemButton,盒子将扩大,显示额外信息。但是,你只能显示你们重新思考的任何情况。

@Composable
fun DogItem(dog: Dog, modifier: Modifier = Modifier) {

// var expanded will be used to track whether the dog item is expanded.
   
    var expanded by remember { mutableStateOf(false) }
    Card(modifier = modifier) {
        Column(
            modifier = modifier
                .animateContentSize(
                    animationSpec = spring(
                        dampingRatio = Spring.DampingRatioLowBouncy,
                        stiffness = Spring.StiffnessMedium
                    )
                )
        ) {
            Row(modifier = Modifier.fillMaxWidth()) {
                DogIcon(dog.imageResourceId)
                DogInformation(dog.name, dog.age)
                Spacer(modifier = Modifier.weight(1f))
                DogItemButton(expanded = expanded, onClick = { expanded = !expanded })
            }
            if (expanded) {
                DogHobby(
                    dogHobby = dog.hobbies,
                    modifier = Modifier.padding(
                        start = dimensionResource(id = R.dimen.padding_medium),
                        top = dimensionResource(id = R.dimen.padding_small),
                        end = dimensionResource(id = R.dimen.padding_medium),
                        bottom = dimensionResource(id = R.dimen.padding_medium)
                    )
                )
            }
        }
    }
}

这里指与 la合使用的切片。

Scaffold(
        topBar = { WoofTopAppBar() },
    ) { it ->
        LazyColumn(contentPadding = it) {
            items(dogs) {
                DogItem(
                    dog = it,
                    modifier = Modifier.padding(dimensionResource(R.dimen.padding_small))
                )
            }
        }
    }

友情链接