如何在流之间放置空间，我正在使用鞋子 gui 工具包

Question

我是一个新程序员，只知道Ruby编程语言。我被要求制作一个交互式界面，但仍然在布局上苦苦挣扎。这是其中的大部分，但出于美学原因，希望在带有蓝色边框的流内的框之间添加空间。

这是我到目前为止的代码

Shoes.app(title: "bullying app", width: 1250, height: 840) do
 #header
    flow width: 1.0, height: 0.3 do
    title 'bullying app'
    background rgb(119,136,153)
    border pink
    end
    #dropdown menu with which child
    stack margin: 20 do
    para 'which child'
    list_box items: ["child 1", "child 2", "child 3"]
    end

    # tabs buttons
    flow margin_left: 800 do
    button 'summary'
    button 'web'
    button 'time'
    button 'social media'
    button 'alerts'
    border red
    end
flow margin: 10
 flow width: 1.0, height: 0.4 do
 border blue
 #first square "most recent sites"
 flow width: 0.2, height: 0.99 do
 flow margin_left: 400   
 background white
 border darkorange,strokewidth:2
 para strong "most recent websites visited" 
 stack margin:10 do
 para "1. facebook.com"
 para "2. google.com"
 para "3. twitter.com"
 para "4. wikepedia.com"
 para "5. mnps.black.board.com"
 para "6. pinterest.com"
 end
 end

 flow width:0.5, height: 0.99 do
 border green
 flow  width: 1.0, height:0.6 do
 border yellow 
 flow width: 0.5, height: 0.99 do
 background white
 border darkorange,strokewidth: 2
 para strong  "time"  
 end
 flow width: 0.5, height: 0.99 do
 background white
 border darkorange, strokewidth:2
 para strong "social media:recent"
 end
 end
 flow width: 1.0, height: 0.4 do
 background white
 para strong 'recent searches'
 border purple
 end
 end
flow width: 0.2, height:0.99 do
 background white
 border darkorange
 para strong 'alerts'
 end
end
end

我知道这有点乱，对不起。感谢任何和所有的帮助，谢谢

Answer 1

不是 100% 确定要放置空间的位置，但总的来说，margin可能是您正在寻找的。 例如，将margin_left: 10或类似的东西添加到您想要进一步间隔的流中。有margin_left、margin_top、margin_right和margin_bottom。

其他

选项包括添加空流/堆栈，为其他流提供一些空间。

我在您的代码中添加了一些margin_lefts并重新格式化了它，在这里你去：

Shoes.app(title: "bullying app", width: 1250, height: 840) do
  #header
  flow width: 1.0, height: 0.3 do
    title 'bullying app'
    background rgb(119,136,153)
    border pink
  end
  #dropdown menu with which child
  stack margin: 20 do
    para 'which child'
    list_box items: ["child 1", "child 2", "child 3"]
  end

  # tabs buttons
  flow margin_left: 800 do
    button 'summary'
    button 'web'
    button 'time'
    button 'social media'
    button 'alerts'
    border red
  end
  flow margin: 10
  flow width: 1.0, height: 0.4 do
    border blue
    #first square "most recent sites"
    flow width: 0.2, height: 0.99 do
      flow margin_left: 400
      background white
      border darkorange,strokewidth:2
      para strong "most recent websites visited"
      stack margin:10 do
        para "1. facebook.com"
        para "2. google.com"
        para "3. twitter.com"
        para "4. wikepedia.com"
        para "5. mnps.black.board.com"
        para "6. pinterest.com"
      end
    end

    flow width:0.5, height: 0.99 do
      border green
      flow  width: 1.0, height:0.6 do
        border yellow
        flow width: 0.5, height: 0.99, margin_left: 10 do
          background white
          border darkorange,strokewidth: 2
          para strong  "time"
        end
        flow width: 0.5, height: 0.99, margin_left: 10 do
          background white
          border darkorange, strokewidth:2
          para strong "social media:recent"
        end
      end
      flow width: 1.0, height: 0.4 do
        background white
        para strong 'recent searches'
        border purple
      end
    end
    flow width: 0.2, height:0.99, margin_left: 10 do
      background white
      border darkorange
      para strong 'alerts'
    end
  end
end

穿鞋！