From 6b71b31dfc16e8958df8e62e4c6936a7ac48c921 Mon Sep 17 00:00:00 2001
From: AnranYus <anranyus@hotmail.com>
Date: Fri, 14 Jun 2024 17:54:26 +0800
Subject: [PATCH] feat: support zoom

---
 .../com/lsp/view/ui/compose/PostActivity.kt   | 81 ++++++++++++-------
 1 file changed, 53 insertions(+), 28 deletions(-)

diff --git a/app/src/main/java/com/lsp/view/ui/compose/PostActivity.kt b/app/src/main/java/com/lsp/view/ui/compose/PostActivity.kt
index fefa071..7a46a13 100644
--- a/app/src/main/java/com/lsp/view/ui/compose/PostActivity.kt
+++ b/app/src/main/java/com/lsp/view/ui/compose/PostActivity.kt
@@ -11,9 +11,13 @@ import androidx.activity.compose.setContent
 import androidx.activity.viewModels
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.rememberTransformableState
+import androidx.compose.foundation.gestures.transformable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -43,13 +47,21 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.lsp.view.bean.Post
 import com.lsp.view.ui.compose.theme.LspViewTheme
@@ -231,36 +243,49 @@ fun PostItem(post: Post, clickable: (Post) -> Unit) {
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun DetailScreen(navController: NavController, viewModel: PostViewModel) {
-    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
     val uiState by viewModel.uiState.collectAsState()
-    Scaffold(topBar = {
-        TopAppBar(
-            colors = TopAppBarDefaults.topAppBarColors(
-                containerColor = MaterialTheme.colorScheme.primaryContainer,
-                titleContentColor = MaterialTheme.colorScheme.primary,
-            ),
-            title = {},
-            navigationIcon = {
-                IconButton(onClick = { navController.popBackStack() }) {
-                    Icon(imageVector = Icons.Filled.ArrowBack, contentDescription = "back")
-                }
-            },
-            actions = {
-                IconButton(onClick = { viewModel.actionDownload()}) {
-                    Icon(painter = painterResource(id = R.drawable.ic_twotone_arrow_downward_24), contentDescription = "Download")
-                }
-            }
+
+    var scale by remember { mutableFloatStateOf(1f) }
+    var rotation by remember { mutableFloatStateOf(0f) }
+    val state = rememberTransformableState { zoomChange, _, rotationChange ->
+        scale *= zoomChange
+        rotation += rotationChange
+    }
+    Box(modifier = Modifier.background(Color.Black).fillMaxSize()){
+        AsyncImage(
+            model = uiState.selectPost?.sampleUrl,
+            contentDescription = null,
+            modifier = Modifier
+                .fillMaxSize()
+                .graphicsLayer(
+                    scaleX = scale,
+                    scaleY = scale,
+                    rotationZ = rotation,
+                )
+                .transformable(state = state)
+                .background(Color.Black)
         )
-    },
-        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
-        content = {
-            AsyncImage(
-                model = uiState.selectPost?.sampleUrl,
-                contentDescription = null,
-                modifier = Modifier
-                    .fillMaxSize()
-                    .padding(top = it.calculateTopPadding())
+        Column {
+            TopAppBar(
+                colors = TopAppBarDefaults.topAppBarColors(
+                    containerColor = Color.Transparent,
+                    titleContentColor = MaterialTheme.colorScheme.primary,
+                    actionIconContentColor = Color.White,
+                    navigationIconContentColor = Color.White
+                ),
+                title = {},
+                navigationIcon = {
+                    IconButton(onClick = { navController.popBackStack() }) {
+                        Icon(imageVector = Icons.Filled.ArrowBack, contentDescription = "back")
+                    }
+                },
+                actions = {
+                    IconButton(onClick = { viewModel.actionDownload()}) {
+                        Icon(painter = painterResource(id = R.drawable.ic_twotone_arrow_downward_24), contentDescription = "Download")
+                    }
+                },
             )
         }
-    )
+    }
+
 }
\ No newline at end of file