Dengan diperkenalkannya toolkit “Jetpack Compose”, developer Android mengucapkan selamat tinggal pada tata letak XML lama. Deskripsi deklaratif antarmuka pengguna menyederhanakan pembuatan layar, pengikatan data, dan penggunaan kembali.

Meskipun Jetpack Compose memiliki banyak keuntungan , kasus penggunaan tertentu masih memerlukan banyak kode. Saya menyadari hal ini khususnya ketika saya ingin membuat bentuk yang lebih besar untuk aplikasi Android. Dalam cerita ini saya ingin menunjukkan cara membuat formulir yang sangat sederhana dengan Jetpack Compose.

Anda mungkin juga tertarik dengan cerita saya berikutnya , di mana saya akan menunjukkan kepada Anda perpustakaan yang dikembangkan sendiri yang dengannya Anda dapat membuat formulir yang lebih kompleks dengan validator dan pengikatan data dengan kode sesedikit mungkin.

Bidang teks sederhana

Contoh berikut adalah contoh Android resmi untuk komposisi TextField sederhana .

@Composable
fun SimpleFilledTextFieldSample() {
    var textState by remember { mutableStateOf("Hello") }

    TextField(
        value = textState,
        onValueChange = { textState = it },
        label = { Text("Label") }
    )
}

Pemisahan keprihatinan

Nah, bidang teks ini berfungsi dengan baik. Namun, dalam kasus penggunaan normal, saya sering tertarik pada lebih dari sekadar fungsionalitas dasar bidang teks. Misalnya, saya sering ingin menambahkan validator ke bidang formulir.

Saya juga ingin mengikuti prinsip arsitektur standar Android dan memisahkan lapisan yang berbeda. Karena itu saya ingin memiliki data dalam ViewModel dengan UiState.

Contoh berikut menampilkan lagi bidang teks sederhana dengan "validator panjang minimum". Contoh ini juga mengikuti prinsip arsitektur standar.

data class MainUiState(
    val currentName: String = "",
    val currentNameErrors: MutableList<String> = mutableListOf(),
)
class MainViewModel: ViewModel() {
    // Main UI state
    private val _uiState = MutableStateFlow(MainUiState())
    val uiState: StateFlow<MainUiState> = _uiState.asStateFlow()

    fun updateName(name: String) {
        val errors = mutableListOf<String>()
        if (name.length < 4) {
            errors.add("The name must be at least 4 characters.")
        }
        _uiState.value = _uiState.value.copy(
            currentName = name,
            currentNameErrors = errors
        )
    }
}
class MainActivity : ComponentActivity() {
    // ...
    
    @Composable
    fun SimpleFilledTextFieldSample(
        mainViewModel: MainViewModel = viewModel()
    ) {
        val mainUiState by mainViewModel.uiState.collectAsState()
        Column(modifier = Modifier.padding(16.dp)) {
            TextField(
                value = mainUiState.currentName,
                singleLine = true,
                modifier = Modifier.fillMaxWidth(),
                onValueChange = { mainViewModel.updateName(it) },
                label = { Text(text = "Enter your Name") },
                isError = mainUiState.currentNameErrors.isNotEmpty()
            )
            mainUiState.currentNameErrors.forEach {
                Text(
                    modifier = Modifier.padding(vertical = 8.dp),
                    text = it,
                    color = Color.Red
                )
            }
        }
    }
}

Buat Pustaka Formulir

Dengan pustaka sumber terbuka Compose Form yang dikembangkan sendiri , sangat mudah untuk membuat formulir lanjutan, yang mengikuti prinsip arsitektur standar, dengan banyak bidang, pemilih, validator, dan berbagai fitur lainnya.
Baca cerita saya berikutnya untuk mempelajari cara menggunakan dan menyesuaikan Formulir Tulis.

https:///@benlue/advanced-forms-in-android-with-compose-form-154ee0bff65b