使用九件边框向导在容器中设置阴影的问题

Question

我需要在每个容器的底部创建一个阴影效果，其父容器设置为boxlayout Y.我尝试了9片图像边框，但它不能正常工作。我这里有一些问题。我在每个容器的末尾添加了空标签并设置了uiid命名阴影，其中我使用了来自主题的9件图像边框。但问题是我需要单个阴影或边框。似乎出现了多行阴影。如果我在阴影标签中设置了首选高度，我无法确定单边框出现的确切高度。（例如，shadow.setPreferredH（20）;）。我之前没有在图像中使用过9个边框，也没有在讨论论坛中找到解决我问题的任何内容。 PS我已经看过它的教程。我怎么解决呢？

代码：

Container wrapContainerSingleTable = new Container(new BoxLayout(BoxLayout.Y_AXIS));
for (Map<String, Object> element : connectionGroup.responses) {
    singleRowContainerr = new Container(new BoxLayout(BoxLayout.Y_AXIS));
    Container childContainer = new Container(new BorderLayout());
    singleRowContainerr.add(childContainer);
    _ _ _ _ _ _ _ _ _ 
    _ _ _ _ __ _ _ _
    childContainer.setUIID("ButtonTest");
    childContainer.getAllStyles().setMargin(Component.BOTTOM, 0);
    childContainer.getAllStyles().setBgColor(0xf4f4f4);

    Label shadow = new Label(" ");
    singleRowContainerr.add(shadow);
    shadow.setUIID("shadow");
    shadow.getAllStyles().setPadding(0, 0, 0, 0);
    shadow.getAllStyles().setMargin(0, 0, 0, 0);
    shadow.getAllStyles().setBgTransparency(0);
    //if i set preferred height in the shadow label, i cannot determine the exact height where single border will appear. 
    //shadow.setPreferredH(20);
    wrapContainerSingleTable.add(singleRowContainerr);
}

shadow img

我想要实现的外观（只有每行的底部水平阴影）

9条边框截图

我尝试使用边框类型作为线而不是圆形，但结果相同

Answer 1

你的阴影方法似乎有缺陷，因为图像表示右侧有阴影，所以下面的标签表示阴影可能不是正确的方法。

我也不会采取这个方向，因为它混淆了问题。按钮的设计应与按钮相匹配，它的外观似乎完全适合9件式边框结构。如果添加适量的填充，它应该是完美的。

如果你坚持这样做（带标签）你不应该使用9片边框，因为它对你的情况没有意义。您应该将阴影平铺在标签的顶部。

Answer 2

我已成功使用此方法在容器和按钮上设置阴影。 rounded-corners-shadows-and-gradients-with-css

我基本上将页面中的外部阴影CSS复制到了CN1设置页面> CSS选项中。加载后，我然后使用CssMatic来获得正确的阴影/展开等，然后将CSS文件中的名称作为UIID引用到我的对象中。很高兴您可以调整CSS，并且无需重新加载即可立即更改模拟器。

我最终得到了这个CSS和下面的输出：

BottomShadow {
box-shadow: 2pt 22pt 22pt 0px rgba(61,59,61,0.48);
padding-bottom: 2mm;
padding-top: 1mm;

}

BottomRightShadowForButton {
box-shadow: 20px 20px 35px -5px rgba(204,202,204,1);

border: 1pt solid #ccc;
padding-bottom: 2mm;
padding-left: 1mm;
padding-right: 2mm;
padding-top: 2mm;

}

BottomRightShadow {
box-shadow: 20px 20px 35px -5px rgba(204,202,204,1);

padding-bottom: 1.5mm;
padding-left: 0mm;
padding-right: 1.5mm;
padding-top: 1mm;

}