Compose – List / Detail: Basics实现

在androidx中有SlidingPanelLayout可以实现折叠屏的列表详情功能，但在Compose 中还没有官方的实现，那么下面我们用Compose做一些实现。

List / Detail

我们追求的基本行为是当 UI 具有项列表时。当用户点击列表中的项目时，我们会在详细信息视图中显示详细信息。在较大的屏幕上，可能有足够的空间并排显示列表和详细信息视图。但是，在较小的设备上，点击项目可能会将列表视图替换为详细信息视图，并且返回返回。

我们可以在较旧的基于视图的 UI 上执行此操作，方法是为不同的屏幕尺寸提供不同的布局。最近，可以处理繁重的工作。SlidingPaneLayout

要使用 Compose 执行此操作，让我们首先看一下列表和详细信息可组合项：

@Composable
fun MyList(list: List, onSelectionChange: (String) -> Unit) {LazyColumn {for (entry in list) {item {Row(Modifier.fillMaxWidth().clickable { onSelectionChange(entry) }.padding(horizontal = 16.dp, vertical = 8.dp)) {Text(text = entry)}}}}
}@Composable
fun Detail(text: String) {Text(text = text)
}

我故意使这些尽可能简单。这是为了使代码易于理解。

MyList()使用 list作为参数提供的项列表，选择操作由选择器接口参数处理。 仅显示一段文本 - 稍后将内联LazyColumnDetail() 。

创建简单的 DSL

为了方便以后的事情，让我们创建一个简单的DSL，它将提供一种流畅的方式来声明列表和详细信息UI：

@Immutable
interface TwoPaneScope {val list: @Composable (List, (T) -> Unit) -> Unitval detail: @Composable (T) -> Unit@Composablefun List(newList: @Composable (List, (T) -> Unit) -> Unit)@Composablefun Detail(newDetail: @Composable (T) -> Unit)
}private class TwoPaneScopeImpl(val items: List
) : TwoPaneScope {override var list: @Composable (List, (T) -> Unit) -> Unit = { _, _ -> }private setoverride var detail: @Composable (T) -> Unit = {}private set@Composableoverride fun List(newList: @Composable (List, (T) -> Unit) -> Unit) {list = newList}@Composableoverride fun Detail(newDetail: @Composable (T) -> Unit) {detail = newDetail}
}

这提供了一个范围，我们可以在其中声明列表和详细 UI。稍后我们将介绍其实现。现在，我们需要知道的是，我们可以像这样声明 UI：

ListDetailLayout((1..10).map { index -> "Item $index" },LocalConfiguration.current
) {List { list, onSelectionChange ->MyList(list, onSelectionChange)}Detail { text ->Text(text = text)}
}

稍后我们将看到如何访问 和 块的 UI 定义ListDetail

拆分布局

拆分布局（即并排布局）相对容易实现：

@Composable
private fun SplitLayout(twoPaneScope: TwoPaneScopeImpl,selected: String?,onSelectionChange: (String) -> Unit
) {Row(Modifier.fillMaxWidth()) {Box(modifier = Modifier.weight(1f)) {twoPaneScope.list(twoPaneScope.items, onSelectionChange)}Box(modifier = Modifier.weight(1f)) {twoPaneScope.detail(selected ?: "Nothing selected")}}
}

在这里，我们将选定的状态作为参数和 lambda 传入，以处理选择更改。保持我们的可组合物无状态是一种很好的做法，因为它可以使它们不那么容易出错，并且更容易测试。

我们从 获取列表和详细 UItwoPaneScope

对于列表 UI，我们将列表指定为第一个参数，将选择更改处理程序指定为第二个参数。

对于详细信息 UI，我们将文本设置为参数的值。selected

我们使用 .我在这里使用了相等的权重将屏幕分成两半。但是，为了满足不同的要求而改变这一点是微不足道的Row

当用户点击列表项时，文本将显示在右侧窗格中：

双页布局

实现两页布局略有不同，因为我们需要显示列表 UI 或详细信息 UI，具体取决于我们是否有选定的项目

@Composable
private fun TwoPageLayout(twoPaneScope: TwoPaneScopeImpl,selected: String?,onSelectionChange: (String) -> Unit
) {Box(modifier = Modifier.fillMaxWidth()) {if (selected == null) {twoPaneScope.list(twoPaneScope.items, onSelectionChange)} else {twoPaneScope.detail(selected)}}
}

我们再次从 UI 细节中获取并将它们连接到和以前。这里真正的区别在于，我们显示列表 UI 或详细信息 UI 取决于是否为twoPaneScope selection onSelectionChange selection=null

这给出了我们所追求的基本行为：

为了使代码简单易懂，我没有包含任何导航动画。但这肯定是我在真正使用它时希望添加的内容。

导航

不同详细信息项目的选择将由Navigation库处理。在这个简单的示例中，将有一个路由：NavGraph
https://developer.android.com/jetpack/compose/navigation

private object NavGraph {sealed class Route(val route: String) {object Detail : Route("detail/{selected}") {fun navigateRoute(selected: String?) = "detail/$selected"}}
}

此路由采用将在详细信息 UI 中显示的字符串的参数。导航到此将提供适当的参数。

到目前为止，我们所看到的组件与NavGraph的使用完全无关。这是非常刻意的。这意味着和/或仅关注不同的布局类型。在处理配置更改时，让它们无状态也将有助于将导航逻辑提升到更高的水平将有助于实现这一目标SplitLayoutTwoPageLayout。

列表详细布局

现在我们已经实现了基本的行为模式，我们需要添加何时使用每种模式的逻辑。这在Compose中实际上非常简单：

@Composable
@Suppress("MagicNumber")
fun ListDetailLayout(list: List,configuration: Configuration,scope: @Composable TwoPaneScope.() -> Unit
) {val isSmallScreen = configuration.smallestScreenWidthDp < 580val navController = rememberNavController()val twoPaneScope = TwoPaneScopeImpl(list).apply { scope() }NavHost(navController = navController, startDestination = NavGraph.Route.Detail.route) {composable(NavGraph.Route.Detail.route) { navBackStackEntry ->val selected = navBackStackEntry.arguments?.getString("selected")if (isSmallScreen) {TwoPageLayout(twoPaneScope, selected) { selection ->navController.navigate(route = NavGraph.Route.Detail.navigateRoute(selection)) {popUpTo(NavGraph.Route.Detail.navigateRoute(null)) {inclusive = true}}}BackHandler(true) {navController.popBackStack()}} else {SplitLayout(twoPaneScope, selected) { selection ->navController.navigate(route = NavGraph.Route.Detail.navigateRoute(selection)) {popUpTo(NavGraph.Route.Detail.route) {inclusive = true}}}}}}
}

一个实例作为参数传入，我们应用一些简单的逻辑来确定我们是否在小屏幕上运行。Configuration

该对象不是特定于 Compose 的对象，而是资源管理框架用来提供备用资源的对象。因此，我们可以像我们一样利用它。在本例中，我们应用的逻辑与放入布局时的逻辑相同。我们稍后会看看这是从哪里来的Configurationres/layout/sw580

我们在具体实现中调用 lambda，它为我们提供了一个 该 该 是使用在范围内声明的 UI 初始化的。此实例将向下传递到 和 。然后，我们获取一个实例来处理导航。scope TwoPaneScope TwoPaneScopeImpl TwoPageLayout SplitLayout NavController

接下来，我们构造一个包含整个列表详细信息 UI 的内容，无论它是两页布局还是拆分布局。它有一个单一的目的地 - 一个采用当前选择文本的可为空参数的路由NavHostDetail

在可组合目标中，如果我们在小屏幕上运行，我们会发出，否则我们会发出.两个 UI 的导航逻辑略有不同，因为它们使用后退堆栈的方式略有不同TwoPageLayout SplitLayout

每当我们导航到新目的地或进行配置更改时，都会对其进行重构。让导航以这种方式包装整个 UI 将在配置更改后保持 UI 和导航状态。

将组件整合在一起

我们现在可以使用三个参数进行调用：要显示的字符串列表、实例和范围为 的 lambda：DynamicLayoutConfigurationTwoPaneScope

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {ComposeListDetailTheme {Surface(color = MaterialTheme.colors.background) {@Suppress("MagicNumber")ListDetailLayout((1..10).map { index -> "Item $index" },LocalConfiguration.current) {List { list, onSelectionChange ->MyList(list, onSelectionChange)}Detail { text ->Text(text = text)}}}}}}
}

我们通过调用Configuration#LocalConfiguration.current

用户现在将看到不同的 UI，具体取决于窗口大小。这也适用于多窗口 - 当窗口大小越过宽度边界时，UI 会自动切换到580dp

结论

这里没有一个单独的可组合物是特别复杂的。这在很大程度上是设计使然。保持可组合项的小型和集中性使它们更容易组合以创建所需的 UI。例如，仅与要发出的 UI 的逻辑有关。 并对自己的特定行为负全部责任DyanmicLayout TwoPageLayout SplitLayout

虽然这看起来像我们现在想要的行为，但这与 的功能并不完全匹配。在下一篇文章中，我们将看看如何让可折叠设备玩得更好SlidingPaneLayout

文中涉及的源码地址
https://github.com/StylingAndroid/ComposeListDetail/tree/basics