Với việc giới thiệu bộ công cụ “Jetpack Compose”, các nhà phát triển Android nói lời tạm biệt với các bố cục XML cũ. Mô tả khai báo của giao diện người dùng đơn giản hóa việc tạo màn hình, liên kết dữ liệu và khả năng sử dụng lại.

Mặc dù có nhiều ưu điểm của Jetpack Compose , một số trường hợp sử dụng nhất định vẫn yêu cầu nhiều mã. Tôi đặc biệt nhận ra điều này khi tôi muốn tạo một biểu mẫu lớn hơn cho một ứng dụng Android. Trong câu chuyện này, tôi muốn chỉ cho bạn cách tạo một biểu mẫu rất đơn giản với Jetpack Compose.

Bạn có thể cũng quan tâm đến câu chuyện tiếp theo của tôi , trong đó tôi sẽ chỉ cho bạn một thư viện tự phát triển mà bạn có thể tạo các biểu mẫu phức tạp hơn với trình xác thực và liên kết dữ liệu với càng ít mã càng tốt.

Trường văn bản đơn giản

Ví dụ sau đây là một ví dụ chính thức của Android cho một TextField đơn giản có thể kết hợp được.

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

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

Tách mối quan tâm

Chà, trường văn bản này hoạt động hoàn hảo. Tuy nhiên, trong trường hợp sử dụng bình thường, tôi thường quan tâm đến nhiều thứ hơn là chức năng cơ bản của trường văn bản. Ví dụ: tôi thường muốn thêm trình xác thực vào các trường biểu mẫu.

Ngoài ra, tôi muốn tuân theo các nguyên tắc kiến ​​trúc được tiêu chuẩn hóa của Android và tách các lớp khác nhau. Do đó, tôi muốn có dữ liệu trong ViewModel với UiState.

Ví dụ sau hiển thị lại một trường văn bản đơn giản với "trình xác nhận độ dài tối thiểu". Ví dụ này cũng tuân theo các nguyên tắc kiến ​​trúc tiêu chuẩn hóa.

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
                )
            }
        }
    }
}

Soạn thư viện biểu mẫu

Với thư viện mã nguồn mở Compose Form tự phát triển , rất dễ dàng để tạo một biểu mẫu nâng cao, tuân theo các nguyên tắc kiến ​​trúc được tiêu chuẩn hóa, với nhiều trường, bộ chọn, trình xác nhận và nhiều tính năng khác.
Đọc câu chuyện tiếp theo của tôi để tìm hiểu cách sử dụng và tùy chỉnh Biểu mẫu Soạn thư.

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