Skip to content

Commit cf83647

Browse files
jiaoyaningjiaoyaning
committed
feat(顶部): 文字
1 parent f6b970d commit cf83647

File tree

3 files changed

+80
-30
lines changed

3 files changed

+80
-30
lines changed

‎app/src/main/java/com/jyn/composecalculator/DateViewModel.kt

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
package com.jyn.composecalculator
22

33
import android.app.Application
4-
import androidx.compose.ui.text.input.TextFieldValue
4+
import androidx.compose.runtime.mutableStateOf
5+
import androidx.compose.ui.unit.dp
56
import androidx.lifecycle.AndroidViewModel
67

78
class DateViewModel(application: Application) : AndroidViewModel(application) {
8-
var inputText = TextFieldValue(text = "")
9-
var outputText = TextFieldValue(text = "")
9+
var textBoxHeight = 0.dp
10+
var inputText = mutableStateOf("")
11+
12+
fun append(text: String) {
13+
inputText.value = inputText.value + text
14+
}
1015
}

‎app/src/main/java/com/jyn/composecalculator/ui/BottomBtnView.kt

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,14 @@ import androidx.compose.material3.Text
1010
import androidx.compose.runtime.Composable
1111
import androidx.compose.ui.Alignment
1212
import androidx.compose.ui.Modifier
13+
import androidx.compose.ui.text.ExperimentalTextApi
14+
import androidx.compose.ui.text.PlatformTextStyle
15+
import androidx.compose.ui.text.TextStyle
1316
import androidx.compose.ui.tooling.preview.Preview
1417
import androidx.compose.ui.unit.dp
1518
import androidx.compose.ui.unit.sp
19+
import androidx.lifecycle.viewmodel.compose.viewModel
20+
import com.jyn.composecalculator.DateViewModel
1621

1722
/**
1823
* 底部按钮
@@ -25,7 +30,7 @@ private val numberColumns = listOf(
2530
listOf("÷", "×", "-", "+", "="),
2631
)
2732

28-
const val BOTTOM_FRACTION = 0.618f
33+
const val BOTTOM_FRACTION = 0.67f
2934

3035
@Preview(showBackground = true)
3136
@Composable
@@ -57,6 +62,7 @@ fun BottomBtnView() {
5762
modifier = Modifier
5863
.padding(bottom = 10.dp)
5964
.weight(1f)
65+
.aspectRatio(1f)
6066
) {
6167
ItemBtn(text = it)
6268
}
@@ -70,17 +76,33 @@ fun BottomBtnView() {
7076
@Composable
7177
fun ItemBtn(text: String) {
7278
val modifier = if (text != "=") Modifier.aspectRatio(1f) else Modifier
79+
val viewModel = viewModel<DateViewModel>()
80+
7381
Button(
7482
modifier = Modifier
7583
.fillMaxWidth()
7684
.fillMaxHeight(),
7785
shape = RoundedCornerShape(1000.dp),
78-
onClick = {
79-
80-
},
86+
contentPadding = PaddingValues(0.dp),
87+
onClick = { textClick(viewModel, text) },
8188
) {
82-
Box(contentAlignment = Alignment.Center) {
83-
Text(text = text, fontSize = 30.sp)
89+
Box(
90+
modifier = Modifier
91+
.fillMaxWidth()
92+
.fillMaxHeight(),
93+
contentAlignment = Alignment.Center
94+
) {
95+
Text(
96+
text = text,
97+
fontSize = 30.sp
98+
)
8499
}
85100
}
101+
}
102+
103+
fun textClick(viewModel: DateViewModel, text: String) {
104+
when (text) {
105+
"0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "00"
106+
-> viewModel.append(text)
107+
}
86108
}

‎app/src/main/java/com/jyn/composecalculator/ui/TopResultView.kt

Lines changed: 44 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,15 @@ package com.jyn.composecalculator.ui
33
import androidx.compose.foundation.gestures.Orientation
44
import androidx.compose.foundation.layout.*
55
import androidx.compose.foundation.shape.RoundedCornerShape
6-
import androidx.compose.material.ExperimentalMaterialApi
7-
import androidx.compose.material.FractionalThreshold
8-
import androidx.compose.material.rememberSwipeableState
9-
import androidx.compose.material.swipeable
6+
import androidx.compose.material.*
7+
import androidx.compose.material.SwipeableDefaults.resistanceConfig
108
import androidx.compose.material3.Surface
119
import androidx.compose.material3.Text
1210
import androidx.compose.runtime.Composable
1311
import androidx.compose.ui.Modifier
1412
import androidx.compose.ui.platform.LocalConfiguration
1513
import androidx.compose.ui.platform.LocalDensity
14+
import androidx.compose.ui.text.style.TextAlign
1615
import androidx.compose.ui.tooling.preview.Preview
1716
import androidx.compose.ui.unit.IntOffset
1817
import androidx.compose.ui.unit.dp
@@ -28,7 +27,7 @@ import kotlinx.coroutines.DelicateCoroutinesApi
2827
* Created by jiaoyaning on 2022/8/6.
2928
*/
3029

