对齐圆框内的文本 Jetpack Compose

Question

我有一个弯曲的盒子，我需要在盒子内放置一个文本和一个图标，它们将根据盒子居中

@Composable
fun SearchBarCard(
    modifier: Modifier = Modifier
){
    Box(
        modifier = Modifier
            .fillMaxWidth(0.8f)
            .height(40.dp)
            .background(
                brush = Brush.horizontalGradient(listOf(Active, Teal200)),
                shape = RoundedCornerShape(60.dp)
            ),
    ){
        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
        ){
            Icon(imageVector = Icons.Default.Search, contentDescription = "Search Icon")
            Text(text = "Search for music")
        }

    }
}

结果：

我想要的：

Answer 1

Row(
        modifier = Modifier.fillMaxSize(), <-- edit this line
        verticalAlignment = Alignment.CenterVertically,
    ){
        Icon(imageVector = Icons.Default.Search, contentDescription = "Search Icon")
        Text(text = "Search for music")
    }

Answer 2

在您的 Box 中添加 contentAlignment 属性：

Box(
    contentAlignment = Alignment.CenterStart
    //....
){ /* ... */ }

对齐圆框内的文本 Jetpack Compose

Align text inside rounded box jetpack compose

android

android-jetpack-compose