如何正确利用LayoutGroups？

Question

我正在尝试自定义布局，而不必进行过多的自定义翻译。我宁愿看看是否可以使用“约定优先于配置”。我开始实现大部分（如果不是这样）我的整个屏幕，并将其与LayoutGroups分组，如下所示。所有带有红色粗体边框颜色的框（我对颜色方案表示歉意）都是LayoutGroups。

有问题的行是第一行。它的行是LayoutGroup [Group A]，内部是两个LayoutGroups [Group B] [Group C]。现在，第二个子LayoutGroup（带有标签和图片）[Group C]被堆叠在第一个LayoutGroup（标签标签组）[Group B]的旁边。我只是不确定如何在容器的右侧“浮动”（如果使用CSS术语）LayoutGroup [Group C]。我知道我希望LayoutGroup离右侧边缘多远。但是，由于LayoutGroup [Group A]具有配置的属性，因此它将两个子LayoutGroups [Group B] [Group C]左对齐到屏幕的左侧。

我的问题是，如何配置C组布局组以使其能够堆叠（“浮动”）到父LayoutGroup容器的右侧？

我还注意到LayoutGroups不能正确地“堆叠” /“定位”子组（不是LayoutGroups）。几乎就像LayoutGroups将它们视为不可见的容器一样。

这是我的结构的一个示例，除了MainSceneLayoutGroup之外，我没有其他自定义转换，定位到屏幕的中心。

<?xml version="1.0" encoding="utf-8" ?>
<component name="MainScene" extends="Scene" >
  <script type="text/brightscript" uri="pkg:/components/mainScene.brs" />
  <script type="text/brightscript" uri="pkg:/source/globalScreenInfo.brs" />
  <children>
    <LayoutGroup id="MainSceneLayoutGroup" layoutDirection="vert" vertAlignment="top" horizAlignment="left" itemSpacings="[30]">

      <LayoutGroup id="TopHalf" layoutDirection="horiz" vertAlignment="center"></LayoutGroup>

      <LayoutGroup id="MiddleHalf"></LayoutGroup>

      <LayoutGroup id="BottomHalf"></LayoutGroup>

    </LayoutGroup>
  </children>
</component>

=============================================

<?xml version="1.0" encoding="utf-8" ?>
<component name="ClockView" extends="Group">
  <script type="text/brightscript" uri="pkg:/components/clock/clockView.brs" />
  <children>
    <LayoutGroup id="ClockViewLayoutView" layoutDirection="vert" vertAlignment="bottom">

    </LayoutGroup>
  </children>
</component>

=============================================

<?xml version="1.0" encoding="UTF-8"?>
<component name="DayWeather" extends="Group" >
  <script type="text/brightscript" uri="pkg:/components/weather/dayWeather.brs" />
  <children>
    <LayoutGroup id="topContainer" layoutDirection="horiz" horizAlignment="right" vertAlignment="top" itemSpacings="[20]">

        <label id="temperatureLabel" text="">
          <font role="font" uri = "pkg:/fonts/Lato-Regular.ttf" size = "100"/>
        </label>

        <Poster
            id = "weatherIcon"
            width = "150"
            height = "150"
            uri = "pkg:/images/weather/wi-placeholder.png" />

      </LayoutGroup>
  </children>
</component>

Answer 1

<children>

 <LayoutGroup id="MainSceneLayoutGroup" layoutDirection="vert" vertAlignment="top" horizAlignment="left" itemSpacings="[30]">

  <LayoutGroup id="TopHalf" layoutDirection="horiz" vertAlignment="center" itemSpacings="[30]">

    <LayoutGroup id="GroupB" layoutDirection="vert" vertAlignment="center">
      <!-- label 1  -->
      <!-- label 2  -->
    </LayoutGroup>

    <LayoutGroup id="GroupC" layoutDirection="horiz" vertAlignment="center">
      <!-- label 3  -->
      <!-- picture  -->
    </LayoutGroup>

  </LayoutGroup>

  <LayoutGroup id="MiddleHalf"></LayoutGroup>

  <LayoutGroup id="BottomHalf"></LayoutGroup>

 </LayoutGroup>

</children>

好像您需要在“ TopHalf” itemSpacings上使用LayoutGroup来分隔“ GroupB”和“ GroupC” LayoutGroup。 “ MainSceneLayoutGroup” itemSpacings上的LayoutGroup仅影响“ TopHalf”，“ MiddleHalf”和“ BottomHalf” LayoutGroup之间的间距。