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

穿上鞋子！

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

1 个答案: