用 Jetpack Compose 写一个计算器：一个分步指南

Android

2023-12-30 12:35:28

用 Jetpack Compose 构建一个 Android 计算器

前言

对于任何开发人员来说，编写计算器都是一项基本任务。借助 Jetpack Compose 这一现代 Android UI 工具包，我们可以轻松构建一个美观、功能齐全的计算器应用程序。本文将逐步指导你完成这个过程，包括 UI 设计和计算逻辑。

UI 设计

布局

应用程序将分为两个主要部分：一个用于显示数字和运算符的文本区域和一个用于按钮的网格。

文本区域

文本区域将显示正在进行的计算，包括数字、运算符和结果。

按钮网格

按钮网格将包含数字键、运算符键和其他功能键，例如清除键和结果键。

计算逻辑

计算器将支持以下运算：

加法 (+)
减法 (-)
乘法 (*)
除法 (/)

它还将包括以下功能：

清除：清除当前计算。
结果：显示计算结果。

实现

1. 导入 Jetpack Compose

在你的 Compose 视图中导入必要的库。

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import java.lang.Exception

2. 定义计算器状态

使用 remember 创建一个可变状态，用于存储当前的计算值。

val calculationState = remember { mutableStateOf(TextFieldValue()) }

3. 创建文本区域

创建一个文本框，用于显示计算。

TextField(
    value = calculationState.value,
    onValueChange = { calculationState.value = it },
    modifier = Modifier.fillMaxSize(0.5f),
    textStyle = TextStyle(
        fontSize = 30.sp,
        fontWeight = FontWeight.Bold
    )
)

4. 创建按钮网格

在一个列中排列按钮，其中包含数字键、运算符键和其他功能键。

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) {
    // ...
}

5. 添加数字键

为每个数字创建一个按钮。

Button(
    onClick = { appendValue("7") },
    modifier = Modifier.size(64.dp),
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.White),
    contentPadding = PaddingValues(12.dp),
    shape = RoundedCornerShape(percent = 50)
) {
    Text(
        text = "7",
        fontSize = 24.sp,
        color = Color.Black
    )
}

6. 添加运算符键

为每个运算符创建一个按钮。

Button(
    onClick = { appendOperator("*") },
    modifier = Modifier.size(64.dp),
    colors = ButtonDefaults.buttonColors(backgroundColor = MaterialTheme.colors.primary),
    contentPadding = PaddingValues(12.dp),
    shape = RoundedCornerShape(percent = 50)
) {
    Text(
        text = "*",
        fontSize = 24.sp,
        color = Color.White
    )
}

7. 添加功能键

为清除和结果等功能创建按钮。

Button(
    onClick = { clear() },
    modifier = Modifier.size(64.dp),
    colors = ButtonDefaults.buttonColors(backgroundColor = MaterialTheme.colors.error),
    contentPadding = PaddingValues(12.dp),
    shape = RoundedCornerShape(percent = 50)
) {
    Text(
        text = "C",
        fontSize = 24.sp,
        color = Color.White
    )
}

8. 计算逻辑

在相关函数中实现计算逻辑，用于追加值、追加运算符、计算结果和清除计算。

private fun appendValue(value: String) {
    // ...
}

private fun appendOperator(operator: String) {
    // ...
}

private fun calculate() {
    // ...
}

private fun clear() {
    // ...
}