android 如何在jetpack compose中的动态按钮上显示loader

uyto3xhc 于 2023-06-20 发布在 Android

关注(0)|答案(2)|浏览(177)

所以我面临的问题是我有一个可以有动态文本的按钮，按钮有一个状态isLoading，当它变成true时，View被重组为显示加载器。现在装载机有自己的宽度和高度。我如何管理装载机遵循相同的尺寸作为文本，这是前面所示。现在，当加载器出现时，按钮大小变大，加载完成后，isLoading再次为false，按钮将达到其实际大小，其中包含文本。
编辑1：@thracian建议的方法工作正常，除了一个奇怪的问题，即按钮获得一些预定义的高度（因此在计算视图高度时导致相同的值），这使得按钮看起来比我计划实现的要高。为ref附加代码，我如何使这个按钮跟随 Package 的内容&同时在视图大小中获得相同的计算值。

@Composable
fun GreenCTA(
    modifier: Modifier = Modifier, onClick: () -> Unit, title: String, isShowLoader: Boolean
) {
    var buttonSize by remember {
        mutableStateOf(DpSize.Zero)
    }
    val density = LocalDensity.current
    Button(
        modifier = modifier
            .then(if (buttonSize != DpSize.Zero) modifier.size(buttonSize) else modifier)
            .onSizeChanged { newSize ->
                if (buttonSize == DpSize.Zero) {
                    buttonSize = with(density) {
                        newSize
                            .toSize()
                            .toDpSize()
                    }
                }
            },
        onClick = { onClick.invoke() },
        border = BorderStroke(1.dp, color = colorResource(id = R.color.pass_color_c2e6cd)),
        colors = ButtonDefaults.buttonColors(backgroundColor = colorResource(id = R.color.pass_color_e3f6ec)),
        shape = RoundedCornerShape(6.dp),
        contentPadding = PaddingValues(horizontal = 12.dp, vertical = 8.dp),
        elevation = ButtonDefaults.elevation(0.dp),
    ) {
        if (isShowLoader) BlueLoader(
            modifier = Modifier
                .fillMaxHeight()
                .aspectRatio(3f)
        )
        else {
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                Image(
                    painter = painterResource(id = R.drawable.ic_add_tag),
                    contentDescription = "Button Logo"
                )
                Text(
                    text = title,
                    style = MaterialTheme.typography.body2.copy(lineHeight = 20.sp),
                    fontWeight = FontWeight.SemiBold,
                )
            }
        }
    }
}

android

来源：https://stackoverflow.com/questions/76463998/how-to-show-loader-on-a-dynamic-button-in-jetpack-compose

2条答案

按热度按时间

h7appiyu1#

如果您希望根据最初合成的文本调整按钮的大小，您可以在显示文本时使用Modifier.onSizeChanged作为按钮尺寸，然后在文本未合成时将这些尺寸设置为按钮的大小，例如

Preview
@Composable
private fun Test() {
    var isLoading by remember { mutableStateOf(false) }
    var buttonSize by remember { mutableStateOf(DpSize.Zero) }
    val density = LocalDensity.current
    OutlinedButton(
        modifier = Modifier
            .then(
                if (buttonSize != DpSize.Zero) Modifier.size(buttonSize) else Modifier
            )
            .onSizeChanged { newSize ->
                if (buttonSize == DpSize.Zero) {
                    buttonSize = with(density) {
                        newSize
                            .toSize()
                            .toDpSize()
                    }
                }
            },
        onClick = { isLoading = isLoading.not() }) {
        if (isLoading) {
            CircularProgressIndicator(
                modifier = Modifier
                    .fillMaxHeight()
                    .aspectRatio(1f)
            )
        } else {
            Text(text = "Click me")
        }
    }
}

另外，如果你想调整一个Button的大小到一个还没有组合的Composable，比如加载器的大小，你可以使用SubcomposeLayout来预先获得尺寸，就像下面的答案一样
How to adjust size of component to it's child and remain unchanged when it's child size will change? (Jetpack Compose)

展开查看全部

赞(0）回复(0）举报 2023-06-20

niknxzdl2#

您可以使用下面的自定义组合来实现您的要求：

@Composable
fun ButtonWithLoader(
    buttonText: String,
    backgroundColor: Color,
    contentColor: Color = White,
    showLoader: Boolean = false,
    showBorder: Boolean,
    onClick: () -> Unit,
) {
    if (showLoader) {
        Row(
            modifier = Modifier
                .widthIn(max = 600.dp)
                .fillMaxWidth()
                .padding(start = 20.dp, end = 20.dp, top = 20.dp)
                .height(48.dp)
                .motionClickEvent { onClick() }
                .border(
                    if (showBorder) 1.dp else 0.dp,
                    colors.textPrimary.copy(0.08f),
                    RoundedCornerShape(50.dp)
                )
                .background(backgroundColor, RoundedCornerShape(50.dp)),
            horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically
        ) {
            CircularProgressIndicator(color = colors.primary, modifier = Modifier.size(28.dp))
        }
    } else {
        Row(
            modifier = Modifier
                .widthIn(max = 600.dp)
                .fillMaxWidth()
                .padding(start = 20.dp, end = 20.dp, top = 20.dp)
                .height(48.dp)
                .motionClickEvent { onClick() } // motionClickEvent is my custom click modifier, use clickable modifier over here
                .border(
                    if (showBorder) 1.dp else 0.dp,
                    colors.textPrimary.copy(0.08f),
                    RoundedCornerShape(50.dp)
                )
                .background(backgroundColor, RoundedCornerShape(50.dp)),
            horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                text = buttonText,
                style = AppTheme.typography.buttonStyle,
                color = contentColor,
                modifier = Modifier.padding(horizontal = 12.dp)
            )
        }
    }
}

用途：

var isGoogleLoginInProgress by remember { mutableStateOf(false) }
ButtonWithLoader(
   buttonText = stringResource(R.string.sign_in_method_sign_in_with_google_btn_text),
   backgroundColor = White,
   contentColor = textColor.copy(0.87f),
   showBorder = true,
   showLoader = isGoogleLoginInProgress
) {
     isGoogleLoginInProgress = !isGoogleLoginInProgress // Replace this with your logic
}

样本输出：

展开查看全部

赞(0）回复(0）举报 2023-06-20

我来回答

android 如何在jetpack compose中的动态按钮上显示loader

2条答案

相关问题

热门标签

最新问答