Facebook Litho框架入门教程：从Hello World到列表组件开发

Facebook Litho框架入门教程：从Hello World到列表组件开发

litho A declarative framework for building efficient UIs on Android. 项目地址: https://gitcode.com/gh_mirrors/li/litho

前言

Facebook Litho是一个高效的Android UI框架，它采用声明式编程范式，通过Yoga布局引擎实现高性能的UI渲染。本教程将带领初学者从零开始，逐步掌握Litho的核心概念和开发技巧。

环境准备

在开始之前，请确保已完成Litho的基础环境配置。Litho依赖于Yoga布局引擎，因此需要初始化SoLoader来加载相关原生库：

class SampleApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        SoLoader.init(this, false)
    }
}

这一步至关重要，它确保了后续Litho组件能够正确访问Yoga的布局功能。

第一步：Hello World基础组件

让我们从最简单的Text组件开始：

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    
    final ComponentContext c = new ComponentContext(this);
    
    final Component component = Text.create(c)
        .text("Hello World")
        .textSizeDip(50)
        .build();
    
    setContentView(LithoView.create(c, component));
}

这段代码展示了Litho的三个核心概念：

1. ComponentContext：Litho的上下文对象，贯穿整个组件生命周期
2. Text组件：Litho提供的预置文本组件
3. LithoView：连接Android视图系统和Litho组件的桥梁

运行后，你将看到一个简单的"Hello World"文本显示在屏幕上。

第二步：创建自定义组件

实际开发中，我们需要创建自定义组件。Litho采用Spec类声明组件布局，框架会自动生成对应的组件类。

创建一个列表项组件ListItemSpec：

@LayoutSpec
public class ListItemSpec {
    @OnCreateLayout
    static Component onCreateLayout(ComponentContext c) {
        return Column.create(c)
            .paddingDip(ALL, 16)
            .backgroundColor(Color.WHITE)
            .child(
                Text.create(c)
                    .text("Hello world")
                    .textSizeSp(40))
            .child(
                Text.create(c)
                    .text("Litho tutorial")
                    .textSizeSp(20))
            .build();
    }
}

关键点解析：

• @LayoutSpec：标识这是一个布局规格类
• @OnCreateLayout：声明布局创建方法
• Column：垂直布局容器，类似HTML中的div
• 自动生成的ListItem类可直接使用

第三步：构建可滚动列表

Litho通过Sections库简化列表开发，使用RecyclerCollectionComponent替代传统的RecyclerView：

@GroupSectionSpec
public class ListSectionSpec {
    @OnCreateChildren
    static Children onCreateChildren(final SectionContext c) {
        Children.Builder builder = Children.create();
        for (int i = 0; i < 32; i++) {
            builder.child(
                SingleComponentSection.create(c)
                    .component(ListItem.create(c).build()));
        }
        return builder.build();
    }
}

在Activity中使用：

final Component component = 
    RecyclerCollectionComponent.create(c)
        .disablePTR(true)
        .section(ListSection.create(new SectionContext(c)).build())
        .build();

这种声明式的方式比传统Android列表开发更加简洁高效。

第四步：组件属性配置

为了使组件更灵活，我们可以添加属性(Props)：

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @Prop int color,
    @Prop String title,
    @Prop String subtitle) {
    
    return Column.create(c)
        .paddingDip(ALL, 16)
        .backgroundColor(color)
        .child(Text.create(c).text(title).textSizeSp(40))
        .child(Text.create(c).text(subtitle).textSizeSp(20))
        .build();
}

使用时可以这样配置：

ListItem.create(c)
    .color(i % 2 == 0 ? Color.WHITE : Color.LTGRAY)
    .title(i + ". Hello, world!")
    .subtitle("Litho tutorial")
    .build()

Props的强大之处在于：

1. 类型安全
2. 自动生成builder方法
3. 支持多种单位（px/dip/sp等）

高级特性

@Prop注解还支持更多配置：

@Prop(optional = true, resType = ResType.DIMEN_OFFSET) int blurRadius

这将自动生成blurRadiusPx、blurRadiusDip等方法，极大提高了开发效率。

总结

通过本教程，我们学习了：

1. Litho基础组件使用
2. 自定义组件开发
3. 列表构建技巧
4. 组件属性配置

Litho的声明式开发模式配合Yoga布局引擎，能够显著提升复杂界面的开发效率和渲染性能。建议进一步探索Litho的布局优化原理和高级特性，如增量渲染、组件复用等。

对于更复杂的列表需求，Litho的Sections框架提供了强大的数据绑定和更新机制，值得深入学习。

litho A declarative framework for building efficient UIs on Android. 项目地址: https://gitcode.com/gh_mirrors/li/litho