如何正确使用 LayoutGroups？

Question

我正在尝试自定义布局，而无需进行过多的自定义翻译。我宁愿看看我是否可以使用 "convention over configuration"。我开始实施大部分（如果不是）我的整个屏幕使用 LayoutGroups 分组，如下所示。所有带有红色粗体边框颜色的框（对于配色方案我深表歉意）都是 LayoutGroups。

相关行是第一行。它的行是一个 LayoutGroup [Group A]，里面是两个 LayoutGroups [Group B][Group C]。现在，第二个子 LayoutGroup（带有标签和图片）[Group C] 紧挨着第一个 LayoutGroup（Label 标签组）[Group B] 堆叠。我只是不确定如何 "float"（如果我使用 CSS 术语）容器右侧的 LayoutGroup [Group C]。我知道我希望 LayoutGroup 离右侧边缘多远。但是，由于 LayoutGroup [Group A] 已配置其属性，因此它会将两个子 LayoutGroups [Group B][Group C] 左对齐到屏幕的左侧。

我的问题是，如何配置 C 组布局组才能堆叠 ("float") 到父 LayoutGroup 容器的右侧？

我还注意到 LayoutGroups 无法正确 "stack"/"position" 子组（不是 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" LayoutGroup 上的 itemSpacings 来分隔 "GroupB" 和 "GroupC" LayoutGroup。 "MainSceneLayoutGroup" LayoutGroup 上的 itemSpacings 只影响 "TopHalf"、"MiddleHalf" 和 "BottomHalf" LayoutGroup 之间的间距。

如何正确使用 LayoutGroups？

How to utilize LayoutGroups properly?

scenegraph

roku

brightscript