我有一个非常广泛的图片链接,需要使用它作为视图的背景.对我来说很重要的是坚持图像的结束,顶部和底部的视图.由于画面太宽,我希望它离开屏幕左边. 我试过ConstraintLayoutBox,但没有达到.下面是我的代码:

@Composable
fun TestWide2() {
ConstraintLayout(
    modifier = Modifier
        .fillMaxWidth()
        .wrapContentHeight()
        .background(color = colorResource(id = R.color.at_blue_transparent))
) {
    val (image, content) = createRefs()
    Image(
        modifier = Modifier
            .background(color = colorResource(id = R.color.at_white))
            .fillMaxWidth()
            .wrapContentHeight()
            .constrainAs(image) {
                top.linkTo(parent.top)
                end.linkTo(parent.end)
                bottom.linkTo(parent.bottom)
            },
        painter = painterResource(id = R.drawable.at_test_wide_small),
        contentDescription = null,
        contentScale = ContentScale.FillHeight,
        alignment = Alignment.CenterEnd
    )
    Column(
        modifier = Modifier
            .constrainAs(content) {
                top.linkTo(parent.top)
                start.linkTo(parent.start)
                bottom.linkTo(parent.bottom)
            }
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(horizontal = 12.dp)
            .padding(bottom = 5.dp, top = 3.dp)
    ) {
        Text(
            text = "Some text with unpredictable length placed on the left side of the screen",
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight()
                .padding(end = 100.dp, bottom = 2.dp),
        )
        CtaButton(
            modifier = Modifier
                .fillMaxWidth(0.85f)
                .wrapContentHeight()
                .padding(
                    end = 130.dp,
                    top = 20.dp
                ),
            elevation = 0.dp,
            text = "Button",
            onPressed = {  },
            fontSize = 18.sp
        )
    }
}
}

This is what I get: current state

And this is what I want to achieve: needed result

在代码示例中是一个来自资源的文件,但在真正的代码中它是一个URL,所以我不能把它作为视图的背景. 由于文本可以由用户zoom ,图像和视图高度必须是动态的.

推荐答案

Image中删除wrapContentHeight(),改为使用高度填充约束:

Image(
  modifier = Modifier
    .fillMaxWidth()
    .constrainAs(image) {
      top.linkTo(parent.top)
      end.linkTo(parent.end)
      bottom.linkTo(parent.bottom)

      height = Dimension.fillToConstraints // <-- This
    },
    contentScale = ContentScale.FillHeight,
    alignment = Alignment.CenterEnd,
)

然而,实际上你甚至不需要这样做,intrinsic height也可以做这个工作:

Box(
  modifier = Modifier.height(IntrinsicSize.Min)
) {
  Image(
    modifier = Modifier
      .fillMaxWidth()
      .fillMaxHeight(),
    contentScale = ContentScale.FillHeight,
    alignment = Alignment.CenterEnd,
  )
  Column {
    // your content
  }
}

Android相关问答推荐

广播接收者意图从服务内设置,而不被其他服务接收

如何处理穿戴构图上的长点击事件?

原因平滑滚动的滞后懒惰列在android jetpack compose

从单元测试访问RES/RAW文件

对支持哪些数据存储区方法感到困惑

设置文本 colored颜色 动画时如何减少重新组合?

如何防止在Android Studio中设置kotlin断点时优化变量

更改活动(上下文)对接收到的uri的访问权限的影响?

ComposeView 抢走了 AndroidTV 内容的焦点

使用 Jetpack Compose 在 Android TV 上启用系统声音

如何在每次显示可组合项时执行代码(并且只执行一次)

可从 Play store 下载链接访问未发布的应用

在 MVVM Jetpack Compose 上添加依赖项时出现重复类错误

系统导航栏在某些场景下应用了深色效果

Koin Android-KMM:我有嵌套范围但注入不起作用

有什么方法可以确定正在使用哪个 Android 手机的麦克风进行录音?

缺少类 com.google.android.datatransport.runtime.ForcedSender

如何在 TextButton 中分隔文本和图标

如何在jetpack compose中创建水印文字效果

如何删除 Ktor 客户端 2.0.0 的默认标头