MENU

Android 声明式 UI 框架 Litho 初探 —— Sections API

September 9, 2020 • Read: 92 • Android

在最开始入门介绍中,我们曾经用SingleComponentSection完成了一个简单的列表,当时的做法是使用 for 构造出了多个子Component。其实在 Litho 中提供了一个性能更好的方式,专门处理这种数据(这种数据其实就是类似于Android 中的adapter 与其绑定的数据)。

Litho中专门处理这种模板与列表支持的组件叫做

DataDiffSection的使用

DataDiffSection。下面用DataDiffSection我们重构一下之前写的MainListViewSpec

  • 首先生成我们的数据:
 val data = arrayListOf<Int>()
        for (i in 0 until 32) {
            data.add(i)
        }
  • MainListViewSpec中增加一个创建ListItemView组件的方法:
    @OnEvent(RenderEvent::class)
    fun onRender(c: SectionContext, @FromEvent model: Int): RenderInfo {
        return ComponentRenderInfo.create().component(
            ListItemView.create(c)
                .color(if (model % 2 == 0) Color.WHITE else Color.LTGRAY)
                .title(if (model % 2 == 0) "hello word" else model.toString())
                .build()
        ).build()
    }
  • 接下来改造一下onCreateChildren方法:
    @OnCreateChildren
    fun createChildren(c: SectionContext, @Prop listData: ArrayList<Int>):Children {
        return Children.create()
            .child(
                DataDiffSection.create<Int>(c)
                    .data(listData)
                    .renderEventHandler(MainListView.onRender(c))
            )
            .build()
    }
  • 最后运行一下:
···
 val recycleView = RecyclerCollectionComponent.create(c).disablePTR(false)
            .section(MainListView.create(SectionContext(this)).listData(data)).build()
        setContentView(LithoView.create(c, recycleView))
···

可能大部分到这里都有点蒙,DataDiffSection到底是从哪里来的呢?
DataDiffSection有点类似于Android的DiffUtil 它是一个内置的一个事件:

  1. 每当一个Item被渲染的时候,DataDiffSection会产生一个RenderEvent。
  2. 创建DataDiffSection的时候,我们要传入自己的renderEventHandler,就是上面代码中的MainListView.onRender(c)

可以看到效果跟之前的没有区别:

20200909_111944.gif

嵌套一个横向滚动的列表

在最开始我们是使用 SingleComponentSection构建列表的。这里如果需要嵌套一个横向滚动的列表,同样也可以用 SingleComponentSection 来完成:

val config =  ListRecyclerConfiguration.create()
            .orientation(LinearLayoutManager.HORIZONTAL)
            .reverseLayout(false)
            .snapMode(SnapUtil.SNAP_TO_CENTER)
            .build()

 RecyclerCollectionComponent.create(c)
    .disablePTR(true)
    .recyclerConfiguration(config)
    .section(DataDiffSection.create<Int>(c)
        .data(listData)
        .renderEventHandler(SectionItem.onRender(c)))
    .canMeasureRecycler(true)

Video_20200909_112127_733.gif

Leave a Comment

已有 1 条评论
  1. 路人甲 路人甲

    话说你知道列表怎么实现动态添加子项么