前语

KMM的开展除了靠官方社区的支撑外，一些大企业的开源落地也尤为重要。从这些开源中咱们需求学习他的规划思想和完成办法。从而在落地遇到问题时，寻得更多的解决办法。

上星期，Square正式将Paging分页库搬迁到了Kotlin Multiplatform渠道，运用在旗下的付出软件Cash App中。

搬迁过程

初衷

据Cash App称，他们想在跨渠道中运用分页逻辑，但是AndroidX Paging只支撑Android渠道。所以他们参照AndroidX下Paging库的规划，完成了一套Multiplatform Paging。

模型

与AndroidX下的Paging规划相同，paging-common模块供给存储层、视图模型层；paging-runtim模块供给UI层。

最主要的是，paging-common中的API与AndroidX 下的API完全相同，仅仅是将包从androidx.paging搬迁到了app.cash.paging中，所以这部分的运用咱们直接依照AndroidX中的Paging运用即可。假如之前项目现已运用了AndroiX的Paging库，则能够在Android渠道上无缝搬迁。

假如你之前从未运用过Paging库，能够参阅良久之前我写的两篇相关文章：

在View中运用Paging3分页库

在Compose中运用分页库

接下来咱们就以multiplatform-paging-samples为例，来看怎么完成在Multiplatform运用Paging库。

项目分析

项目介绍

multiplatform-paging-samples项目（Demo）的功用是运用github的接口：api.github.com/search/repositories 查询项目，输出项目路径和start数量。

也便是github主页上的查找功用。App运行截图如下所示。

这儿咱们查找关键词为“MVI”，左边输出为作者/项目名右侧为start数量，且完成了分页功用。接着咱们来看这个项目结构是怎么样的。

项目架构

从项目架构中能够看出在共享模块中，只有iosMain并没有AndroidMain，这是因为咱们前面所讲到的针对Android渠道是能够无缝搬迁的。接着咱们再来看shared模块中的通用逻辑。

commonMain通用逻辑

models.kt文件中界说了若干数据结构，部分代码如下所示。

sealed interface ViewModel {
  object Empty : ViewModel
  data class SearchResults(
    val searchTerm: String,
    val repositories: Flow<PagingData<Repository>>,
  ) : ViewModel
}
@Serializable
data class Repositories(
  @SerialName("total_count") val totalCount: Int,
  val items: List<Repository>,
)
@Serializable
data class Repository(
  @SerialName("full_name") val fullName: String,
  @SerialName("stargazers_count") val stargazersCount: Int,
)

RepoSearchPresenter类中主要做了三件事：

界说HttpClient目标
界说Pager与PagerSource
界说查询数据的办法

界说HttpClient目标

这儿的网络请求结构运用的是Ktor，代码如下所示：

private val httpClient = HttpClient {
  install(ContentNegotiation) {
    val json = Json {
      ignoreUnknownKeys = true
    }
    json(json)
  }
}

界说Pager与PagerSource

pager的声明如下所示：

private val pager: Pager<Int, Repository> = run {
  val pagingConfig = PagingConfig(pageSize = 20, initialLoadSize = 20)
  check(pagingConfig.pageSize == pagingConfig.initialLoadSize) {
    "As GitHub uses offset based pagination, an elegant PagingSource implementation requires each page to be of equal size."
  }
  Pager(pagingConfig) {
      RepositoryPagingSource(httpClient, latestSearchTerm)
  }
}

这儿指定了pageSize的大小为20，并调用PagerSource的办法，RepositoryPagingSource声明如下所示：

private class RepositoryPagingSource(
  private val httpClient: HttpClient,
  private val searchTerm: String,
) : PagingSource<Int, Repository>() {
  override suspend fun load(params: PagingSourceLoadParams<Int>): PagingSourceLoadResult<Int, Repository> {
    val page = params.key ?: FIRST_PAGE_INDEX
    println("veyndan___ $page")
    val httpResponse = httpClient.get("https://api.github.com/search/repositories") {
      url {
        parameters.append("page", page.toString())
        parameters.append("per_page", params.loadSize.toString())
        parameters.append("sort", "stars")
        parameters.append("q", searchTerm)
      }
      headers {
        append(HttpHeaders.Accept, "application/vnd.github.v3+json")
      }
    }
    return when {
      httpResponse.status.isSuccess() -> {
        val repositories = httpResponse.body<Repositories>()
        println("veyndan___ ${repositories.items}")
        PagingSourceLoadResultPage(
          data = repositories.items,
          prevKey = (page - 1).takeIf { it >= FIRST_PAGE_INDEX },
          nextKey = if (repositories.items.isNotEmpty()) page + 1 else null,
        ) as PagingSourceLoadResult<Int, Repository>
      }
      httpResponse.status == HttpStatusCode.Forbidden -> {
        PagingSourceLoadResultError<Int, Repository>(
          Exception("Whoops! You just exceeded the GitHub API rate limit."),
        ) as PagingSourceLoadResult<Int, Repository>
      }
      else -> {
        PagingSourceLoadResultError<Int, Repository>(
          Exception("Received a ${httpResponse.status}."),
        ) as PagingSourceLoadResult<Int, Repository>
      }
    }
  }
  override fun getRefreshKey(state: PagingState<Int, Repository>): Int? = null

这部分代码没什么好解说的，和AndroidX的Paging运用是相同的。

界说查询数据的办法

这儿还定一个一个查询数据的办法，运用flow分发分发给UI层，代码如下所示：

suspend fun produceViewModels(
    events: Flow<Event>,
  ): Flow<ViewModel> {
    return coroutineScope {
      channelFlow {
        events
          .collectLatest { event ->
            when (event) {
              is Event.SearchTerm -> {
                latestSearchTerm = event.searchTerm
                if (event.searchTerm.isEmpty()) {
                  send(ViewModel.Empty)
                } else {
                  send(ViewModel.SearchResults(latestSearchTerm, pager.flow))
                }
              }
            }
          }
      }
    }
  }
}

