Facebook出品的Android声明式开源新框架Litho文档翻译-Layout

欢迎转载,转载请标明出处.
英文原文文档地址: Litho-doc

参考

Layout(布局)


Litho使用Yoga,一种Flexbox的实现来测量Component和在屏幕上布局.如果你以前已经在web端使用过Flexbox,那么你使用Litho时将会非常熟悉.如果你更加熟悉Android普通的布局的工作方式,那么Flexbox常常会让你想起LinearLayout.

在Litho中你可以使用一个Row(行)来实现一个类似于水平的LinearLayout的布局.

1
2
3
4
Row.create(c)
.child(...)
.child(...)
.build();

或者使用一个Column(列)来实现一个类似于竖直LinearLayout的布局.

1
2
3
4
Column.create(c)
.child(...)
.child(...)
.build();

为了实现类似于LinearLayout中的weight的效果,Flexbox提供了一个叫做flexGrow()的概念.

1
2
3
4
5
6
7
8
9
10
11
12
Row.create(c)
.child(
SolidColor.create(c)
.color(RED)
.withLayout()
.flexGrow(1))
.child(
SolidColor.create(c)
.color(BLUE)
.withLayout()
.flexGrow(1))
.build();

如果你比较喜欢FrameLayout中把一个view放置到其他view的上方的效果,Flexbox中可以使用positionType(ABSOLUTE)来实现.

1
2
3
4
5
6
7
8
9
10
11
12
Row.create(c)
.child(
SolidColor.create(c)
.color(RED)
.withLayout()
.flexGrow(1))
.child(
SolidColor.create(c)
.color(BLUE)
.withLayout()
.flexGrow(1))
.build();

如果需要查看更多关于Flexbox特性的文档,你可以查阅Yoga文档或者其他任何讲述Flexbox如何工作的网络资源.




回到导航页