如何在jetpack compose中将项目居中在Surface内

Posted 2023-03-29

【中文标题】如何在jetpack compose中将项目居中在Surface内

【英文标题】：How to center Item inside Surface in jetpack compose

【发布时间】：2021-11-27 05:39:55

【问题描述】：

如何在喷气背包组合的表面内居中物品

@Composable
fun RoundedShapeWithIconCenter(
    modifier: Modifier = Modifier,
    parentSize : Dp,
    parentBackgroundColor : Color,
    childPadding : Dp,
    icon : Painter,
    iconSize : Dp,
    iconTint : Color,
    elevation : Dp = 0.dp,
    isTextOrIcon : Boolean = false,
    insideText : String = "",
    insideTextColor : Color = colorResource(id = R.color.black),
    fontSize: TextUnit = 16.sp
) 
    Surface(
        modifier = modifier.size(parentSize),
        shape = RoundedCornerShape(50),
        color = parentBackgroundColor,
        elevation = elevation,
    ) 
        if (isTextOrIcon) 
            CommonText(value = insideText, fontSize = fontSize, color = insideTextColor, textAlign = TextAlign.Center)
         else 
            Icon(painter = icon, contentDescription = "Back Arrow", modifier = Modifier
                .size(iconSize)
                .padding(childPadding), tint = iconTint)
        
    

在图像中，圆形黑色形状是 Surface，Go 是 Surface 内的文本。我想将 Go 文本居中放置在 Surface 中。如果我用图标替换文本，它会完美居中

提前致谢

【问题讨论】：

你能分享一下 CommonText 可组合，因为我对此有点困惑。

```@Composable fun CommonText(value : String, fontSize : TextUnit, color : Color, modifier : Modifier = Modifier, fontWeight: FontWeight = FontWeight.Normal, textAlign: TextAlign = TextAlign.Left) 文本（文本 = 值，字体大小 = 字体大小，颜色 = 颜色，修饰符 = 修饰符）

谢谢，我添加了一个更简单的版本，它不需要向 Text 添加修饰符，因为 Box 还提供了 contentAlignment 参数。

【参考方案1】：

为此，我们将可组合的文本对齐到中心，并且我们不能在 Surface 内使用对齐修饰符。所以我们将把我们的 CommonText 包裹在 Box 周围，并对接受修饰符的 CommonText 做一些改动。

RoundedShapeWithIconCenter

....
if (isTextOrIcon) 
    Box(modifier = Modifier
        .fillMaxSize(1.0f) // it will fill parent box
        .padding(8.dp))  // padding will help us to give some margin between our text and parent if text greater then our parent size

            CommonText(
                value = insideText, 
                fontSize = fontSize, 
                color = insideTextColor,
                modifier = Modifier.align(Alignment.Center) // this will help it to align it to box center
            )
        

....

修改后的 CommonText

因为我不知道 CommonText Composable 是如何创建的，所以我假设它如下所示并根据它进行更改。

@Composable
fun CommonText(modifier: Modifier = Modifier, .... ) 
    Text(modifier = modifier, .... )

编辑 - 更简单的版本

....
if (isTextOrIcon) 
    Box(modifier = Modifier
        .fillMaxSize(1.0f) // it will fill parent box
        .padding(8.dp),// padding will help us to give some margin between our text and parent if text greater then our parent size
        contentAlignment = Center)  // contentAlignment will align its content as provided Alignment in our case it's Center

            CommonText(
                value = insideText, 
                fontSize = fontSize, 
                color = insideTextColor
            )
        

....