devbox
空白诗007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Kotlin Compose 计算器程序_kotlin计算器

作者：空白诗007 | 2024-08-19 00:37:08

赞

踩

kotlin计算器

效果

 

  1. val MediumGray = Color(0xFF2e2e2e)
  2. val LightGray = Color(0xFF818181)
  3. val Orange = Color(0xFFff9800)

新增了三个颜色。

开始开始教程开始

新建最基础的 button

  1. package com.example.caclulator
  2.  
  3. import androidx.compose.foundation.clickable
  4. import androidx.compose.foundation.layout.Box
  5. import androidx.compose.foundation.shape.CircleShape
  6. import androidx.compose.material.Text
  7. import androidx.compose.runtime.Composable
  8. import androidx.compose.ui.Alignment
  9. import androidx.compose.ui.Modifier
  10. import androidx.compose.ui.draw.clip
  11. import androidx.compose.ui.graphics.Color
  12. import androidx.compose.ui.unit.sp
  13.  
  14. @Composable
  15. fun CalculatorButton(
  16.     symbol: String, modifier: Modifier, onClick: () -> Unit
  17. ) {
  18.     Box(contentAlignment = Alignment.Center,
  19.         modifier = Modifier
  20.             .clip(CircleShape)
  21.             .clickable { onClick() }
  22.             .then(modifier)) {
  23.         Text(text = symbol, fontSize = 36.sp, color = Color.White)
  24.     }
  25. }

 抽取共同的要素。然后。所有按钮都用到了这个。

