首页 > 解决方案 > 光刻柱边界半径

问题描述

目前正在调查Litho,我试图为Column. 在我将背景添加到Column. Column似乎没有被剪裁到边框

请参阅附图以获得更好的描述

在此处输入图像描述

代码(在 Kotlin 中)

companion object {

        @JvmStatic
        @OnCreateLayout
        fun onCreateLayout(context: ComponentContext): Component = Row.create(context)
            .alignItems(YogaAlign.CENTER)
            .justifyContent(YogaJustify.CENTER)
            .child(
                Column.create(context)
                    .border(
                        Border.create(context)
                            .color(YogaEdge.ALL, Color.RED)
                            .widthDip(YogaEdge.ALL, 2f)
                            .radiusDip(20f)
                            .build()
                    )
                    .shadowElevationDip(10f)
                    .backgroundColor(Color.BLUE)
                    .paddingDip(YogaEdge.ALL, 20f)
                    .child(
                        Text.create(context)
                            .text("Litho for Android")
                            .textSizeSp(20f)
                            .marginDip(YogaEdge.BOTTOM, 4f)
                    )
                    .child(
                        Text.create(context)
                            .text("20 Sections")
                            .textSizeSp(14f)
                    )
            )
            .build()
    }

附加问题:shadowElevation似乎没有工作以及没有阴影显示。

请问如何解决边框(和阴影)问题?

标签: androidlithofacebook-litho

解决方案


背景和边框它们的绘制方式不同,因此如果您想将它们一起使用,您需要创建一个与您设置的边框具有相同半径的背景,以便在此处获得相同的效果。要在此处使用代码创建背景,您可以使用

GradientDrawable background = ComparableGradientDrawable.create();
background.setShape(GradientDrawable.RECTANGLE);
background.setCornerRadius(radius);
background.setColor(color);

并将背景设置为列的背景属性。如果您想做这样的事情,我建议您使用具有所需边框和颜色背景的背景。在此示例中,只需将 setStroke 设置为背景。

关于阴影,当轮廓提供者试图在背景上定义阴影时,似乎存在一个错误,它找不到它。我会说要让它工作直到修复,只需使用以下内容覆盖大纲提供程序:

.outlineProvider(
    new ViewOutlineProvider() {
      @Override
      public void getOutline(View view, Outline outline) {
        outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), radius);
      }
    })

推荐阅读