litho对flexShrink的理解和使用
2020-09-09 本文已影响0人
ironman_
今天遇到一个问题，在使用litho来构建litho布局的时候，一行有三个元素，中间那个元素通过flex=1来把中间撑开，但是发现两边的元素被挤压了。
就像这样：
image.png
其实前面和后面的两个红色模块都被挤压了。
代码如下：
@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();
}
其实在flex布局中是有属性可以设置不被挤压的，那就是flexShrink
将上面的代码的第一个和最后一个添加上flexShrink=0就可以解决这个问题了
image.png
