В середине 2024 года, как глухой независимый разработчик, я часто размышляю о прогрессе и достижениях, достигнутых за последние шесть месяцев. В этой статье я расскажу, как использовать Jetpack Compose、Material3 объединить MVI（Model-View-Intent） Архитектурно спроектируйте модульное приложение для Android. Независимо от того, являетесь ли вы новичком или опытным разработчиком Android, я уверен, что эта статья будет вам полезна.

1. Что такое архитектура MVI?

MVI да Model-View-Intent аббревиатура, МВИ Архитектура в основном состоит из трех основных частей:

1. Модель：уровень данных,Используется для представления статуса приложения.,Могут ли данные, полученные из баз данных, сетевых запросов и т. д.
2. Вид：пользовательский интерфейсслой,приложение для отображения Пользовательский интерфейс реагирует на взаимодействие с пользователем.
3. Намерение：События взаимодействия с пользователем или операции, инициируемые системой.,приведет к Model изменения в конечном итоге отражаются на View начальство.

2. Модульная архитектура.

Проект разделен на следующие модули:

1. Уровень пользовательского интерфейса：Отвечает за рендеринг интерфейса.и Логика взаимодействия с пользователем。
2. уровень данных：Управляйте сбором данных、хранилище、Обработка (включая взаимодействие с сетями и базами данных).
3. Уровень бизнес-логики (ViewModel/Intent)：соединять UI иуровень данных, обрабатывает бизнес-логику и управление состоянием.

Архитектура принята MVI（Model-View-Intent）,состояние существования в приложении да неизменяемое,Поток данных является односторонним,позволять UI Изменения предсказуемы.

3. Структура проекта

Проект основан на модульной конструкции и разделен на следующие категории:

com.nim.mviapp/
├── data/                     # уровень данных
│   ├── repository/            # логика хранилища данных
│   ├── model/                 # модель данных
│   └── database/              # База данных номеров
│
├── ui/                       # Уровень пользовательского интерфейса
│   ├── theme/                 # Material3 тема
│   ├── component/             # многоразовый UI компоненты
│   └── screen/                # Определение страницы, например HomeScreen и т. д.
│
├── viewmodel/                 # уровень бизнес-логики (Intent + ViewModel)
│   └── WishViewModel.kt       # Управлять бизнес-логикой и управлением статусами
│
└── MainApplication.kt         # Вход в приложение

4. Функциональный анализ модуля

4.1 Уровень данных

Внедрение уровня данных Repository Pattern,Единое управление источниками данных. проходить Room Для локального хранилища используйте Flow Обработка потоков данных для удобства MVI Однонаправленный поток данных остается прежним.

class WishRepository(private val wishDao: WishDao) {
    fun getWishes(): Flow<List<Wish>> = wishDao.getAllWishes()

    suspend fun addWish(wish: Wish) {
        wishDao.addAWish(wish)
    }
    suspend fun updateWishLikedStatus(wish: Wish, isLiked: Boolean) {
        wish.isLiked = isLiked
        wishDao.updateWish(wish)  
    }
    // Другие операции CRUD...
}

4.2 Уровень бизнес-логики (Intent + ViewModel)

существовать MVI , каждая пользовательская операция будет упакована в Intent,Затемпроходить ViewModel иметь дело с。ViewModel Управляет взаимодействием с уровнем данных, а также отвечает за поддержание UI Синхронизация статусов.

class WishViewModel(private val repository: WishRepository) : ViewModel() {

    val wishes: LiveData<List<Wish>> = repository.getWishes().asLiveData()

    fun addWish(wish: Wish) {
        viewModelScope.launch {
            repository.addWish(wish)
        }
    }
    // Новый метод обновления статуса лайков
    fun updateWishLikedStatus(wish: Wish, isLiked: Boolean) {
        viewModelScope.launch {
            repository.updateWishLikedStatus(wish, isLiked)
        }
    }
    // Другая логика обработки намерений...
}

каждый Intent Будут запущены соответствующие обновления статуса.

4.3 Уровень пользовательского интерфейса

UI проход слоя Jetpack Compose и Material3 Создайте приложение Пользовательский интерфейс. С помощью Compose Декларативный шаблон проектирования,можно легко создатьмногоразовыйкомпоненты,объединить MVI Убедитесь, что интерфейс автоматически обновляется при изменении статуса.

@Composable
fun HomeScreen(viewModel: WishViewModel) {
    val wishes by viewModel.wishes.observeAsState(initial = emptyList())

    LazyColumn {
        items(wishes) { wish ->
            Text(text = wish.title)
        }
    }
}

View всегда проходить Intent и ViewModel Взаимодействие, Пользовательский интерфейс Рендеринг происходит через неизменяемое состояние.

5. Реализация навигации по страницам.

Jetpack Compose Предоставляет встроенную библиотеку навигации, которая помогает нам управлять переходами на страницы приложения. Логика навигации между помещенными страницами существует MainScreen середина:

@Composable
fun MainScreen() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen(navController) }
        composable("detail/{id}") { backStackEntry ->
            val id = backStackEntry.arguments?.getString("id")
            DetailScreen(navController, id)
        }
    }
}

Такая конструкция позволяет добиться разделения страниц и уменьшить зависимости.

6. Управление статусом и потоком данных

Состояние да неизменяемо, и все операции каждый будут создавать новое состояние. Следующий обновленный пример пользовательского интерфейса, управляемого состоянием:

@Composable
fun WishItem(viewModel: WishViewModel, wish: Wish) {
    var isLiked by remember { mutableStateOf(false) }

    Column {
        Text(text = wish.title)
        IconButton(onClick = {
                    isLiked = !isLiked
                    viewModel.updateWishLikedStatus(wish, isLiked)  // вызов ViewModel Способ обновления статуса лайка
          }) {
            Icon(imageVector = Icons.Default.Favorite, tint = if (isLiked) Color.Red else Color.Gray)
        }
    }
}

Каждый раз, когда пользователь нажимает на значок, статус isLiked Изменения происходят, пользовательский интерфейс Он будет автоматически перерисован в зависимости от нового состояния.

7. Резюме

Такая модульная архитектура значительно повышает удобство сопровождения и масштабируемость приложения. Для сложных проектов используйте MVI Такая архитектура одностороннего потока данных может уменьшить путаницу в управлении состоянием и гарантировать, что каждое изменение состояния предсказуемо и контролируемо.

Не стесняйтесь задавать любые вопросы, спасибо всем, кто дочитал)