style(顶部): 输入框 & 光标

jiaoyaning · Aug 9, 2022 · 4c2e4bd · 4c2e4bd
1 parent cf83647
commit 4c2e4bd
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 11 deletions.
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
@@ -16,7 +16,8 @@
         <activity
             android:name=".MainActivity"
             android:exported="true"
-            android:theme="@style/Theme.ComposeCalculator">
+            android:theme="@style/Theme.ComposeCalculator"
+            android:windowSoftInputMode="adjustUnspecified|stateHidden">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
 

diff --git a/app/src/main/java/com/jyn/composecalculator/DateViewModel.kt b/app/src/main/java/com/jyn/composecalculator/DateViewModel.kt
@@ -12,4 +12,13 @@ class DateViewModel(application: Application) : AndroidViewModel(application) {
     fun append(text: String) {
         inputText.value = inputText.value + text
     }
+
+    fun delete() {
+        if (inputText.value.isEmpty()) return
+        inputText.value = inputText.value.substring(0, inputText.value.length - 1)
+    }
+
+    fun clear() {
+        inputText.value = ""
+    }
 }
diff --git a/app/src/main/java/com/jyn/composecalculator/ui/BottomBtnView.kt b/app/src/main/java/com/jyn/composecalculator/ui/BottomBtnView.kt
@@ -10,9 +10,6 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.text.ExperimentalTextApi
-import androidx.compose.ui.text.PlatformTextStyle
-import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -102,7 +99,12 @@ fun ItemBtn(text: String) {
 
 fun textClick(viewModel: DateViewModel, text: String) {
     when (text) {
-        "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "00"
+        "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "00",
+        "÷", "×", "-", "+"
         -> viewModel.append(text)
+        "D"
+        -> viewModel.delete()
+        "C"
+        -> viewModel.clear()
     }
 }
diff --git a/app/src/main/java/com/jyn/composecalculator/ui/TopResultView.kt b/app/src/main/java/com/jyn/composecalculator/ui/TopResultView.kt
@@ -1,14 +1,29 @@
 package com.jyn.composecalculator.ui
 
+import androidx.compose.animation.animateColor
+import androidx.compose.animation.core.*
+import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.horizontalScroll
+import androidx.compose.foundation.indication
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.*
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.FractionalThreshold
 import androidx.compose.material.SwipeableDefaults.resistanceConfig
+import androidx.compose.material.rememberSwipeableState
+import androidx.compose.material.swipeable
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.style.TextAlign
@@ -20,7 +35,6 @@ import androidx.lifecycle.viewmodel.compose.viewModel
 import com.apkfuns.logutils.LogUtils
 import com.jyn.composecalculator.DateViewModel
 import com.jyn.composecalculator.ui.draw.SlideIndicator
-import kotlinx.coroutines.DelicateCoroutinesApi
 
 /**
  * 上层结果
@@ -81,9 +95,7 @@ fun TextBox(process: Float) {
             .padding(10.dp),
         verticalArrangement = Arrangement.Bottom
     ) {
-        ItemText(viewModel.inputText.value, "")
-
-        Text("process $process", fontSize = 18.sp)
+        InputText(viewModel.inputText.value)
 
         Spacer(modifier = Modifier.height(5.dp))
 
@@ -101,4 +113,54 @@ fun ItemText(input: String, result: String) {
     Column(verticalArrangement = Arrangement.Bottom) {
         Text(modifier = Modifier.fillMaxWidth(), text = input, textAlign = TextAlign.End)
     }
+}
+
+@Composable
+fun InputText(input: String) {
+    val viewModel = viewModel<DateViewModel>()
+
+    val mutableInteractionSource = remember { MutableInteractionSource() }
+    val scrollState = rememberScrollState()
+    val textWidth = remember { mutableStateOf(0) }
+
+    LaunchedEffect(textWidth.value) {
+        scrollState.scrollTo(textWidth.value) //自动滚动到最后一个
+    }
+
+    Column(
+        modifier = Modifier.height(viewModel.textBoxHeight),
+        verticalArrangement = Arrangement.Center
+    ) {
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            Text(
+                modifier = Modifier
+                    .weight(1f)
+                    .horizontalScroll(scrollState)
+                    .indication( //水波纹效果怎么去除无效呢，bug?
+                        indication = null,
+                        interactionSource = mutableInteractionSource
+                    )
+                    .onSizeChanged { textWidth.value = it.width },
+                text = input,
+                maxLines = 1,
+                fontSize = 50.sp,
+                textAlign = TextAlign.End,
+            )
+            CursorView()
+        }
+    }
+}
+
+/**
+ * 光标
+ */
+@Preview(showBackground = true)
+@Composable
+fun CursorView() {
+    Spacer(
+        modifier = Modifier
+            .background(Color.Red)
+            .width(2.dp)
+            .height(50.dp)
+    )
 }