Изучите код компонуемых функций

Реализация компонуемых функций

В файле shared/src/commonMain/kotlin/App.kt найдите функцию App():

@Composable
@Preview
fun App() {
    MaterialTheme {
        var showContent by remember { mutableStateOf(false) }
        Column(
            modifier = Modifier
                .background(MaterialTheme.colorScheme.primaryContainer)
                .safeContentPadding()
                .fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Button(onClick = { showContent = !showContent }) {
                Text("Click me!")
            }
            AnimatedVisibility(showContent) {
                val greeting = remember { Greeting().greet() }
                Column(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalAlignment = Alignment.CenterHorizontally,
                ) {
                    Image(painterResource(Res.drawable.compose_multiplatform), null)
                    Text("Compose: $greeting")
                }
            }
        }
    }
}

Функция App() — это обычная функция Kotlin с аннотацией @Composable. Такие функции называются компонуемыми функциями или просто компонуемыми элементами. Это строительные блоки пользовательского интерфейса на основе Jetpack Compose или Compose Multiplatform.

Функция App() используется в качестве основы архитектуры пользовательского интерфейса приложения и имеет следующую структуру:

• MaterialTheme() задает внешний вид приложения. Настройки по умолчанию можно изменить. Например, можно выбрать цвета, формы и типографику.

• Компонуемый элемент Column() управляет макетом приложения. Здесь он отображает Button над компонуемым элементом AnimatedVisibility().

• Button() содержит компонуемый элемент Text, который отображает текст поверх кнопки.

• Вызов AnimatedVisibility() настроен так, чтобы при нажатии кнопки показывать и скрывать Image с помощью анимации.

• painterResource() загружает векторное изображение, сохраненное в XML-файле.

Параметр horizontalAlignment функции Column() выравнивает содержимое столбца по центру. Чтобы это сработало, столбец должен занимать всю ширину контейнера. Для этого можно использовать параметр modifier.

Модификаторы — ключевой компонент Jetpack Compose и Compose Multiplatform. Они предоставляют основной механизм для настройки внешнего вида или поведения компонуемых элементов пользовательского интерфейса. Модификаторы создаются с помощью методов типа Modifier. При объединении этих методов в цепочку каждый вызов может изменить Modifier, возвращенный предыдущим вызовом, поэтому порядок имеет значение. Подробнее см. введение в модификаторы Compose Multiplatform и подробную документацию по модификаторам Jetpack Compose.

Управление состоянием

Загруженное изображение должно сохранять свое состояние: оно должно оставаться видимым или скрытым после повторных композиций, пока пользователь не нажмет кнопку. Свойство showContent в компонуемом элементе App() создается с помощью функции mutableStateOf(), а значит, это наблюдаемый объект состояния:

var showContent by remember { mutableStateOf(false) }

Объект состояния обернут вызовом remember(): это означает, что он создается один раз, а затем сохраняется фреймворком. Таким образом, свойство showContent содержит объект состояния с логическим значением. Фреймворк кэширует этот объект состояния, позволяя компонуемым элементам наблюдать за ним.

При изменении значения состояния повторно вызываются все компонуемые элементы, которые за ним наблюдают. Благодаря этому можно перерисовать созданные ими виджеты. Это называется рекомпозицией.

Состояние изменяется только в параметре onClick вызова Button(). Обработчик события меняет значение свойства showContent на противоположное. В результате изображение показывается или скрывается вместе с вызовом Greeting().greet(), так как родительский компонуемый элемент AnimatedVisibility() наблюдает за showContent.

Запуск пользовательского интерфейса на разных платформах

Функция App() выполняется по-разному на каждой платформе:

• На Android она управляется активностью.

• На iOS — контроллером представления.

• На компьютере — окном.

• В веб-приложении — контейнером.

Рассмотрим каждый из вариантов.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        enableEdgeToEdge()
        super.onCreate(savedInstanceState)

        setContent {
            App()
        }
    }
}

fun MainViewController() = ComposeUIViewController { App() }

fun main() = application {
    Window(
        onCloseRequest = ::exitApplication,
        title = "ComposeDemo"
    ) {
        App()
    }
}

@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    ComposeViewport {
        App()
    }
}

Следующий шаг

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

Перейти к следующей части

Получить помощь

• Kotlin Slack. Получите приглашение и присоединитесь к каналу #multiplatform.

• Трекер задач Kotlin. Сообщить о новой проблеме.