litho对flexShrink的理解和使用

今天遇到一个问题，在使用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

参考文章：

• http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html