主要布局编写

  1. package com.example.caclulator
  2.  
  3. import androidx.compose.foundation.background
  4. import androidx.compose.foundation.layout.Arrangement
  5. import androidx.compose.foundation.layout.Box
  6. import androidx.compose.foundation.layout.Column
  7. import androidx.compose.foundation.layout.Row
  8. import androidx.compose.foundation.layout.aspectRatio
  9. import androidx.compose.foundation.layout.fillMaxWidth
  10. import androidx.compose.foundation.layout.padding
  11. import androidx.compose.material.Text
  12. import androidx.compose.runtime.Composable
  13. import androidx.compose.ui.Alignment
  14. import androidx.compose.ui.Modifier
  15. import androidx.compose.ui.graphics.Color
  16. import androidx.compose.ui.text.font.FontWeight
  17. import androidx.compose.ui.text.style.TextAlign
  18. import androidx.compose.ui.unit.Dp
  19. import androidx.compose.ui.unit.dp
  20. import androidx.compose.ui.unit.sp
  21. import com.example.caclulator.ui.theme.Orange
  22.  
  23. @Composable
  24. fun Calculator(
  25.     state: CalculatorState,
  26.     buttonSpace: Dp = 8.dp,
  27.     modifier: Modifier = Modifier,
  28.     onAction: (CalculatorAction) -> Unit
  29. ) {
  30.     Box(modifier = modifier) {
  31.         Column(
  32.             Modifier
  33.                 .fillMaxWidth()
  34.                 .align(Alignment.BottomCenter),
  35.             verticalArrangement = Arrangement.spacedBy(buttonSpace)
  36.         ) {
  37.             Text(
  38.                 text = state.number1 + (state.operation?.symbol ?: "") + state.number2,
  39.                 textAlign = TextAlign.End,
  40.                 modifier = Modifier
  41.                     .fillMaxWidth()
  42.                     .padding(32.dp),
  43.                 fontWeight = FontWeight.Light,
  44.                 fontSize = 80.sp,
  45.                 color = Color.White,
  46.                 maxLines = 2
  47.             )
  48.  
  49.             Row(
  50.                 modifier = Modifier.fillMaxWidth(),
  51.                 horizontalArrangement = Arrangement.spacedBy(buttonSpace)
  52.             ) {
  53.                 CalculatorButton(symbol = "AC",
  54.                     modifier = Modifier
  55.                         .background(Color.LightGray)
  56.                         .aspectRatio(2f)
  57.                         .weight(2f),
  58.                     onClick = {
  59.                         onAction(CalculatorAction.Clear)
  60.                     })
  61.  
  62.  
  63.                 CalculatorButton(symbol = "Del",
  64.                     modifier = Modifier
  65.                         .background(Orange)
  66.                         .aspectRatio(1f)
  67.                         .weight(1f),
  68.                     onClick = {
  69.                         onAction(CalculatorAction.Delete)
  70.                     })
  71.  
  72.                 CalculatorButton(symbol = "/",
  73.                     modifier = Modifier
  74.                         .background(Orange)
  75.                         .aspectRatio(1f)
  76.                         .weight(1f),
  77.                     onClick = {
  78.                         onAction(CalculatorAction.Operation(CalculatorOperation.Divide))
  79.                     })
  80.  
  81.             }
  82.  
  83. // 7 8 9
  84.             Row(
  85.                 modifier = Modifier.fillMaxWidth(),
  86.                 horizontalArrangement = Arrangement.spacedBy(buttonSpace)
  87.             ) {
  88.                 CalculatorButton(symbol = "7",
  89.                     modifier = Modifier
  90.                         .background(Color.LightGray)
  91.                         .aspectRatio(1f)
  92.                         .weight(1f),
  93.                     onClick = {
  94.                         onAction(CalculatorAction.Number(7))
  95.                     })
  96.  
  97.                 CalculatorButton(symbol = "8",
  98.                     modifier = Modifier
  99.                         .background(Color.LightGray)
  100.                         .aspectRatio(1f)
  101.                         .weight(1f),
  102.                     onClick = {
  103.                         onAction(CalculatorAction.Number(8))
  104.                     })
  105.  
  106.                 CalculatorButton(symbol = "9",
  107.                     modifier = Modifier
  108.                         .background(Color.LightGray)
  109.                         .aspectRatio(1f)
  110.                         .weight(1f),
  111.                     onClick = {
  112.                         onAction(CalculatorAction.Number(9))
  113.                     })
  114.                 CalculatorButton(symbol = "-",
  115.                     modifier = Modifier
  116.                         .background(Orange)
  117.                         .aspectRatio(1f)
  118.                         .weight(1f),
  119.                     onClick = {
  120.                         onAction(CalculatorAction.Operation(CalculatorOperation.Subtract))
  121.                     })
  122.  
  123.  
  124.             }
  125. // 4 5 6
  126.  
  127.             Row(
  128.                 modifier = Modifier.fillMaxWidth(),
  129.                 horizontalArrangement = Arrangement.spacedBy(buttonSpace)
  130.             ) {
  131.                 CalculatorButton(symbol = "4",
  132.                     modifier = Modifier
  133.                         .background(Color.LightGray)
  134.                         .aspectRatio(1f)
  135.                         .weight(1f),
  136.                     onClick = {
  137.                         onAction(CalculatorAction.Number(4))
  138.                     })
  139.  
  140.                 CalculatorButton(symbol = "5",
  141.                     modifier = Modifier
  142.                         .background(Color.LightGray)
  143.                         .aspectRatio(1f)
  144.                         .weight(1f),
  145.                     onClick = {
  146.                         onAction(CalculatorAction.Number(5))
  147.                     })
  148.  
  149.                 CalculatorButton(symbol = "6",
  150.                     modifier = Modifier
  151.                         .background(Color.LightGray)
  152.                         .aspectRatio(1f)
  153.                         .weight(1f),
  154.                     onClick = {
  155.                         onAction(CalculatorAction.Number(6))
  156.                     })
  157.                 CalculatorButton(symbol = "+",
  158.                     modifier = Modifier
  159.                         .background(Orange)
  160.                         .aspectRatio(1f)
  161.                         .weight(1f),
  162.                     onClick = {
  163.                         onAction(CalculatorAction.Operation(CalculatorOperation.Add))
  164.                     })
  165.  
  166.  
  167.             }
  168.  
  169. // 12 3
  170.             Row(
  171.                 modifier = Modifier.fillMaxWidth(),
  172.                 horizontalArrangement = Arrangement.spacedBy(buttonSpace)
  173.             ) {
  174.                 CalculatorButton(symbol = "1",
  175.                     modifier = Modifier
  176.                         .background(Color.LightGray)
  177.                         .aspectRatio(1f)
  178.                         .weight(1f),
  179.                     onClick = {
  180.                         onAction(CalculatorAction.Number(1))
  181.                     })
  182.  
  183.                 CalculatorButton(symbol = "2",
  184.                     modifier = Modifier
  185.                         .background(Color.LightGray)
  186.                         .aspectRatio(1f)
  187.                         .weight(1f),
  188.                     onClick = {
  189.                         onAction(CalculatorAction.Number(2))
  190.                     })
  191.  
  192.                 CalculatorButton(symbol = "3",
  193.                     modifier = Modifier
  194.                         .background(Color.LightGray)
  195.                         .aspectRatio(1f)
  196.                         .weight(1f),
  197.                     onClick = {
  198.                         onAction(CalculatorAction.Number(3))
  199.                     })
  200.                 CalculatorButton(symbol = "*",
  201.                     modifier = Modifier
  202.                         .background(Orange)
  203.                         .aspectRatio(1f)
  204.                         .weight(1f),
  205.                     onClick = {
  206.                         onAction(CalculatorAction.Operation(CalculatorOperation.Multiply))
  207.                     })
  208.  
  209.  
  210.             }
  211.  
  212.  
  213.             Row(
  214.                 modifier = Modifier.fillMaxWidth(),
  215.                 horizontalArrangement = Arrangement.spacedBy(buttonSpace)
  216.             ) {
  217.                 CalculatorButton(symbol = "0",
  218.                     modifier = Modifier
  219.                         .background(Color.LightGray)
  220.                         .aspectRatio(2f)
  221.                         .weight(2f),
  222.                     onClick = {
  223.                         onAction(CalculatorAction.Number(0))
  224.                     })
  225.  
  226.                 CalculatorButton(symbol = ".",
  227.                     modifier = Modifier
  228.                         .background(Color.LightGray)
  229.                         .aspectRatio(1f)
  230.                         .weight(1f),
  231.                     onClick = {
  232.                         onAction(CalculatorAction.Decimal)
  233.                     })
  234.  
  235.                 CalculatorButton(symbol = "=",
  236.                     modifier = Modifier
  237.                         .background(Orange)
  238.                         .aspectRatio(1f)
  239.                         .weight(1f),
  240.                     onClick = {
  241.                         onAction(CalculatorAction.Calculate)
  242.                     })
  243.  
  244.  
  245.             }
  246.         }
  247.  
  248.  
  249.     }
  250.  
  251. }

