Как правильно использовать LayoutGroups? - PullRequest
Новая
       23

Как правильно использовать LayoutGroups?

0 голосов
/ 26 июня 2018

Я пытаюсь настроить макет, не делая слишком много пользовательских переводов.Я скорее посмотрю, смогу ли я пойти с «соглашением по конфигурации».Я начал реализовывать большинство, если нет, весь мой экран, который будет сгруппирован с LayoutGroups, как показано ниже.Все прямоугольники с полужирным красным цветом (я прошу прощения за цветовую схему) являются LayoutGroups.

Речь идет о верхней строке.Его строка - LayoutGroup [Group A], а внутри находятся две LayoutGroup [Group B] [Group C].Прямо сейчас вторая дочерняя LayoutGroup (с меткой и изображением) [Group C] укладывается прямо рядом с первой LayoutGroup (группа Label Label) [Group B].Я просто не уверен, как "плавать" (если бы я использовал термины CSS) LayoutGroup [Group C] справа от контейнера.Я знаю, как далеко я хочу, чтобы эта LayoutGroup была далеко от правого края.Однако, поскольку LayoutGroup [Group A] настроили свои свойства, он выравнивает по левому краю обе дочерние LayoutGroups [Group B] [Group C] по левой стороне экрана.

Мой вопрос заключается в том, как настроить мойГруппа C Группа макетов, чтобы иметь возможность складывать («плавать») справа от родительского контейнера LayoutGroup?

Я также заметил, что LayoutGroups не в состоянии правильно «сложить» / «позиционировать» дочерние группы (неLayoutGroups).Это почти так, как если бы LayoutGroups рассматривал их как невидимые контейнеры.

enter image description here

Вот пример моей структуры, у меня нет никакого специального перевода, кроме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>

1 Ответ

0 голосов
/ 27 июня 2018 
<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>

Похоже, вам нужно itemSpacings в "TopHalf" LayoutGroup для разделения "GroupB" и "GroupC" LayoutGroup s.itemSpacings в «MainSceneLayoutGroup» LayoutGroup влияет только на интервалы между «TopHalf», «MiddleHalf» и «BottomHalf» LayoutGroup s.

...