Litho底层使用的是Yoga,Yoga是Facebook的另一个开源项目,它是一个跨iOS、Android、Windows平台在内的布局引擎,兼容Flexbox布局方式。
所以只要熟悉Flexbox布局,那么在使用Litho进行UI布局时基本毫无压力。
如果熟悉Flutter开发,那在使用Litho时,会有一些似曾相识的感觉,Litho中的 Row 与 Column 相关属性与Flutter中的 Row 与 Column 几乎无二。
本来想写一点示例代码,但是感觉没什么可写的。下面这个链接是Yoga 官网的playground。
https://yogalayout.com/playground
你可以通过它可视化的调整UI,构建你需要的layout。同时可以生成相应的Litho代码
在线可视化构建UI:
直接生成的Litho代码:
在 Flexbox 中可以通过 positionType(ABSOLUTE)属性来实现Android 中的 FrameLayout
效果:
@OnCreateLayout
fun createLayout(c: ComponentContext): Component {
return Column.create(c)
.child(
SolidColor.create(c)
.color(Color.MAGENTA)
.widthDip(100f)
.heightDip(100f)
)
.child(
Text.create(c)
.text("FrameLayout")
.marginDip(YogaEdge.TOP, 30f)
.positionType(YogaPositionType.ABSOLUTE)
)
.build();
}
运行效果: