jetPack 撰写约束布局问题

Question

jetPack compose 如果graphlayer 的值（比如alpha 或任何其他属性）发生变化，则约束布局会重新组合。这不应该是因为图形层用于动画目的。

已编辑：

这是代码。我猜更新 alph 会导致重新组合 who 工作表，从而导致 BottomSheetScaffold 渲染缓慢。

使用框和列创建的同一工作表可实现最佳性能

package com.prime.player.audio.sheet

import android.graphics.Typeface
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ChainStyle
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Dimension
import com.prime.player.R
import com.prime.player.composables.marqueText.MarqueText
import com.prime.player.theme.PlayerTheme
import dev.chrisbanes.accompanist.insets.statusBarsPadding

private const val TAG = "Sheet"
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun Sheet(
    progress: Float
) {
    //val alpha  = if (progress != -1.0f) 1- progress else null
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (
            mini_player, app_name, close, now_playing, playlist,
            artist, artwork, title, play, timer, seekBar, lyrics,
            label, upNext,
        ) = createRefs()

        createVerticalChain(
            app_name,
            now_playing,
            playlist,
            artist,
            artwork,
            title,
            lyrics,
            timer,
            seekBar,
            play,

            label,
            upNext,
            chainStyle = ChainStyle.Packed
        )




        Text(
            text = stringResource(id = R.string.app_name),
            maxLines = 1,
            fontFamily = FontFamily.Cursive,
            style = PlayerTheme.typography.h2,
            color = PlayerTheme.colors.onSurface,
            modifier = Modifier
                .statusBarsPadding()
                .padding(start = 16.dp)
                .constrainAs(app_name) {

                }
        )

        IconButton(
            onClick = { /*TODO*/ },
            modifier = Modifier.constrainAs(close) {
                end.linkTo(parent.end)
                top.linkTo(app_name.top)
                bottom.linkTo(app_name.bottom)
            }
        ) {
            Icon(
                painter = painterResource(id = R.drawable.ic_close),
                contentDescription = "close",
            )
        }


        Text(
            text = "Now Playing",
            maxLines = 1,
            style = PlayerTheme.typography.h6,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.constrainAs(now_playing) {
                start.linkTo(app_name.start, 16.dp)
            }
        )

        Text(
            text = "All Tracks",
            maxLines = 1,
            style = PlayerTheme.typography.caption,
            fontWeight = FontWeight.SemiBold,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.constrainAs(playlist) {
                start.linkTo(parent.start, margin = 26.dp)
            }
        )
        //Artist
        Text(
            text = "Nusrat Fateh Ali Khan",
            maxLines = 1,
            style = PlayerTheme.typography.body2,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier
                .padding(top = 10.dp)
                .constrainAs(artist) {
                    start.linkTo(parent.start, 16.dp)
                }
        )


        Artwork(
            modifier = Modifier
                .padding(top = 16.dp)
                .constrainAs(artwork) {
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    height = Dimension.fillToConstraints
                }
        )

        MarqueText(
            text = "Mere Rashke karmr tune pehli Nazr jub Nazr say Melaie Maza Aa gaya",
            textSize = 48f,
            typeFace = Typeface.DEFAULT_BOLD,
            modifier = Modifier.constrainAs(title) {
                start.linkTo(parent.start, 30.dp)
                end.linkTo(parent.end, 30.dp)
                width = Dimension.fillToConstraints
            }
        )

        Text(
            text = buildAnnotatedString {
                withStyle(style = SpanStyle(color = PlayerTheme.colors.onSurface.copy(alpha = 0.7f))) {
                    append("Hale Dil Hova aisa, Dil ki lehar jaise\n")
                }
                withStyle(style = SpanStyle(color = PlayerTheme.colors.onSurface,
                    fontSize = 20.sp)) {
                    append("Jis Ka Na Illage Koie\n")
                }
                withStyle(style = SpanStyle(color = PlayerTheme.colors.onSurface.copy(alpha = 0.7f))) {
                    append("Dard ye Zahar jaisa")
                }
            },
            textAlign = TextAlign.Center,
            maxLines = 3,
            style = PlayerTheme.typography.caption,
            fontWeight = FontWeight.SemiBold,
            modifier = Modifier
                .padding(bottom = 10.dp)
                .constrainAs(lyrics) {
                    start.linkTo(parent.start, 30.dp)
                    end.linkTo(parent.end, 30.dp)
                    width = Dimension.fillToConstraints
                }
        )

        PlayRow(
            modifier = Modifier
                .constrainAs(play) {
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    width = Dimension.fillToConstraints
                }
        )

        Text(
            text = "1:30/3:42",
            modifier = Modifier
                .padding(bottom = 10.dp)
                .constrainAs(timer) {
                    start.linkTo(seekBar.start)
                },
            style = PlayerTheme.typography.caption,
            fontWeight = FontWeight.Bold
        )
        LinearProgressIndicator(
            progress = 0.1f,
            modifier = Modifier
                .padding(bottom = 10.dp)
                .constrainAs(seekBar) {
                    start.linkTo(parent.start, 30.dp)
                    end.linkTo(parent.end, 30.dp)
                    width = Dimension.fillToConstraints
                    height =Dimension.preferredValue(1.dp)
                }

        )



        Text(
            text = "Up Next",
            style = PlayerTheme.typography.h6,
            maxLines = 1,
            modifier = Modifier.constrainAs(label) {
                start.linkTo(parent.start, 16.dp)
            }
        )

        NextTrack(Modifier
            .padding(16.dp)
            .constrainAs(upNext) {
                start.linkTo(parent.start)
                end.linkTo(parent.end)
                width = Dimension.fillToConstraints
            })
     /*   MiniPlayer(
            modifier = Modifier
                .graphicsLayer {
                    if (alpha != null)
                        this.alpha = alpha
                }
                .constrainAs(mini_player) {
                    start.linkTo(parent.start)
                    top.linkTo(parent.top)
                }
        )*/
    }
}