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

Question

CircularProgressIndicator我想在Buttona 旁边使用 a Text。这是我的按钮仅包含文本的样子：

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

一旦我添加了CircularProgressIndicator，我的按钮就会变得更高（更高）：

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

那么，如何在保持初始高度的同时CircularProgressIndicator添加a 呢？ButtonButton

Answer 1

使用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")
    }
}

结果：