Android 将 CircularProgressIndicator 添加到按钮而不增加其高度

发布于03月26日

我想用Button里面的CircularProgressIndicator，而不是Text. 这是我的按钮仅使用文本时的外观:

Button(
    onClick = { }
) {
    Row() {
        Text("Some action")
    }
}

一旦我加上CircularProgressIndicator，我的按钮就变得更高(更高):

Button(
    onClick = {  }
) {
    Row() {
        CircularProgressIndicator(color = Color.White)
        Text("Some action")
    }
}

那么，我如何才能在保持Button的初始身高的同时，在Button的基础上加CircularProgressIndicator呢？

推荐答案

使用ButtonDefaults，你可以很容易地确定按钮的高度.另外，对于CircularProgressIndicator，我从ButtonDefaults.IconSize增加了固定大小

var loading by remember { mutableStateOf(false) }

Button(
    onClick = { loading = !loading },
    modifier = Modifier.height(ButtonDefaults.MinHeight).align(Alignment.Center)
) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        if (loading) {
            CircularProgressIndicator(
                color = Color.White,
                modifier = Modifier.size(ButtonDefaults.IconSize),
                strokeWidth = 2.dp
            )
        }
        Text("Some action")
    }
}

Result:个