Litho
  • Introduction
  • 简介
    • Litho 是什么
    • 动机
    • 使用
  • 快速开始
    • 新手入门
    • 教程
    • 编写 Component
    • 使用 Component
  • 参考
    • Layout Specs
    • Mount Specs
    • Props
    • State
    • Layout
    • Error Boundaries
    • Borders
    • RecyclerCollectionComponent
    • 变换动画
    • 术语
  • 事件处理
    • 总览
    • 触摸处理
    • 可见性处理
  • Sections
    • Sections 是什么
    • Sections 教程
    • GroupSection Specs
    • DiffSection Specs
    • Sections Building Blocks
    • 与UI交互
    • Sections 单元测试
    • Sections 与 Views
    • Services
    • Sections 架构
    • Working Ranges
  • 兼容性
    • Styles
    • Accessbility
    • RTL
  • 测试
    • 总览
    • 单元测试基础
    • 子组件测试
    • 匹配 Props
    • 测试 InjectProps
    • 测试事件处理
    • Espresso
    • 在Android Studio上运行测试
  • 高级指南
    • Recycler
    • 自定义布局
    • TreeProps
    • 增量安装
    • 创建 ComponentTree
  • 架构
    • 代码生成
    • 异步布局
    • 增量安装
    • 铺平 View 结构
    • 回收
  • 附加资源
    • 最佳实践
    • FAQ
  • 工具
    • 调试
    • 开发者选项
  • 更多参与
    • 如何参与
    • 社区展示
    • 资源库结构
Powered by GitBook
On this page
  1. 参考

Layout

Litho 使用 Flexbox 实现的 Yoga 对屏幕上的组件进行测量和布局。如果在 Web 上使用过 Flexbox ,应该非常熟悉。如果更熟悉 Android 通常执行 Layout 的方式,那么 Flexbox 会让你想起 LinearLayout。

在 Litho 中,您可以使用 Row 来实现与水平 LinearLayout 类似的布局。

Row.create(c)
    .child(...)
    .child(...)
    .build();

或者 Column 实现类似于 垂直 LinearLayout 的布局。

Column.create(c)
    .child(...)
    .child(...)
    .build();

为了达到类似 LinearLayout 中 weight 的效果,Flexbox 提供了一个名为 flexGrow()的概念。

Row.create(c)
    .child(
        SolidColor.create(c)
            .color(RED)
            .flexGrow(1))
    .child(
        SolidColor.create(c)
            .color(BLUE)
            .flexGrow(1))
    .build();

如果您想将一个视图叠加在另一个视图之上 - 类似于 FrameLayout - Flexbox 可以通过 positionType(ABSOLUTE)来实现。

Column.create(c) .child( Image.create(c) .drawableRes(R.drawable.some_big_image) .widthDip(100) .heightDip(100)) .child( Text.create(c) .text("Overlaid text") .positionType(ABSOLUTE)) .build();

PreviousStateNextError Boundaries

Last updated 7 years ago

有关特定 Flexbox 属性的更多文档,请查阅 或查找有关 Flexbox 如何工作的任何网络资源。

Yoga文档