Pertemuan 5 - PPB G

 Nama : Muhammad Hafidh Rosyadi

 NRP : 5025211013

 Kelas  : PPB G

 

 

 

APLIKASI KALKULATOR SEDERHANA

 Kode : https://github.com/Hfdrsyd/Tugas-PPB/tree/main/SimpleCalculator

 

 

 1. Manajemen State

Pada bagian awal setContent, terdapat tiga variabel state utama:

var num1 by remember { mutableStateOf("23") }
var num2 by remember { mutableStateOf("17") }
var result by remember { mutableStateOf("") }

    num1 dan num2 digunakan untuk menyimpan nilai input dari pengguna dalam bentuk teks (String).

    result digunakan untuk menyimpan hasil perhitungan, juga dalam bentuk teks.

Penggunaan remember dan mutableStateOf memastikan bahwa perubahan pada nilai-nilai tersebut akan memicu rekomposisi UI, sehingga tampilan selalu mencerminkan data terbaru.

2. Input Data

Input dari pengguna diambil menggunakan dua komponen TextField:

TextField(value = num1, onValueChange = { num1 = it })
TextField(value = num2, onValueChange = { num2 = it })

Setiap perubahan teks di dalam TextField akan mengubah nilai num1 atau num2 sesuai dengan input pengguna. Dengan demikian, aplikasi secara real-time menyimpan data yang diinputkan.

3. Tombol Operasi Matematika

Empat buah tombol disediakan untuk melakukan operasi penjumlahan, pengurangan, perkalian, dan pembagian:

Button(onClick = {
    result = (num1.toInt() + num2.toInt()).toString()
    Toast.makeText(applicationContext,"Result is $result",Toast.LENGTH_SHORT).show()
}) {
    Text(text = "add")
}

Mekanisme di balik setiap tombol meliputi:

    Konversi num1 dan num2 dari String menjadi Int.

    Melakukan operasi aritmatika sesuai tombol yang ditekan.

    Mengubah hasil operasi menjadi String dan menyimpannya di variabel result.

    Menampilkan pesan Toast yang memperlihatkan hasil kepada pengguna.

Jenis operasi lainnya (pengurangan, perkalian, dan pembagian) mengikuti pola yang sama dengan penyesuaian operator matematika.

4. Menampilkan Hasil Perhitungan

Hasil dari perhitungan matematika ditampilkan pada layar menggunakan komponen Text:

Text(text = "Hasilnya adalah $result")

Karena result merupakan variabel state, perubahan pada nilainya secara otomatis memperbarui teks yang ditampilkan kepada pengguna.

5. Pengaturan Tata Letak

Struktur tata letak UI menggunakan:

    Column untuk menata elemen secara vertikal.

    Row untuk menyusun tombol-tombol secara horizontal.

    Spacer untuk memberikan jarak antar komponen agar tampilan lebih rapi.

Contohnya:

Column {
    Spacer(modifier = Modifier.height(100.dp))
    TextField(...)
    TextField(...)
    Spacer(modifier = Modifier.height(16.dp))
    Text(...)
    Spacer(modifier = Modifier.height(16.dp))
    Row {
        Button(...)
        Spacer(modifier = Modifier.width(16.dp))
        Button(...)
        ...
    }
}

Penggunaan Spacer dengan parameter height atau width memberikan ruang kosong yang fleksibel, memperbaiki estetika visual tampilan.