С введением инструментария Jetpack Compose разработчики Android прощаются со старыми макетами XML. Декларативное описание пользовательских интерфейсов упрощает создание экранов, привязку данных и возможность повторного использования.

Несмотря на множество преимуществ Jetpack Compose , для некоторых вариантов использования по-прежнему требуется много кода. Я понял это, в частности, когда хотел создать большую форму для Android-приложения. В этой истории я хотел бы показать вам, как создать очень простую форму с помощью Jetpack Compose.

Вас наверняка также заинтересует мой следующий рассказ , в котором я покажу вам самостоятельно разработанную библиотеку, с помощью которой вы сможете создавать более сложные формы с валидаторами и привязкой данных с минимальным количеством кода.

Простое текстовое поле

Следующий пример является официальным примером Android для простого компонуемого TextField .

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

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

Разделение интересов

Что ж, это текстовое поле работает отлично. Однако в обычном случае меня часто интересуют не только базовые функции текстового поля. Например, мне часто хочется добавить валидаторы для полей формы.

Также я хочу следовать принципам стандартизированной архитектуры Android и разделять различные уровни. Поэтому я хочу иметь данные в ViewModel с UiState.

В следующем примере снова показано простое текстовое поле с «валидатором минимальной длины». Этот пример также соответствует принципам стандартизированной архитектуры.

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

Создать библиотеку форм

С собственной библиотекой с открытым исходным кодом Compose Form очень легко создать расширенную форму, которая следует стандартизированным принципам архитектуры, с несколькими полями, средствами выбора, валидаторами и различными другими функциями.
Прочтите мою следующую статью, чтобы узнать, как использовать и настраивать Compose Form.

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