Освоение Android Jetpack Compose BottomSheet с Material-3

Введение:

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

Предпосылки:

Прежде чем мы начнем, убедитесь, что в файл build.gradle вашего проекта добавлена ​​следующая зависимость:

implementation 'androidx.compose.material3:material3:1.2.0-alpha02'

Выполнение:

Во-первых, давайте настроим класс MainActivity и необходимые зависимости:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.BottomSheetDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

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

        setContent {
            var showSheet by remember { mutableStateOf(false) }

            if (showSheet) {
                BottomSheet() {
                    showSheet = false
                }
            }

            JCBottomNavigationDemoTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        Button(onClick = {
                            showSheet = true
                        }) {
                            Text(text = "Show BottomSheet")
                        }
                    }
                }
            }
        }
    }
}

В приведенном выше коде мы определяем класс MainActivity и настраиваем базовую структуру нашего приложения. У нас есть переменная showSheet, которая отслеживает, должен ли отображаться нижний лист или нет. Когда пользователь нажимает кнопку «Показать нижний лист», для переменной showSheet устанавливается значение true, вызывая отображение нижнего листа.

Далее давайте создадим составную функцию BottomSheet:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BottomSheet(onDismiss: () -> Unit) {
    val modalBottomSheetState = rememberModalBottomSheetState()

    ModalBottomSheet(
        onDismissRequest = { onDismiss() },
        sheetState = modalBottomSheetState,
        dragHandle = { BottomSheetDefaults.DragHandle() },
    ) {
        CountryList()
    }
}

В функции BottomSheet мы определяем состояние нижнего листа с помощью rememberModalBottomSheetState(). Затем мы создаем компонент ModalBottomSheet, указав обратный вызов onDismissRequest при закрытии нижнего листа и dragHandle для легкого перетаскивания. Внутри нижнего листа мы вызываем функцию CountryList для отображения списка стран.

Наконец, давайте создадим компонуемую функцию CountryList, которая отображает список стран:

@Composable
fun CountryList() {
    val countries = listOf(
        Pair("United States", "\uD83C\uDDFA\uD83C\uDDF8"),
        Pair("Canada", "\uD83C\uDDE8\uD83C\uDDE6"),
        Pair("India", "\uD83C\uDDEE\uD83C\uDDF3"),
        Pair("Germany", "\uD83C\uDDE9\uD83C\uDDEA"),
        Pair("France", "\uD83C\uDDEB\uD83C\uDDF7"),
        Pair("Japan", "\uD83C\uDDEF\uD83C\uDDF5"),
        Pair("China", "\uD83C\uDDE8\uD83C\uDDF3"),
        Pair("Brazil", "\uD83C\uDDE7\uD83C\uDDF7"),
        Pair("Australia", "\uD83C\uDDE6\uD83C\uDDFA"),
        Pair("Russia", "\uD83C\uDDF7\uD83C\uDDFA"),
        Pair("United Kingdom", "\uD83C\uDDEC\uD83C\uDDE7"),
    )

    LazyColumn {
        items(countries) { (country, flag) ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 10.dp, horizontal = 20.dp)
            ) {
                Text(
                    text = flag,
                    modifier = Modifier.padding(end = 20.dp)
                )
                Text(text = country)
            }
        }
    }
}

В функции CountryList мы определяем список стран вместе с соответствующими представлениями эмодзи флагов. Мы используем LazyColumn для отображения списка стран с возможностью прокрутки. Каждый элемент страны представлен Row, содержащим эмодзи флага и название страны.

Заключение:

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

Будьте в курсе последних публикаций: не пропустите!

Если вы нашли этот пост полезным, поддержите его, похлопав несколько раз 👏

Спасибо за вашу поддержку и высокую оценку! 😊🙏