feat(顶部): 历史记录带btn效果

jiaoyaning · Aug 23, 2022 · af1f8b7 · af1f8b7
1 parent 37d1c3b
commit af1f8b7
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 60 deletions.
diff --git a/app/src/main/java/com/jyn/composecalculator/ui/BottomBtnView.kt b/app/src/main/java/com/jyn/composecalculator/ui/BottomBtnView.kt
@@ -33,7 +33,7 @@ val optionColumns = listOf(
     listOf("FACT", "tan", "√", "^", "!")
 )
 
-private val numberColumns = listOf(
+val numberColumns = listOf(
     listOf("C", "7", "4", "1", "00"),
     listOf("%", "8", "5", "2", "0"),
     listOf("D", "9", "6", "3", "."),

diff --git a/app/src/main/java/com/jyn/composecalculator/ui/TopResultView.kt b/app/src/main/java/com/jyn/composecalculator/ui/TopResultView.kt
@@ -21,6 +21,8 @@ import androidx.compose.material3.Surface
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalDensity
@@ -95,15 +97,12 @@ fun TopResultView() {
         shadowElevation = 3.dp
     ) {
         process = state.offset.value / blockSizePx
-        Row() {
-            Box(modifier = Modifier.weight(1f)) {
-                TextBox(1 - process) {
-                    coroutineScope.launch {
-                        state.animateTo(!state.targetValue, SwipeableDefaults.AnimationSpec)
-                    }
+        TextBox(1 - process,
+            onClick = {
+                coroutineScope.launch {
+                    state.animateTo(!state.targetValue, SwipeableDefaults.AnimationSpec)
                 }
-            }
-        }
+            })
     }
 
     val callback = remember {
@@ -133,42 +132,12 @@ fun TopResultView() {
 @Composable
 fun TextBox(process: Float, onClick: () -> Unit) {
     val viewModel = viewModel<DateViewModel>()
-    val openDialog = remember { mutableStateOf(-1) }
+    val openDialog: MutableState<Int> = remember { mutableStateOf(-1) }
     if (openDialog.value != -1) {
-        AlertDialog(
-            backgroundColor = myTheme.topBg,
-            onDismissRequest = { openDialog.value = -1 },
-            title = {
-                Row(verticalAlignment = Alignment.CenterVertically) {
-                    Icon(
-                        Icons.Filled.Delete,
-                        contentDescription = null,
-                        modifier = Modifier.size(25.dp),
-                        tint = Color.Red
-                    )
-                    Spacer(Modifier.size(ButtonDefaults.IconSpacing))
-                    Text(
-                        text = "是否决定删除该记录",
-                        color = myTheme.textColor,
-                        style = MaterialTheme.typography.h6
-                    )
-                }
-            }, confirmButton = {
-                TextButton(
-                    onClick = {
-                        viewModel.results.removeAt(openDialog.value)
-                        openDialog.value = -1
-                    },
-                ) { Text("确认", fontWeight = FontWeight.W700, color = myTheme.textColor) }
-            }, dismissButton = {
-                TextButton(onClick = { openDialog.value = -1 }) {
-                    Text("取消", fontWeight = FontWeight.W700, color = myTheme.textColor)
-                }
-            })
+        DeleteDialog(openDialog)
     }
     Column(
-        modifier = Modifier
-            .fillMaxWidth(),
+        modifier = Modifier.fillMaxWidth(),
         verticalArrangement = Arrangement.Bottom
     ) {
 
@@ -205,26 +174,40 @@ fun TextBox(process: Float, onClick: () -> Unit) {
             }
         }
 
-        LazyColumn(
-            modifier = Modifier
+        Row(
+            Modifier
                 .weight(1f)
                 .background(myTheme.topListBg)
-                .padding(start = 10.dp, end = 10.dp),
-            reverseLayout = true,
-            userScrollEnabled = true,
+                .padding(start = 10.dp, end = 10.dp)
         ) {
-            itemsIndexed(viewModel.results) { index, item ->
-                Box(
-                    modifier = Modifier.combinedClickable(
-                        onClick = {
-                            viewModel.inputText.value = item.input
-                            viewModel.resultText.value = item.result
-                        },
-                        onLongClick = { openDialog.value = index })
-                ) {
-                    ItemText(input = item.input, result = item.result)
+            LazyColumn(
+                Modifier.weight(1f),
+                reverseLayout = true,
+                userScrollEnabled = true,
+            ) {
+                itemsIndexed(viewModel.results) { index, item ->
+                    Box(
+                        modifier = Modifier.combinedClickable(
+                            onClick = {},
+                            onLongClick = { openDialog.value = index })
+                    ) {
+                        ItemText(input = item.input, result = item.result)
+                    }
                 }
             }
+
+            Divider(
+                Modifier
+                    .alpha(process)
+                    .padding(start = 10.dp)
+                    .width(1.dp)
+                    .fillMaxHeight(),
+                color = Color.Gray
+            )
+
+            TopBtn(
+                Modifier.width(80.dp * process)
+            )
         }
 
         Box(
@@ -250,3 +233,56 @@ fun TextBox(process: Float, onClick: () -> Unit) {
     }
 }
 
+@Composable
+fun DeleteDialog(openDialog: MutableState<Int>) {
+    val viewModel = viewModel<DateViewModel>()
+    AlertDialog(
+        backgroundColor = myTheme.bottomBg,
+        onDismissRequest = { openDialog.value = -1 },
+        title = {
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Icon(
+                    Icons.Filled.Delete,
+                    contentDescription = null,
+                    modifier = Modifier.size(25.dp),
+                    tint = Color.Red
+                )
+                Spacer(Modifier.size(ButtonDefaults.IconSpacing))
+                Text(
+                    text = "是否决定删除该记录",
+                    color = myTheme.textColor,
+                    style = MaterialTheme.typography.h6
+                )
+            }
+        }, confirmButton = {
+            TextButton(
+                onClick = {
+                    viewModel.results.removeAt(openDialog.value)
+                    openDialog.value = -1
+                },
+            ) { Text("确认", fontWeight = FontWeight.W700, color = myTheme.textColor) }
+        }, dismissButton = {
+            TextButton(onClick = { openDialog.value = -1 }) {
+                Text("取消", fontWeight = FontWeight.W700, color = myTheme.textColor)
+            }
+        })
+
+}
+
+val columns = listOf("D", "÷", "×", "-", "+", "=")
+
+@Composable
+fun TopBtn(modifier: Modifier = Modifier) {
+    Column(modifier, horizontalAlignment = Alignment.End) {
+        columns.forEach {
+            Box(
+                modifier = Modifier
+                    .padding(bottom = 10.dp)
+                    .weight(1f)
+                    .then(if (isPortrait) Modifier.aspectRatio(1f) else Modifier)
+            ) {
+                ItemBtn(text = it)
+            }
+        }
+    }
+}
diff --git a/app/src/main/java/com/jyn/composecalculator/ui/view/ItemTextView.kt b/app/src/main/java/com/jyn/composecalculator/ui/view/ItemTextView.kt
@@ -1,6 +1,8 @@
 package com.jyn.composecalculator.ui.view
 
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
@@ -60,7 +62,9 @@ fun InputText(process: Float) {
                 fontSize = if (isPortrait) 50.sp else 28.sp,
                 textAlign = TextAlign.End,
             )
-            CursorView(if (isPortrait) 50.dp else 25.dp)
+            AnimatedVisibility(visible = (process == 0f)) {
+                CursorView(if (isPortrait) 50.dp else 25.dp)
+            }
         }
 
         Text(
@@ -81,12 +85,28 @@ fun InputText(process: Float) {
 @OptIn(ExperimentalTextApi::class)
 @Composable
 fun ItemText(input: String, result: String) {
+    val viewModel = viewModel<DateViewModel>()
+    val inputScrollState = rememberScrollState()
+    val resultScrollState = rememberScrollState()
+    val inputTextWidth = remember { mutableStateOf(0) }
+    val resultTextWidth = remember { mutableStateOf(0) }
+
+    LaunchedEffect(inputTextWidth.value) {
+        inputScrollState.scrollTo(inputTextWidth.value) //自动滚动到最后一个
+    }
+    LaunchedEffect(inputTextWidth.value) {
+        resultScrollState.scrollTo(resultTextWidth.value) //自动滚动到最后一个
+    }
+
     Column(
         modifier = Modifier.height(120.dp),
         verticalArrangement = Arrangement.Center
     ) {
         Text(
-            modifier = Modifier.fillMaxWidth(),
+            modifier = Modifier
+                .fillMaxWidth()
+                .onSizeChanged { inputTextWidth.value = it.width }
+                .clickable { viewModel.appendNum(input) },
             text = input,
             fontSize = if (isPortrait) 33.sp else 25.sp,
             maxLines = 1,
@@ -102,7 +122,10 @@ fun ItemText(input: String, result: String) {
         Spacer(modifier = Modifier.height(10.dp))
 
         Text(
-            modifier = Modifier.fillMaxWidth(),
+            modifier = Modifier
+                .fillMaxWidth()
+                .clickable { viewModel.appendNum(result) }
+                .onSizeChanged { resultTextWidth.value = it.width },
             text = result,
             color = Color.Gray,
             fontSize = if (isPortrait) 26.sp else 23.sp,