如何在wNim的VFL中实现嵌套/层级视图布局？

我在wNim中使用VFL进行布局开发，尝试创建包含嵌套面板与按钮的布局结构。发现VFL中的|锚点会将视图绑定到调用autolayout的最外层面板，而非视图的最近父级面板。现有VFL相关文档较少，且似乎更适用于扁平布局。

我的目标布局结构如下：

Frame
  mainPanel
    Button1
    Button2
  blockPanel
    GDI objects

目前我用一个大按钮作为GDI对象的占位符，同时学习VFL的细节。我提供了三个示例：

• 示例1：单面板扁平结构，但我需要双面板布局；
• 示例2：嵌套结构，但大按钮锚定到外层主面板，导致其右侧和底部边缘显示异常；
• 示例3：嵌套结构显示正常，但需要两次VFL autolayout操作。

请问能否通过一次VFL autolayout实现该嵌套层级布局？

附上代码示例：

import wNim/[wApp, wFrame, wPanel, wEvent, wButton]

proc main =
  let app = App(wSystemDpiAware)
  const style = wBorderSimple

  # Single flat panel
  let frame1 = Frame(title="wNim Frame 1", size=(600,400))
  let mainPanel1 = Panel(frame1, style=style)
  let button1 = Button(mainPanel1, label="Butt1")
  let button2 = Button(mainPanel1, label="LongButton2")
  let button3 = Button(mainPanel1, label="Button3")
  proc layout1() = 
    mainpanel1.autolayout  """
      V:|-[col1:[button1]-[button2]~]|
      V:|-[button3]-|
      H:|-[button1]-[button3]-|
    """
  mainPanel1.wEvent_Size do():
    layout1()
  layout1()
  frame1.center()
  frame1.show()

  # Nested panels, big button attaches to outer main panel, not its 
  # immediately-enclosing panel
  let frame2 = Frame(title="wNim Frame 2", size=(600,400))
  let mainPanel2 = Panel(frame2, style=style)
  let blockPanel1 = Panel(mainPanel2, style=style)
  let button4 = Button(mainPanel2, label="Butt4")
  let button5 = Button(mainPanel2, label="LongButton5")
  let button6 = Button(blockPanel1, label="Button6")
  proc layout2() = 
    # Replace button3 with blockPanel1
    mainpanel2.autolayout  """
      V:|-[col1:[button4]-[button5]~]|
      V:|-[blockPanel1]-|
      H:|-[button4]-[blockPanel1]-|
      HV:|[button6]|
    """
  mainPanel2.wEvent_Size do():
    layout2()
  layout2()
  frame2.center()
  frame2.show()

  # Separate layout required for nesting big button in blockPanel2
  let frame3 = Frame(title="wNim Frame 3", size=(600,400))
  let mainPanel3 = Panel(frame3, style=style)
  let blockPanel2 = Panel(mainPanel3, style=style)
  let button7 = Button(mainPanel3, label="Butt7")
  let button8 = Button(mainPanel3, label="LongButton8")
  let button9 = Button(blockPanel2, label="Button9")

  proc layout3() = 
    # Replace button3 with blockPanel`
    mainpanel3.autolayout  """
      V:|-[col1:[button7]-[button8]~]|
      V:|-[blockPanel2]-|
      H:|-[button7]-[blockPanel2]-|
      """
    blockPanel2.autolayout """
      HV:|[button9]|
    """
  mainPanel3.wEvent_Size do():
    layout3()
  layout3()
  frame3.center()
  frame3.show()

  app.mainLoop()

main()

结论：无法通过单次autolayout实现该嵌套布局，必须分两次调用 #

wNim的VFL实现中，|锚点的作用范围是调用autolayout方法的容器视图，而非任意父级视图。当你在mainPanel2上调用autolayout时，所有用|定义的约束都会绑定到mainPanel2的边缘，这就是示例2中button6显示异常的原因——它被错误地绑定到了外层mainPanel2，而非自己的直接父容器blockPanel1。

为什么必须分两次调用？ #

VFL的约束定义是基于当前容器上下文的，跨容器的约束无法在单次autolayout中正确解析。你需要：

1. 第一次调用mainPanel.autolayout：定义mainPanel内部子视图（Button1、Button2、blockPanel）的布局关系；
2. 第二次调用blockPanel.autolayout：在blockPanel的上下文内，定义其内部子视图（GDI对象/占位按钮）的布局，此时|锚点会正确绑定到blockPanel的边缘。

优化你的示例3代码 #

你可以把两次autolayout调用整合到同一个layout proc中，逻辑上依然是两次操作，但代码更简洁：

proc layout3() = 
  mainpanel3.autolayout  """
    V:|-[col1:[button7]-[button8]~]|
    V:|-[blockPanel2]-|
    H:|-[button7]-[blockPanel2]-|
  """
  # 在blockPanel的上下文内定义内部视图的约束
  blockPanel2.autolayout """
    HV:|[button9]|
  """

这种方式是wNim中实现嵌套VFL布局的标准做法，既保证了布局的正确性，也维持了代码的可读性。

内容的提问来源于stack exchange，提问作者Sonicsmooth