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

Question

我需要在父容器设置为 boxlayout Y 的每个容器的底部创建阴影效果。我为此尝试了 9 片图像边框，但效果不佳。我这里有一些问题。我在每个容器的末尾添加了空标签，并设置了名为 shadow 的 uiid，其中我使用主题中的 9 块图像边框。但问题是我需要单个阴影或边框。似乎出现了多行 shadow.if 我在阴影标签中设置了首选高度，我无法确定单个边框出现的确切高度。（例如 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);
}

阴影图像

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

9张边框截图

我也尝试将边框类型设为线而不是圆，但结果相同

Answer 1

您的阴影处理方法似乎有缺陷，因为图像在右侧也指示了阴影，因此下面的标签指示阴影可能不是正确的方法。

我也不会接受那个方向，因为它会引起担忧。按钮的设计应该与按钮相匹配，而且它的外观似乎与 9 片式边框结构完美契合。如果添加适量的填充，它应该是完美的。

如果您坚持以这种方式（使用标签）进行操作，则不应使用 9 片边框，因为它对您的情况没有意义。您应该将阴影平铺在标签的顶部。

Answer 2

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

我本质上是将页面中的外阴影CSS复制到CN1设置页面> CSS选项中。加载后，我使用 CssMatic 使 shadow/spread 等恰到好处，然后将 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;

}

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

issue on setting shadow in the container using nine piece border wizard

codenameone