江苏省建设考试培训网站,大中小网站的区分,网络服务器和个人计算机的区别,php网站开发环境论文Compose – List / Detail: Basics实现
在androidx中有SlidingPanelLayout可以实现折叠屏的列表详情功能#xff0c;但在Compose 中还没有官方的实现#xff0c;那么下面我们用Compose做一些实现。
List / Detail
我们追求的基本行为是当 UI 具有项列表时。当用户点击列表…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) - UnitComposablefun 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 setComposableoverride 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 selectionnull
这给出了我们所追求的基本行为
为了使代码简单易懂我没有包含任何导航动画。但这肯定是我在真正使用它时希望添加的内容。
导航
不同详细信息项目的选择将由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 和导航状态。
将组件整合在一起
我们现在可以使用三个参数进行调用要显示的字符串列表、实例和范围为 的 lambdaDynamicLayoutConfigurationTwoPaneScope
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
