如何最大化图像上的按钮点击在喷气背包撰写?

Question

我有一个GlideImage是在一个框内。在该框内，还有一个带有图标的按钮。我想要的是，当我点击按钮时，图像被最大化，并占据整个屏幕，右下角有一个按钮，可以最小化它。我还想把它放大。有人知道我怎么能做到这一点，如果它是可能的，在Jetpack撰写的当前状态?

我留给你的代码，我必须生成的盒子，图像和图标。

提前感谢您的帮助。

@ExperimentalGlideComposeApi
@Composable
fun BuildImage(imageUrl: String) {
Box(
modifier = Modifier
.padding(vertical = 25.dp, horizontal = 25.dp)
.background(
brush = Brush.linearGradient(
listOf(
Color.Gray,
Color.White
)
),
shape = RoundedCornerShape(14.dp)
)
.clip(RoundedCornerShape(14.dp))
) {
GlideImage(
model = imageUrl,
contentDescription = null,
contentScale = ContentScale.FillBounds
)
Box(modifier = Modifier.matchParentSize(), contentAlignment = Alignment.BottomEnd) {
IconButton(
onClick = { /* TO IMPLEMENT */ },
modifier = Modifier
.padding(11.dp)
.background(Color.Blue, RoundedCornerShape(3.dp))
.clip(RoundedCornerShape(3.dp))
.size(52.dp)
) {
Icon(
painter = painterResource(id = R.drawable.maximize),
contentDescription = null,
tint = Color.Unspecified
)
}
}
}
}

Answer 1

对于我的用例，我使用@ADM的建议来解决我的问题。当我点击这个按钮时，一个对话框打开了，它占据了整个屏幕，里面显示了我使用Glide需要的图像。为了放大图像，我使用了ZoomableImage方法，如下图所示。

Dialog(
properties = DialogProperties(usePlatformDefaultWidth = false),
onDismissRequest = { /* implement */ }
) {
Box(modifier = Modifier.fillMaxSize()) {
ZoomableImage(imageUrl)
}
}
@ExperimentalGlideComposeApi
@Composable
fun ZoomableImage(model: Any, contentDescription: String? = null) {
val angle by remember { mutableStateOf(0f) }
var zoom by remember { mutableStateOf(1f) }
var offsetX by remember { mutableStateOf(0f) }
var offsetY by remember { mutableStateOf(0f) }
val configuration = LocalConfiguration.current
val screenWidth = configuration.screenWidthDp.dp.value
val screenHeight = configuration.screenHeightDp.dp.value
GlideImage(
model,
contentDescription = contentDescription,
contentScale = ContentScale.Fit,
modifier = Modifier
.offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) }
.graphicsLayer(
scaleX = zoom,
scaleY = zoom,
rotationZ = angle
)
.pointerInput(Unit) {
detectTransformGestures(
onGesture = { _, pan, gestureZoom, _ ->
zoom = (zoom * gestureZoom).coerceIn(1F..4F)
if (zoom > 1) {
val x = (pan.x * zoom)
val y = (pan.y * zoom)
val angleRad = angle * PI / 180.0
offsetX =
(offsetX + (x * cos(angleRad) - y * sin(angleRad)).toFloat()).coerceIn(
-(screenWidth * zoom)..(screenWidth * zoom)
)
offsetY =
(offsetY + (x * sin(angleRad) + y * cos(angleRad)).toFloat()).coerceIn(
-(screenHeight * zoom)..(screenHeight * zoom)
)
} else {
offsetX = 0F
offsetY = 0F
}
}
)
}
.fillMaxSize()
)
}

Answer 2

你可以这样做:

@OptIn(ExperimentalGlideComposeApi::class)
@Composable
fun Q74501531() {
val configuration = LocalConfiguration.current
val screenWidth = configuration.screenWidthDp.dp // Get screen width as dp from local configuration
val screenHeight = configuration.screenHeight.dp // You can also get screen height but for demo it's unused
Column(
modifier = Modifier.fillMaxSize()
) {
var isExpanded by remember { mutableStateOf(false) } // Trigger state for change width and height
val width by animateDpAsState(if (isExpanded) screenWidth else screenWidth / 3)
val height by animateDpAsState(if (isExpanded) screenWidth / 2 else screenWidth / 5)
GlideImage(
modifier = Modifier.size(width, height),
model = "https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg",
contentDescription = null,
contentScale = ContentScale.Crop
)
Spacer(Modifier.weight(1f))
TextButton(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 8.dp),
onClick = { isExpanded = !isExpanded }
) {
Text("Toggle")
}
}
}

演示:https://youtu.be/PwPagLi8nEs