简体   繁体   English

如何在jetpack compose中保留内容更改的按钮宽度

[英]How to retain button width on content change in jetpack compose

I am trying to implement a generic button component that has a loading state.我正在尝试实现一个具有加载 state 的通用按钮组件。 I came up with following approach that works great:我想出了以下效果很好的方法:

@Preview
@Composable
private fun CustomButtonPreview() {
    var isLoading by remember { mutableStateOf(false) }
    CustomButton(
        text = "Some action",
        isLoading = isLoading,
        onClick = { isLoading = !isLoading }
    )
}

@Composable
private fun CustomButton(
    text: String,
    isLoading: Boolean = false,
    onClick: () -> Unit = {}
) {
    Button(onClick = onClick) {
        if(isLoading) {
            CircularProgressIndicator(
                modifier = Modifier.size(18.dp),
                color = White,
                strokeWidth = 2.dp
            )
        } else {
            Text(text)
        }
    }
}

With this approach, width of the button is reduced when it enters the loading state.采用这种方法,按钮的宽度在进入加载 state 时减小。 How can we retain the original button width when moving to the loading state?移动到加载state时如何保持原来的按钮宽度? I don't want to take width as parameter because I want the button to be automatically sized as per the original content.我不想将width作为参数,因为我希望按钮根据原始内容自动调整大小。

Intrinsic size used in width or height which can refer to width or height.please try IntrinsicSize.Max用于宽度或高度的固有尺寸,可以参考宽度或高度。请尝试 IntrinsicSize.Max

@Composable
private fun CustomButton(
    text: String,
    isLoading: Boolean = false,
    onClick: () -> Unit = {}
) {
    Button(onClick = onClick, Modifier.width(IntrinsicSize.Max)) {
        if (isLoading) {
            CircularProgressIndicator(
                modifier = Modifier.size(18.dp),
                color = White,
                strokeWidth = 2.dp
            )
        } else {
            Text(text)
        }
    }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 Jetpack Compose 中为按钮的宽度设置动画 - How to animate width of a button in Jetpack Compose 如何仅在 Jetpack Compose 中更改特定边的边框宽度? - How to change border width of a particular side only in jetpack compose? 如何更改 Android Jetpack Compose 中的 OutlineTextField 边框宽度? - How change OutlineTextField border width in Android Jetpack Compose? 如何在 Jetpack Compose 中更改 TextField 的指示器宽度? - How to change TextField's indicator width in Jetpack Compose? 如何使用 Jetpack Compose AdapterList 保留滚动 position? - How to retain scroll position with Jetpack Compose AdapterList? 如何更改 Jetpack Compose 抽屉内的 Scaffold 内的内容? - How to change the content inside a Scaffold that exists inside drawer in Jetpack Compose? 如何在 Jetpack Compose 中按高度缩放图标宽度 - How to scale icon width by height in Jetpack Compose 如何使用 Jetpack Compose 使 LinearProgressIndicator 宽度动态化 - How to Make LinearProgressIndicator Width Dynamic With Jetpack Compose Jetpack Compose:如何修改ModalNavigationDrawer中Drawer的宽度? - Jetpack Compose: How to modify the width of Drawer in ModalNavigationDrawer? 如何在 Jetpack Compose 中为 NavigationDrawer 设置宽度和高度 - How to set width and height for NavigationDrawer in Jetpack Compose
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM