Unity 视觉元素容器不随内容扩展

问题描述

所以我在 unity 的图形视图系统中制作了一些自定义视觉元素，目前我需要在我的一个视觉元素中添加一个部分，您可以在其中添加其他视觉元素，它会将它们显示为堆叠在一起.虽然此堆栈视图正常工作并正确扩展，因为我在其中添加视觉元素时，当我将此堆栈添加到我的自定义视觉元素的父容器之一中时，这些容器始终具有 0 高度，并且它们的高度不会随着堆栈的高度。

<UXML xmlns:ui="UnityEngine.UIElements">
  <AndGroupNodeView class="graphElement node expanded AndGroupNode">
    <ui:VisualElement name="input-container">
      <ui:VisualElement name="executed" class="port-input-element" />
    </ui:VisualElement>
    <ui:VisualElement name="TopPortContainer" />
    <ui:VisualElement name="node-border">
      <ui:VisualElement name="title">
        <ui:Label name="title-label" text="AND Group Step" class="unity-text-element unity-label" />
        <ui:VisualElement name="title-button-container">
          <ui:VisualElement name="collapse-button">
            <ui:VisualElement name="icon" />
          </ui:VisualElement>
        </ui:VisualElement>
        <ui:VisualElement name="RightTitleContainer" />
        <ui:Label class="unity-text-element unity-label" />
      </ui:VisualElement>
      <ui:VisualElement name="contents">
        <ui:VisualElement name="divider" class="horizontal" />
        <ui:VisualElement name="top">
          <ui:VisualElement name="input">
            <PortView class="port input executed Port_ExecutionLink">
              <ui:VisualElement name="connector" class="connectorBox">
                <ui:VisualElement name="cap" class="connectorCap" />
              </ui:VisualElement>
              <ui:Label name="type" text="Execute" class="unity-text-element unity-label connectorText" />
            </PortView>
          </ui:VisualElement>
          <ui:VisualElement name="divider" class="vertical" />
          <ui:VisualElement name="output">
            <PortView class="output port executes Port_ExecutionLink">
              <ui:VisualElement name="connector" class="connectorBox">
                <ui:VisualElement name="cap" class="connectorCap" />
              </ui:VisualElement>
              <ui:Label name="type" text="Complete" class="unity-text-element unity-label connectorText" />
            </PortView>
            <PortView class="output port OnStartActions Port_ActionLink">
              <ui:VisualElement name="connector" class="connectorBox">
                <ui:VisualElement name="cap" class="connectorCap" />
              </ui:VisualElement>
              <ui:Label name="type" text="Start Actions" class="unity-text-element unity-label connectorText" />
            </PortView>
            <PortView class="output port OnFinishActions Port_ActionLink">
              <ui:VisualElement name="connector" class="connectorBox">
                <ui:VisualElement name="cap" class="connectorCap" />
              </ui:VisualElement>
              <ui:Label name="type" text="Complete Actions" class="unity-text-element unity-label connectorText" />
            </PortView>
          </ui:VisualElement>
        </ui:VisualElement>
      </ui:VisualElement>
      <ui:VisualElement name="controls" class="NodeControls">
        <ui:Toggle name="IsSkipPoint" class="unity-base-field unity-toggle unity-toggle--no-text">
          <ui:Label text="Is Skip Point" class="unity-text-element unity-label unity-base-field__label unity-toggle__label" />
          <ui:VisualElement class="unity-base-field__input unity-toggle__input">
            <ui:VisualElement name="unity-checkmark" class="unity-toggle__checkmark" />
          </ui:VisualElement>
        </ui:Toggle>
      </ui:VisualElement>
      <ui:VisualElement name="groupContainer" class="clearfix">
        <CustomStackNodeView class="stack-node">
          <GrabObjectNodeView class="graphElement node expanded stack-child__0 stack-child-element">
            <ui:VisualElement name="input-container">
              <ui:VisualElement name="executed" class="port-input-element empty" />
            </ui:VisualElement>
            <ui:VisualElement name="TopPortContainer" />
            <ui:VisualElement name="node-border">
              <ui:VisualElement name="title">
                <ui:Label name="title-label" text="Grab Object" class="unity-text-element unity-label" />
                <ui:VisualElement name="title-button-container">
                  <ui:VisualElement name="collapse-button">
                    <ui:VisualElement name="icon" />
                  </ui:VisualElement>
                </ui:VisualElement>
                <ui:VisualElement name="RightTitleContainer" />
                <ui:Label class="unity-text-element unity-label" />
              </ui:VisualElement>
              <ui:VisualElement name="contents">
                <ui:VisualElement name="divider" class="horizontal" />
                <ui:VisualElement name="top">
                  <ui:VisualElement name="input">
                    <PortView class="port input executed Port_ExecutionLink">
                      <ui:VisualElement name="connector" class="connectorBox">
                        <ui:VisualElement name="cap" class="connectorCap" />
                      </ui:VisualElement>
                      <ui:Label name="type" text="Execute" class="unity-text-element unity-label connectorText" />
                    </PortView>
                  </ui:VisualElement>
                  <ui:VisualElement name="divider" class="vertical" />
                  <ui:VisualElement name="output">
                    <PortView class="output port executes Port_ExecutionLink">
                      <ui:VisualElement name="connector" class="connectorBox">
                        <ui:VisualElement name="cap" class="connectorCap" />
                      </ui:VisualElement>
                      <ui:Label name="type" text="Complete" class="unity-text-element unity-label connectorText" />
                    </PortView>
                    <PortView class="output port OnStartActions Port_ActionLink">
                      <ui:VisualElement name="connector" class="connectorBox">
                        <ui:VisualElement name="cap" class="connectorCap" />
                      </ui:VisualElement>
                      <ui:Label name="type" text="Start Actions" class="unity-text-element unity-label connectorText" />
                    </PortView>
                    <PortView class="output port OnFinishActions Port_ActionLink">
                      <ui:VisualElement name="connector" class="connectorBox">
                        <ui:VisualElement name="cap" class="connectorCap" />
                      </ui:VisualElement>
                      <ui:Label name="type" text="Complete Actions" class="unity-text-element unity-label connectorText" />
                    </PortView>
                  </ui:VisualElement>
                </ui:VisualElement>
              </ui:VisualElement>
              <ui:VisualElement name="controls" class="NodeControls">
                <ui:Toggle name="IsSkipPoint" class="unity-base-field unity-toggle unity-toggle--no-text">
                  <ui:Label text="Is Skip Point" class="unity-text-element unity-label unity-base-field__label unity-toggle__label" />
                  <ui:VisualElement class="unity-base-field__input unity-toggle__input">
                    <ui:VisualElement name="unity-checkmark" class="unity-toggle__checkmark" />
                  </ui:VisualElement>
                </ui:Toggle>
                <ObjectField class="unity-base-field unity-object-field">
                  <ui:Label text="Object to grab" class="unity-text-element unity-label unity-base-field__label unity-object-field__label" />
                  <ui:VisualElement class="unity-base-field__input unity-object-field__input">
                    <ObjectFielddisplay class="unity-object-field-display unity-object-field__object">
                      <ui:Image class="unity-image unity-object-field-display__icon" />
                      <ui:Label text="GrabCube3 (Grabbable Component)" class="unity-text-element unity-label unity-object-field-display__label" />
                    </ObjectFielddisplay>
                    <ObjectFieldSelector class="unity-object-field__selector" />
                  </ui:VisualElement>
                </ObjectField>
              </ui:VisualElement>
            </ui:VisualElement>
            <ui:VisualElement name="selection-border" />
            <ui:VisualElement name="BottomPortContainer" />
          </GrabObjectNodeView>
        </CustomStackNodeView>
      </ui:VisualElement>
    </ui:VisualElement>
    <ui:VisualElement name="selection-border" />
    <ui:VisualElement name="BottomPortContainer" />
  </AndGroupNodeView>
</UXML>

这是我的自定义视觉元素的整个 UXML 结构。所以我的自定义视觉元素是 AndGroupNode，我将 CustomStackNodeView 添加到 groupContainer 中，当 CustomStackNodeView 在我添加视觉元素时正确扩展时，组容器的高度始终保持为 0。

同时展示我正在使用的 USS 文件：

TextField > TextInput
{
    white-space: normal;    
    max-width: 142px;
}

Label
{
    color : yellow;
}

.Highlight {
    border-width: 0.5px;
    border-color: yellow;
}

.RelayColor #title
{
    background-color: rgba(170,51,106,1);
}


#groupContainer
{    
    min-width: 300px;
    display: flex;
    flex-direction: column;
    height: auto;
    position: relative;
}

.node{
    max-width: 330px;
}

.AndGroupNode CustomStackNodeView
{
    position: absolute;
    right: 0;
    left: 0;
}

#stackNodeContentContainer
{
    justify-content: space-between;
}

.node .stack-child-element
{
    margin-top: 10px;
    margin-bottom: 10px;
}

#node {
    background-color: rgba(0,63,0.8);
}

#controls {
    background-color: rgba(63,0.8);
}

#settings-button {
    border-width: 0px;
    width: 28px;
    height: 28px;
    background-color: rgba(63,0);
    border-radius: 0px;
}

#settings-button > #icon {
    -unity-background-scale-mode: scale-to-fit;
    background-image: resource("Icons/SettingsIcons");
    flex-grow: 1;
}

#settings-button:hover {
    background-color: rgba(127,127,127 0.2);
}

#contents #top .executed #connector,#contents #top .executed #connector #cap,#contents #top .executes #connector,#contents #top .executes #connector #cap,#contents #top .executeAfter #connector,#contents #top .executeAfter #connector #cap,#contents #top .true #connector,#contents #top .true #connector #cap,#contents #top .false #connector,#contents #top .false #connector #cap,#contents #top .loopBody #connector,#contents #top .loopBody #connector #cap,#contents #top .loopCompleted #connector,#contents #top .loopCompleted #connector #cap {
    border-radius: 0px;
}

.Highlight {
    background-color: rgba(0,0.8);
}

ParameterNodeView #title {
    height: 16px;
}

ParameterNodeView #title.input {
    flex-direction: row-reverse;
}

ParameterNodeView #node-border {
    border-radius: 10px;
}

ParameterNodeView #selection-border {
    border-radius: 12px;
}

ParameterNodeView #title > Label {
    margin-left: 2px;
    font-size: 11px;
}

ParameterNodeView #title #top PortView {
    padding-right: 0;
    padding-left: 0;
    margin-top: 2px;
}

ParameterNodeView PortView > Label {
    visibility: hidden;
    width: 0;
}

ParameterNodeView #controls EnumField {
    margin: 0;
}

ParameterNodeView #controls EnumField > VisualElement {
    border-width: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 4px;
    padding-right: 4px;
    height: 14px;
}

ParameterNodeView #controls EnumField > VisualElement > TextElement {
    font-size: 10px;
    margin-top: 0;
}

ParameterNodeView #controls EnumField > VisualElement > VisualElement {
    margin-right: -2px;
}

#RightTitleContainer {
    justify-content: flex-end;
    flex-grow: 1;
    flex-direction: row;
}

#input-container {
    position: absolute;
    right: 100%;
    top: 45px;
    align-items: flex-end;
    --layer: -50;
}

#input-container > .port-input-element > IntegerField,#input-container > .port-input-element > FloatField {
    min-width: 30px;
    max-width: 100px;
}

#input-container > .port-input-element > ColorField,#input-container > .port-input-element > ObjectField,#input-container > .port-input-element > CurveField {
    margin-top: 0;
    margin-bottom: 0;
}

#input-container > .port-input-element > TextField {
    min-width: 50px;
    max-width: 150px;
}

#input-container > .port-input-element > CurveField {
    width: 100px;
}

#input-container > .port-input-element > Vector4Field Label,#input-container > .port-input-element > Vector3Field Label,#input-container > .port-input-element > Vector2Field Label {
    font-size: 8px;
    min-width: 8px;
    flex-basis: 8px;
    padding-top: 2px;
    margin-right: 1px;
}

#input-container > .port-input-element > Vector4Field FloatInput,#input-container > .port-input-element > Vector3Field FloatInput,#input-container > .port-input-element > Vector2Field FloatInput {
    min-width: 28px;
}

#input-container > .port-input-element > Vector2Field .unity-composite-field__field-spacer {
    flex-grow: 0.01;
}

#input-container ObjectFieldSelector {
    width: 17px;
    height: 15px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

#input-container ObjectFielddisplay > Label {
    margin-top: 2px;
}

#input-container ObjectFielddisplay > Image {
    margin: 0;
}

#input-container > .port-input-element > ColorField {
    width: 60px;
}

#input-container > .port-input-element > * {
    margin-left: 2px;
}

#input-container > .port-input-element * {
    font-size: 8px;
}

#input-container > .port-input-element {
    max-width: 180px;
    background-color: rgba(72,72,0.6);
    margin-top: 3px;
    margin-bottom: 2px;
    padding-top: 1px;
    padding-bottom: 1px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    height: 19px;
    overflow: hidden;
    padding-right: 1px;
}

#input-container > .port-input-element.empty {
    width: 0;
    padding: 0;
}

.collapsed #input-container {
    visibility: hidden;
}

#input-container {
    opacity: 0.6;
}

.node:checked > #input-container {
    opacity: 1;
}

#input-container > .port-input-element IntegerInput,#input-container > .port-input-element FloatInput,#input-container > .port-input-element TextInput {
    border-top-left-radius: 1px;
    border-bottom-left-radius: 1px;
    border-top-right-radius: 1px;
    border-bottom-right-radius: 1px;
    padding-bottom: 1px;
    height: 15px;
}

#TopPortContainer,#BottomPortContainer
{
   align-self: center; 
   flex-direction: row;
}

#TopPortContainer
{
    margin-bottom: -1px;
}

#BottomPortContainer
{
    margin-top: -1px;
}

#title-button-container
{
    align-items: center;
    align-content: center;
}

#collapse-button:
{
    width: 16px;
    height: 16px;
    margin: 4px;
}

这会导致组容器被隐藏，因为父视觉元素不会展开（因为组的容器高度始终为 0）。 你对如何解决这个问题有什么想法吗？谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）