首页 文章

为什么图片出现在GUI Builder和设备上，而不是出现在Codename One Simulator中？

提问于
浏览 次
1

我正在使用GUI Builder设计我的应用程序UI . 我创建了一个新表单并定义了如下样式：

FinishFlagIcon {
background-image: url(pics/FinishFlag.png);
cn1-background-type: cn1-image-scaled-fit;
cn1-source-dpi: 320;
font-size: 11.9mm; 
}

我在标签上设置了这种样式，它出现在GUI Builder上 .
Project in the GUI Builder

但是当我在模拟器中启动项目时，它不再出现了 .
Project in the simulator

我还尝试使用Scaled Label并将图标定义为FinishFlag（存在于res文件中），并且它再次出现在GUI Builder中但不出现在模拟器中 . 当然，控制台中没有打印错误，告诉我无法找到该文件 .

请注意：res / myCustomTheme.css文件夹包含与png相关的所有子文件夹（这些子文件夹填充了低到高的pngs），src / theme.res有图片（以下是Shai的建议）：
Project theme.res file with the images

那么我该怎么做才能让图片出现在模拟器中呢？

编辑：我尝试手动编写UI代码，并将一个Label（上面定义的UIID）添加到BorderLayout的中心区域 . 在我向Label添加 3 个空格或更多空格之前，我没有出现 . 我没有再使用GUI Builder重试 . 这对我来说很奇怪，它是故意的吗？

编辑2017年9月13日：如果我构建应用程序并在真实的Android设备上打开它，则会出现标签 .
Project on the device

编辑2017年9月15日：对于没有显示组件问题的人，正如接受的答案中所建议的那样，解决方案在 removing top or bottom constraint of the component not showing and setting it to auto (click on the lock) so that there is enough space for the components 中 . 因此，最终在设置为"auto"后，进度条的底部约束标记了预期结果出现在模拟器上：

Layout with fewer constraints on the bottom components

任何帮助赞赏，

css codenameone

2 回答

  • 2

    你问题中的图片是红鲱鱼 . 看起来问题在于你的布局插图 . 请注意，您的下部组件都没有出现在模拟器中 . “进展”标签，三个零等......

    我看不到您对标志或零标签使用的约束，但我可以看到“progress”标签在顶部和底部都有固定的插图 . 如果没有足够的空间，这可能导致零高度 . 尝试将顶部或底部插入更改为“自动”，以便它们具有灵活性 .

    尝试更改模拟器以使用桌面主题，以便您可以调整窗口大小并查看表单在不同大小的显示方式 .

    您也可以通过覆盖表单的 layoutContainer() 方法轻松验证这一点，并检查您的标记所获得的高度：

    public void layoutContainer() {
   super.layoutContainer();
   System.out.println("finishflag height: "+gui_FinishFlag.getHeight());
}
    回复于
  • 1

    我不确定什么是“正确”的解决方案，所以也许史蒂夫可以插话，但这就是正在发生的事情 .

    您有两个资源文件： theme ＆ theme.css .

    theme.css 中的图像非常适合您的风格 . 但是，由于加载过程加载 theme 而不是 theme.css ，模拟器不知道这些图像，因为 theme res文件不知道它们 .

    GUI构建器可能正在扫描此处的所有res文件，因此它允许您执行可能是错误的操作...您可以使用以下选项来解决此问题：

    • 加载 theme.css 并丢弃 theme - 您需要定义 inheritNativeThemeBool 标志，如果采用该方法，则不应再使用设计器工具

    • 使用设计器工具加载图像而不是CSS

    • 使用 Resources.open 显式加载css res文件并显式将其传递给 Form

    • 使用 Resources.open 显式加载css res文件并将其设置为全局资源文件

    回复于

相关问题