这里用到了status

这个是啥

data class

  1. package com.example.caclulator
  2.  
  3. data class CalculatorState(
  4.     val number1: String = "", val number2: String = "", val operation: CalculatorOperation? = null
  5. )

根据他们三个的变化。来进行对数据的刷新

还用到了密封类：

CalculatorAction

这个是啥？枚举的升级版本！

一下子就列举出来所有情况。枚举只能列举相同的状态。而他不一样可以扩展。

  1. package com.example.caclulator
  2.  
  3. sealed class CalculatorAction{
  4.     data class Number(val number:Int):CalculatorAction()
  5.  
  6.     object Clear:CalculatorAction()
  7.     object Delete:CalculatorAction()
  8.     object Decimal:CalculatorAction()
  9.     object Calculate:CalculatorAction()
  10.  
  11.     data class Operation(val operation: CalculatorOperation):CalculatorAction()
  12. }

扩展的另外一个密封类

  1. package com.example.caclulator
  2.  
  3. sealed class CalculatorOperation(val symbol: String) {
  4.     object Add : CalculatorOperation("+")
  5.     object Subtract : CalculatorOperation("-")
  6.     object Multiply : CalculatorOperation("*")
  7.     object Divide : CalculatorOperation("/")
  8. }

然后计算逻辑在viewModel当中

  1. package com.example.caclulator
  2.  
  3. import androidx.compose.runtime.getValue
  4. import androidx.compose.runtime.mutableStateOf
  5. import androidx.compose.runtime.setValue
  6. import androidx.lifecycle.ViewModel
  7.  
  8. class CalculatorViewModel : ViewModel() {
  9.     var state by mutableStateOf(CalculatorState())
  10.  
  11.     fun onAction(action: CalculatorAction) {
  12.         when (action) {
  13.             is CalculatorAction.Number -> enterNumber(action.number)
  14.             is CalculatorAction.Decimal -> enterDecimal()
  15.             is CalculatorAction.Clear -> state = CalculatorState()
  16.             is CalculatorAction.Operation -> enterOperation(action.operation)
  17.             is CalculatorAction.Calculate -> performCalculation()
  18.             is CalculatorAction.Delete -> performDelete()
  19.         }
  20.     }
  21.  
  22.     private fun performDelete() {
  23.         when {
  24.             state.number2.isNotBlank() -> state = state.copy(number2 = state.number2.dropLast(1))
  25.             state.operation != null -> state = state.copy(operation = null)
  26.             state.number1.isNotBlank() -> state = state.copy(number1 = state.number1.dropLast(1))
  27.  
  28.  
  29.         }
  30.     }
  31.  
  32.     private fun performCalculation() {
  33.         val number1 = state.number1.toDoubleOrNull()
  34.         val number2 = state.number2.toDoubleOrNull()
  35.         if (number1 != null && number2 != null) {
  36.             val result = when (state.operation) {
  37.                 is CalculatorOperation.Add -> number1 + number2
  38.                 is CalculatorOperation.Subtract -> number1 - number2
  39.                 is CalculatorOperation.Multiply -> number1 * number2
  40.                 is CalculatorOperation.Divide -> number1 / number2
  41.                 null -> return
  42.             }
  43.  
  44.             state = state.copy(number1 = result.toString().take(15), number2 = "", operation = null)
  45.         }
  46.     }
  47.  
  48.     private fun enterOperation(operation: CalculatorOperation) {
  49.         if (state.number1.isNotBlank()) {
  50.             state = state.copy(operation = operation)
  51.         }
  52.     }
  53.  
  54.     private fun enterDecimal() {
  55.         if (state.operation == null && !state.number1.contains(".") && state.number1.isNotBlank()) {
  56.             state = state.copy(state.number1 + ".")
  57.             return
  58.         }
  59.  
  60.         if (!state.number2.contains(".") && state.number2.isNotBlank()) {
  61.             state = state.copy(state.number2 + ".")
  62.         }
  63.     }
  64.  
  65.     private fun enterNumber(number: Int) {
  66.         if (state.operation == null) {
  67.             if (state.number1.length >= MAX_NUM_LENGTH) {
  68.  
  69.                 return
  70.             }
  71.             state = state.copy(number1 = state.number1 + number)
  72.  
  73.             return
  74.         }
  75.  
  76.         if (state.number2.length >= MAX_NUM_LENGTH) {
  77.             return
  78.         }
  79.         state = state.copy(number2 = state.number2 + number)
  80.  
  81.     }
  82.  
  83.     companion object {
  84.         private const val MAX_NUM_LENGTH = 8
  85.  
  86.     }
  87.  
  88. }

