Wraz z wprowadzeniem zestawu narzędzi „Jetpack Compose” programiści Androida żegnają się ze starymi układami XML. Deklaratywny opis interfejsów użytkownika upraszcza tworzenie ekranów, wiązanie danych i ponowne użycie.

Pomimo wielu zalet Jetpack Compose , niektóre przypadki użycia nadal wymagają dużej ilości kodu. Zdałem sobie z tego sprawę w szczególności, gdy chciałem stworzyć większy formularz dla aplikacji na Androida. W tej historii chciałbym pokazać, jak stworzyć bardzo prosty formularz za pomocą Jetpack Compose.

Pewnie zainteresuje Cię też moja kolejna historia , w której pokażę Ci samodzielnie opracowaną bibliotekę, za pomocą której możesz tworzyć bardziej rozbudowane formularze z walidatorami i wiązaniem danych przy jak najmniejszej ilości kodu.

Proste pole tekstowe

Poniższy przykład to oficjalny przykład systemu Android dla prostego obiektu TextField , który można komponować.

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

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

Rozdzielenie obaw

Cóż, to pole tekstowe działa doskonale. Jednak w normalnym przypadku często interesuje mnie coś więcej niż tylko podstawowa funkcjonalność pola tekstowego. Na przykład często chciałbym dodać walidatory do pól formularza.

Chcę również postępować zgodnie ze standardowymi zasadami architektury Androida i oddzielić różne warstwy. Dlatego chcę mieć dane w ViewModel z UiState.

Poniższy przykład pokazuje ponownie proste pole tekstowe z „walidatorem minimalnej długości”. Ten przykład jest również zgodny ze standardowymi zasadami architektury.

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

Biblioteka formularzy redagowania

Dzięki samodzielnie opracowanej bibliotece open source Compose Form bardzo łatwo jest stworzyć zaawansowany formularz, który jest zgodny z zasadami standardowej architektury, z wieloma polami, selektorami, walidatorami i różnymi innymi funkcjami.
Przeczytaj moją następną historię, aby dowiedzieć się, jak używać i dostosowywać Formularz redagowania.

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