今天遇到一個(gè)問題酵镜，在使用litho來構(gòu)建litho布局的時(shí)候，一行有三個(gè)元素，中間那個(gè)元素通過flex=1來把中間撐開，但是發(fā)現(xiàn)兩邊的元素被擠壓了座享。
就像這樣：
image.png
其實(shí)前面和后面的兩個(gè)紅色模塊都被擠壓了。
代碼如下：
@OnCreateLayout
static Component onCreateLayout(ComponentContext c) {
return Row.create(c)
.backgroundColor(Color.LTGRAY)
.heightDip(120)
.justifyContent(YogaJustify.FLEX_START)
.alignItems(YogaAlign.CENTER)
.child(
FrescoImage.create(c)
// .flexShrink(0)
.controller(Fresco.newDraweeControllerBuilder().setUri("http://s3.forcloudcdn.com/merchant/card/20190818/a4aa47ec17366593a192e908d050f856.jpg").build())
.widthDip(30)
.backgroundColor(Color.RED)
.heightDip(30)
).child(
Column.create(c)
.flex(1)
.marginDip(YogaEdge.START, 10)
.child(
Row.create(c)
.child(
Text.create(c)
.text("bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb")
// .text("bbbbbbbbb")
.maxLines(1)
.ellipsize(TextUtils.TruncateAt.END))
)
.child(
Text.create(c).text("202 followers")
)
).child(
Text.create(c).text("Premium Shop")
// .flexShrink(0)
.paddingDip(YogaEdge.HORIZONTAL, 16)
.paddingDip(YogaEdge.VERTICAL, 8)
.maxLines(1)
.backgroundColor(Color.RED)
.isSingleLine(true)
)
.build();
}
其實(shí)在flex布局中是有屬性可以設(shè)置不被擠壓的似忧，那就是flexShrink
將上面的代碼的第一個(gè)和最后一個(gè)添加上flexShrink=0就可以解決這個(gè)問題了
image.png
