如何删除图像组件和文本组件之间的空白空间。

huangapple go评论59阅读模式
英文:

How to remove the empty space between the image composable and the Text composable

问题

I am currently facing an issue with my Compose code where there is persistent empty space between the Image and InfoText composables, this appeared when I scaled down the image. I have tried removing the padding modifiers. However, the empty space persists, and I am seeking a solution to eliminate this unwanted spacing and have the composables positioned closer together.

英文:

I am currently facing an issue with my Compose code where there is persistent empty space between the Image and InfoText composables, this appeared when i scaled down the image. I have tried removing the padding modifiers However, the empty space persists, and I am seeking a solution to eliminate this unwanted spacing and have the composables positioned closer together.

@Composable
fun Info(
    modifier: Modifier = Modifier
) {
    val image = painterResource(R.drawable.android_logo)
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Image(
            painter = image,
            contentDescription = null,
            Modifier
                .scale(0.5f, 0.5f)
                .padding(horizontal = 16.dp,)
                .background(Color.Blue)
                //.fillMaxSize()
        )
        //Spacer(modifier = Modifier.height(0.000000.dp))
        InfoText(name = stringResource(R.string.name), title = stringResource(R.string.title))
    }
}

@Composable
fun InfoText(
    name: String,
    title: String,
    modifier: Modifier = Modifier
){
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = name,
            //modifier.padding(horizontal = 32.dp).,
            fontWeight = FontWeight.Bold,
            fontSize = 32.sp,

        )
        Text(
            text = title,
            modifier.padding(bottom = 8.dp)
        )
    }
}


</details>


# 答案1
**得分**: 1

从以下几点尝试:

* 从Image组合中删除`scale`修饰符。 缩小图像可能导致您遇到的空白空间。
* 从Image组合中删除`padding(horizontal = 16.dp)`修饰符。 Padding可以在组合之间引入额外的空间。
* 从InfoText组合中的Text组合中删除`padding(bottom = 8.dp)`修饰符。 这个填充在底部添加了空间,可能导致不必要的间距。

<details>
<summary>英文:</summary>

Several stuff are doing that, I think; try the following:

* Remove the `scale` modifier from the Image composable. Scaling down the image might result in the empty space you&#39;re experiencing.
* Remove the `padding(horizontal = 16.dp)` modifier from the Image composable. Padding can introduce extra space between composables.
* Remove the `padding(bottom = 8.dp)` modifier from the Text composable in the InfoText composable. This padding adds space at the bottom, which might contribute to unwanted spacing.

</details>



huangapple
  • 本文由 发表于 2023年6月6日 14:11:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/76411861.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定