Com a introdução do kit de ferramentas “Jetpack Compose”, os desenvolvedores Android dizem adeus aos antigos layouts XML. A descrição declarativa de interfaces de usuário simplifica a criação de telas, vinculação de dados e reutilização.

Apesar das muitas vantagens do Jetpack Compose , certos casos de uso ainda exigem muito código. Percebi isso em particular quando quis criar um formulário maior para um aplicativo Android. Nesta história, gostaria de mostrar como criar um formulário muito simples com o Jetpack Compose.

Você provavelmente também está interessado em minha próxima história , na qual mostrarei uma biblioteca autodesenvolvida com a qual você pode criar formulários mais complexos com validadores e vinculação de dados com o mínimo de código possível.

Campo de texto simples

O exemplo a seguir é um exemplo oficial do Android para um elemento de composição TextField simples .

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

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

Separação de preocupações

Bem, este campo de texto funciona perfeitamente. No entanto, em um caso de uso normal, muitas vezes estou interessado em mais do que apenas a funcionalidade básica de um campo de texto. Por exemplo, muitas vezes gostaria de adicionar validadores aos campos do formulário.

Também quero seguir os princípios de arquitetura padronizada do Android e separar as diferentes camadas. Portanto, quero ter os dados em um ViewModel com um UiState.

O exemplo a seguir mostra novamente um campo de texto simples com um “validador de comprimento mínimo”. Este exemplo também segue os princípios de arquitetura padronizada.

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

Biblioteca de formulários de composição

Com a biblioteca de código aberto Compose Form é muito fácil criar um formulário avançado, que segue os princípios da arquitetura padronizada, com vários campos, seletores, validadores e vários outros recursos.
Leia minha próxima história para aprender como usar e personalizar o formulário de composição.

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