这儿的Event是界说在models.kt中的密封接口。代码如下所示：

sealed interface Event {
  data class SearchTerm(
    val searchTerm: String,
  ) : Event
}

iosMain的逻辑

在iosMain中仅界说了两个未运用的办法，用于将类型导出到Object-C或Swift，代码如下所示。

@Suppress("unused", "UNUSED_PARAMETER") // Used to export types to Objective-C / Swift.
fun exposedTypes(
  pagingCollectionViewController: PagingCollectionViewController<*>,
  mutableSharedFlow: MutableSharedFlow<*>,
) {
  throw AssertionError()
}
@Suppress("unused") // Used to export types to Objective-C / Swift.
fun <T> mutableSharedFlow(extraBufferCapacity: Int) = MutableSharedFlow<T>(extraBufferCapacity = extraBufferCapacity)

Android UI层完成

Android UI层的完成比较简单，界说了一个event用于事件分发

val events = MutableSharedFlow<Event>(extraBufferCapacity = Int.MAX_VALUE)
lifecycleScope.launch {
  viewModels.emitAll(presenter.produceViewModels(events))
}

当输入框中的内容改动时，发送事件，收到成果显现数据即可，代码如下所示：

@Composable
private fun SearchResults(repositories: LazyPagingItems<Repository>) {
  LazyColumn(
    Modifier.fillMaxWidth(),
    contentPadding = PaddingValues(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally,
  ) {
    when (val loadState = repositories.loadState.refresh) {
      LoadState.Loading -> {
        item {
          CircularProgressIndicator()
        }
      }
      is LoadState.NotLoading -> {
        items(repositories) { repository ->
          Row(Modifier.fillMaxWidth()) {
            Text(
              repository!!.fullName,
              Modifier.weight(1f),
            )
            Text(repository.stargazersCount.toString())
          }
        }
      }
      is LoadState.Error -> {
        item {
          Text(loadState.error.message!!)
        }
      }
    }
  }
}

iOS渠道的完成

AppDelegate.swift文件是程序发动进口文件，RepositoryCell类承继自UICollectionViewCell，并补充了API中返回的字段信息，UICollectionViewCell是iOS中的调集视图，代码如下所示：

class RepositoryCell: UICollectionViewCell {
  @IBOutlet weak var fullName: UILabel!
  @IBOutlet weak var stargazersCount: UILabel!
}

iOS触发查询代码如下所示：

extension RepositoriesViewController: UITextFieldDelegate {
  func textFieldShouldReturn(_ textField: UITextField) -> Bool {
    let activityIndicator = UIActivityIndicatorView(style: .gray)
    textField.addSubview(activityIndicator)
    activityIndicator.frame = textField.bounds
    activityIndicator.startAnimating()
    self.collectionView?.reloadData()
    activityIndicator.removeFromSuperview()
    events.emit(value: EventSearchTerm(searchTerm: textField.text!), completionHandler: {error in
      print("error", error ?? "null")
    })
    presenter.produceViewModels(events: events, completionHandler: {viewModels,_ in
      viewModels?.collect(collector: ViewModelCollector(pagingCollectionViewController: self.delegate), completionHandler: {_ in print("completed")})
    })
    textField.resignFirstResponder()
    return true
  }
}

对iOS不太了解，就不详细讲解了。（偷偷学习一波～，让iOS无路可走）

写在最终

KMM的开展出除了靠官方社区的支撑之外，一些有名项目的落地实践也很重要。目前咱们所能做的便是继续关注KMM的动态，探究可测验落地的组件，为己所用。

再探Kotlin 跨平台——迁移Paging分页库至KMM

前语

搬迁过程

初衷

模型

项目分析

项目介绍

项目架构

commonMain通用逻辑

界说HttpClient目标

界说Pager与PagerSource

界说查询数据的办法

iosMain的逻辑

Android UI层完成

iOS渠道的完成

写在最终

作者信息

推广

再探Kotlin 跨平台——迁移Paging分页库至KMM

前语

搬迁过程

初衷

模型

项目分析

项目介绍

项目架构

commonMain通用逻辑

界说HttpClient目标

界说Pager与PagerSource

界说查询数据的办法

iosMain的逻辑

Android UI层完成

iOS渠道的完成

写在最终

相关文章

一文疏通 AQS 到 ReentrantLock

《图解 HTTP 》阅读笔记（三）

(理论部分)省流：吴恩达教授联合OpenAI制作的《面向开发者的ChatGPT提示工程》图文版笔记

Compose Android 日历弹框

作者信息

推广