MainActivity

  1. package com.example.caclulator
  2.  
  3. import android.os.Bundle
  4. import androidx.activity.ComponentActivity
  5. import androidx.activity.compose.setContent
  6. import androidx.activity.viewModels
  7. import androidx.compose.foundation.background
  8. import androidx.compose.foundation.layout.fillMaxSize
  9. import androidx.compose.foundation.layout.fillMaxWidth
  10. import androidx.compose.foundation.layout.padding
  11. import androidx.compose.material.MaterialTheme
  12. import androidx.compose.material.Surface
  13. import androidx.compose.material.Text
  14. import androidx.compose.runtime.Composable
  15. import androidx.compose.ui.Modifier
  16. import androidx.compose.ui.tooling.preview.Preview
  17. import androidx.compose.ui.unit.dp
  18. import androidx.lifecycle.viewmodel.compose.viewModel
  19. import com.example.caclulator.ui.theme.Android_compose_caclulatorTheme
  20. import com.example.caclulator.ui.theme.MediumGray
  22. class MainActivity : ComponentActivity() {
  23.     override fun onCreate(savedInstanceState: Bundle?) {
  24.         super.onCreate(savedInstanceState)
  25.         setContent {
  26.             Android_compose_caclulatorTheme {
  27.                 val viewModel = viewModel<CalculatorViewModel>()
  28.                 val state = viewModel.state
  29.                 val buttonSpacing = 8.dp
  30.                 Calculator(
  31.                     state = state,
  32.                     buttonSpace = buttonSpacing,
  33.                     onAction = viewModel::onAction,
  34.                     modifier = Modifier
  35.                         .fillMaxSize()
  36.                         .background(MediumGray)
  37.                         .padding(16.dp)
  38.                 )
  39.             }
  40.         }
  41.     }
  42. }

这就完成了。。

项目地址：https://gitee.com/liuande/android_compose_learn_calculator

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/999923
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号