31-
@OptIn(ExperimentalMaterialApi::class, DelicateCoroutinesApi::class)
30+
@OptIn(ExperimentalMaterialApi::class)
3231
@Preview(showBackground = true)
3332
@Composable
3433
fun TopResultView() {
@@ -40,13 +39,13 @@ fun TopResultView() {
4039
val screenWidth = configuration.screenWidthDp.dp
4140
//偏移量
4241
val topHeight = screenHeight * BOTTOM_FRACTION + 10.dp
42+
val textBoxHeight = screenHeight - topHeight
43+
viewModel.textBoxHeight = textBoxHeight
4344

4445
//记录是否是最小值
45-
val state = rememberSwipeableState(true, confirmStateChange = {
46-
LogUtils.tag("rememberSwipeableState").i("confirmStateChange: $it")
47-
true
48-
})
46+
val state = rememberSwipeableState(true)
4947
val blockSizePx = with(LocalDensity.current) { -topHeight.toPx() }
48+
val anchors = mapOf(0f to false, blockSizePx to true)
5049
Surface(
5150
modifier = Modifier
5251
.width(screenWidth)
@@ -55,27 +54,51 @@ fun TopResultView() {
5554
.swipeable(
5655
orientation = Orientation.Vertical,
5756
state = state,
58-
anchors = mapOf(0f to false, blockSizePx to true),
57+
anchors = anchors,
5958
thresholds = { _, _ -> FractionalThreshold(0.2f) },
59+
resistance = resistanceConfig(
60+
anchors.keys,
61+
10.dp.value,
62+
5f
63+
),
64+
velocityThreshold = 60.dp
6065
),
6166
shape = RoundedCornerShape(bottomStart = 25.dp, bottomEnd = 25.dp),
6267
tonalElevation = 3.dp,
6368
shadowElevation = 3.dp
6469
) {
65-
Column(
70+
TextBox(process = 100 - (state.offset.value / blockSizePx * 100))
71+
}
72+
}
73+
74+
@Composable
75+
fun TextBox(process: Float) {
76+
val isMax = process >= 100
77+
val viewModel = viewModel<DateViewModel>()
78+
Column(
79+
modifier = Modifier
80+
.fillMaxWidth()
81+
.padding(10.dp),
82+
verticalArrangement = Arrangement.Bottom
83+
) {
84+
ItemText(viewModel.inputText.value, "")
85+
86+
Text("process $process", fontSize = 18.sp)
87+
88+
Spacer(modifier = Modifier.height(5.dp))
89+
90+
Box(
6691
modifier = Modifier
6792
.fillMaxWidth()
68-
.padding(15.dp),
69-
verticalArrangement = Arrangement.Bottom
7093
) {
71-
Text("TopResultView ${state.offset.value}", fontSize = 18.sp)
72-
73-
Box(
74-
modifier = Modifier
75-
.fillMaxWidth()
76-
) {
77-
SlideIndicator(100 - (state.offset.value / blockSizePx * 100))
78-
}
94+
SlideIndicator(process)
7995
}
8096
}
97+
}
98+
99+
@Composable
100+
fun ItemText(input: String, result: String) {
101+
Column(verticalArrangement = Arrangement.Bottom) {
102+
Text(modifier = Modifier.fillMaxWidth(), text = input, textAlign = TextAlign.End)
103+
}
81104
}

0 commit comments

Comments
 (0)