Радиус границы колонны Litho

Question

В настоящее время расследуется Litho и я попытался добавить границу к Column. Кажется, все работает нормально, пока я не добавлю фон вColumn. ВColumn не кажется обрезанным по границам

Смотрите прикрепленное изображение для лучшего описания

Код (в Котлине)

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 похоже, не работает, так как нет теней.

Пожалуйста, как я могу исправить проблемы с границами (и тенью)?

Answer 1

Фон и граница рисуются по-разному, поэтому, если вы хотите использовать их вместе, вам нужно будет создать фон с тем же радиусом, что и граница, которую вы устанавливаете, чтобы получить здесь тот же эффект. Чтобы создать фон с кодом здесь, вы можете использовать

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

И установите фон для свойства background для столбца. Если вы хотите сделать что-то подобное, я бы рекомендовал использовать фон с необходимой рамкой и цветным фоном. В этом примере просто установите Stroke на задний план.

Что касается теней, похоже, есть ошибка, когда провайдер схемы пытается определить тени на фоне, но не может ее найти. Я бы сказал, что для того, чтобы это работало до тех пор, пока не будет исправлено, просто переопределите поставщика схемы примерно так:

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