代号一：Android 上的 ComponentGroupBool by CSS答案

【问题标题】：Codename One: ComponentGroupBool on Android by CSS代号一：Android 上的 ComponentGroupBool by CSS
【发布时间】：2018-09-05 15:18:33
【问题描述】：

读者注意：这个问题只针对代号一。

以下代码在 iOS 上完美运行：

    ComponentGroup cmpGroup = ComponentGroup.enclose(camera, gallery);
    cmpGroup.getComponentAt(0).getAllStyles().setAlignment(Component.LEFT);
    cmpGroup.getComponentAt(1).getAllStyles().setAlignment(Component.LEFT);

使用这个 CSS：

#Constants {
    ComponentGroupBool: true;
    includeNativeBool: true;
    [...]
}

问题是对Android没有影响。所以，我了解到CompontGroup UIID 是在 iOS 原生主题中实现的，但它们不在 Android 原生主题中。

我的问题是如何使用 CSS 使 CompontGroup 在 iOS 和 Android 上以相同的方式工作。

【问题讨论】：

标签： codenameone

【解决方案1】：

您需要为GroupElementFirst、GroupElementLast、GroupElement、GroupElementOnly、ButtonGroupFirst、ButtonGroupLast、ButtonGroup、ButtonGroupOnly 添加样式。

样式化 ButtonGroup* 可让您避免代码中的左对齐样式。

我们完全为此目的设计了仅顶部/底部的圆形矩形边框模式，但我不确定它们是否在 CSS 中实现。我得检查一下。

【讨论】：

你认为这个CSS代码可以改进吗？ stackoverflow.com/a/52179262/2670744
我认为 CSS 实现可以改进，现在为这种类型的 CSS 生成图像，而不是我们需要修复的 RoundRectBorder。

【解决方案2】：

一种基于Shai's answer 的可能（非像素完美）解决方案，可产生如下可接受的结果：

这不是像素完美的，因为在GroupElementFirst 和GroupElementLast 之间有一个小空间。

/* Start of ComponentGroup CSS */

GroupElementFirst {
    border-width: 0.3mm;
    border-color: gray;
    border-style: solid;
    border-top-right-radius: 3mm;
    border-top-left-radius: 3mm;
    margin: 2mm;
    margin-bottom: 0px;
    padding: 2mm;
}

GroupElementLast{
    border-width: 0.3mm;
    border-color: gray;
    border-style: solid;
    border-bottom-right-radius: 3mm;
    border-bottom-left-radius: 3mm;
    margin: 2mm;
    margin-top: 0px;
    padding: 2mm;
}

GroupElement{
    border-width: 0.3mm;
    border-color: gray;
    border-style: solid;
    margin: 2mm;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 2mm;
}

GroupElementOnly{
    border-width: 0.3mm;
    border-color: gray;
    border-style: solid;
    border-radius: 3mm;
    margin: 2mm;
    padding: 2mm;
}

ButtonGroupFirst{
    cn1-derive: GroupElementFirst;
}

ButtonGroupLast{
    cn1-derive: GroupElementLast;
}

ButtonGroup{
    cn1-derive: GroupElement;
}

ButtonGroupOnly {
    cn1-derive: GroupElementOnly;
}

/* End of ComponentGroup */

【讨论】：