向容器添加组件时出现奇怪的水平线

Question

在代码中将一系列容器添加到 GUI 构建器中定义的容器时，在屏幕宽度上出现均匀间隔的水平线，与组件的任何边框无关。

这是我的代码：

public Container[] renderArticles(ArrayList<HashMap<String, Object>> articles){
        Container[] artArray = new Container[articles.size()];
        for (int i = 0; i < articles.size(); i++) {
            final HashMap<String, Object> art = articles.get(i);
            Container artCon = mStateMachine.createContainer(mStateMachine.res, "DocArticleItem");
            ActionListener listen = new ActionListener() {

                public void actionPerformed(ActionEvent evt) {
                    mStateMachine.currentArticleId = (String) art.get("id");
                    mStateMachine.showForm("Article", null);
                }
            };
            Button artPic = mStateMachine.findArticlePic(artCon);
            artPic.addActionListener(listen);
            artPic.setIcon(mStateMachine.makeImageFromRaw((String)art.get("picture_data")));
            SpanButton caption = (SpanButton)mStateMachine.findArticleTitle(artCon);
            caption.setText((String) art.get("title"));
            caption.addActionListener(listen);
            artArray[i] = artCon;
        }
        return artArray;
    }

public Container[] renderTips(ArrayList<HashMap<String, Object>> tips){
        Container[] contArray = new Container[tips.size()];
        for (int i = 0; i < tips.size(); i++) {
            HashMap<String, Object> tip = tips.get(i);
            Container tipCont = mStateMachine.createContainer(mStateMachine.res, "DocTipItem");
            SpanLabel tipTitle = mStateMachine.findDocTipTitle(tipCont);
            tipTitle.setText((String)tip.get("title"));
            SpanLabel tipText = mStateMachine.findDocTipText(tipCont);
            tipText.setText((String)tip.get("info"));
            contArray[i] = tipCont;
        }

        // remove divider from last tip
        Container last = contArray[contArray.length - 1];
        Container line = (Container)last.getComponentAt(last.getComponentCount() - 1);
        last.removeComponent(line);

        return contArray;
    }

final HashMap<String, Object> map = mStateMachine.expertCardInfo;

// populate tips
if (map.containsKey("tips")){
    tipContainers = renderTips((ArrayList) map.get("tips"));
}else{
     f.removeComponent(mStateMachine.findExpertTipsHeader(f));
     f.removeComponent(mStateMachine.findExpertTipsContainer(f));
}

// populate articles
if (map.containsKey("articles")) {
    articleContainers = renderArticles((ArrayList)map.get("articles"));
} else {
    f.removeComponent(mStateMachine.findExpertArticlesHeader(f));
    f.removeComponent(mStateMachine.findExpertArticlesContainer(f));
}

在StateMachine中：

@Override
    protected void onDoctorDetails_ExpertTipsHeaderAction(Component c, ActionEvent event) {
        Container cnt = findExpertTipsContainer(c.getComponentForm());
        if(cnt.getComponentCount() > 0){
            cnt.removeAll();
        }else{
            for (int i = 0;i < expRenderer.tipContainers.length;i++){
                cnt.add(expRenderer.tipContainers[i]);
            }
            c.getComponentForm().scrollComponentToVisible(cnt);
        }

    }

tl;dr：这是 Component.setHidden() 的手动实现，由于某种原因，它运行不佳。我根据从服务器获得的数据创建了一堆 Containers，将它们放在一个数组中，当单击按钮显示它们时，我遍历数组并添加 Containers （每个本质上都是一个列表项）给父级 Container.

任何正确方向的推动都将不胜感激。

更新

UI 层次结构如下所示：

Form (BoxLayout Y)
  |
   - Container (FlowLayout)
  |
   - Container (TableLayout)
  |
   - Container (TableLayout)
  |
   - Button
  |
   - Label
  |
   - Button (populates following container)
  |
   - Container (BoxLayout Y - doesn't show lines)
  |
   - Button (populates following container)
  |
   - Container (BoxLayout Y - shows lines)
  |
   - Button (populates following container)
  |
   - Container (BoxLayout Y - shows lines)

最后三个容器都具有相同的 UIID，这些 ID 派生自 Container 并且仅修改边距。区别在于添加到它们的容器。在第一个中，我添加了一系列 SpanButton（并且这些行没有出现）。对于另外两个，我添加了一系列预组装的容器，里面有一些内容（并且出现了线条）。后一种情况下添加的容器具有以下样式属性：

cn1-derive: Container; margin: 0; border-bottom: thin solid gray

解决方案

我在 css 文件中定义的底部边框似乎导致了奇怪的线条。当我评论那条线时，它们就消失了。它不是仅在定义它的容器底部呈现，而是在整个容器中呈现。我认为这是一个错误。

Answer 1

检查 GUI Builder 以查看您的容器 UIID 没有背景图像样式，还有您的表单。

Answer 2

我猜您看到的是上面代码中的 "line" 条目。 setHidden() 仅最小化 space 组件请求，实际上并没有隐藏它。使用setVisible(false)真正隐藏组件。

Answer 3

我在代码中添加的容器上设置了 border-bottom，定义在 css 文件中。这似乎触发了一个错误，导致边框在整个容器中以均匀的间隔呈现，而不仅仅是在它的底部。

向容器添加组件时出现奇怪的水平线

Strange horizontal lines when adding components to container

layout

codenameone

更新

解决方案