x86-64堆栈结构_什么是堆栈？什么是流量？ -鞋子设计经理

Love The Way You Lie 2022-12-07 12:08 345阅读 0赞

x86-64堆栈结构

## 堆栈 **(** The Stack **)** ##

![Screenshot1-56a811843df78cf7729bd7ec.jpg][]

To effectively use any [GUI][] toolkit, you have to understand its layout manager (or geometry manager). In Qt, you have HBoxes and VBoxes, in Tk you have the Packer and in Shoes you have *stacks and flows*. It sounds cryptic but read on--it's very simple.

为了有效地使用任何[GUI][]工具包，您必须了解其布局管理器(或几何管理器)。 在Qt中，您具有HBoxes和VBoxes，在Tk中，您具有Packer，在Shoes中，您具有*堆栈和流程* 。 听起来很神秘，但请继续阅读-非常简单。

A stack does just as the name implies. They stack things vertically. If you put three buttons in a stack, they'll be stacked vertically, one on top of each other. If you run out of room in the window, a scrollbar will appear on the right side of the window to allow you to view all of the elements in the window.

顾名思义，堆栈就是这样做的。 他们垂直堆放东西。 如果将三个按钮堆叠在一起，它们将垂直堆叠，一个堆叠在一起。 如果窗口空间不足，则滚动条将出现在窗口右侧，以允许您查看窗口中的所有元素。

Note that when it's said that the buttons are "inside" of the stack, it just means they were created inside of the block passed to the stack [method][]. In this case, the three buttons are created while inside of the block passed to the stack method, so they're "inside" of the stack.

请注意，当说按钮在堆栈的“内部”时，这仅意味着它们是在传递给stack [方法][method]的块内部创建的。 在这种情况下，这三个按钮是在将块内部传递到堆栈方法时创建的，因此它们位于堆栈的“内部”。

>   
> stack do  
> 叠做  
> button "Button 1"  
> 按钮“按钮1”  
> button "Button 2"  
> 按钮“按钮2”  
> button "Button 3"  
> 按钮“按钮3”  
> end  
> 结束  
> end  
> 结束

## 流量 **(** Flows **)** ##

![044c9153563f6067a14024e951606dc0.png][]

A flow packs things horizontally. If three buttons are created inside of a flow, they'll appear next to each other.

流程将内容水平包装。 如果在流程内部创建了三个按钮，它们将彼此相邻出现。

>   
> flow do  
> 流做  
> button "Button 1"  
> 按钮“按钮1”  
> button "Button 2"  
> 按钮“按钮2”  
> button "Button 3"  
> 按钮“按钮3”  
> end  
> 结束  
> end  
> 结束

## 主窗口是流程 **(** The Main Window is a Flow **)** ##

The main window is itself a flow. The previous example could have been written without the flow block and the same thing would have happened: the three buttons would have been created side by side.

主窗口本身就是一个流程。 前面的示例可以在没有流程块的情况下编写，并且会发生相同的事情：三个按钮将并排创建。

>   
> button "Button 1"  
> 按钮“按钮1”  
> button "Button 2"  
> 按钮“按钮2”  
> button "Button 3"  
> 按钮“按钮3”  
> end  
> 结束

## 溢出 **(** Overflow **)** ##

![b1d51d6e78d24d1615e2ba91048f99ae.png][]

There's one more important thing to understand about flows. If you run out of space horizontally, Shoes will never create a horizontal scroll bar. Instead, Shoes will create the elements lower down on the "next line" of the application. It's like when you reach the end of a line in a word processor. The word processor doesn't create a scrollbar and let you keep typing off the page, instead it places the words on the next line.

关于流，还有一件重要的事情要理解。 如果水平空间不足，Shoes将永远不会创建水平滚动条。 相反，Shoes将在应用程序的“下一行”的下方创建元素。 就像您到达文字处理器中的行尾时一样。 文字处理程序不会创建滚动条，而是让您继续在页面上键入内容，而是将文字放在下一行。

>   
> button "Button 1"  
> 按钮“按钮1”  
> button "Button 2"  
> 按钮“按钮2”  
> button "Button 3"  
> 按钮“按钮3”  
> button "Button 4"  
> 按钮“按钮4”  
> button "Button 5"  
> 按钮“按钮5”  
> button "Button 6"  
> 按钮“按钮6”  
> end  
> 结束

## 外型尺寸 **(** Dimensions **)** ##

![5ff421aa88adfc165e970dc5673e70c0.png][]

Until now, we haven't given any dimensions when creating stacks and flow; they've simply taken as much space as they needed. However, dimensions can be given in the same way dimensions are given to the **Shoes.app** method call. This example creates a flow that's not as wide as the window and adds buttons to it. A border style is also given to it to visually identify where the flow is.

到现在为止，我们在创建堆栈和流程时还没有给出任何尺寸。 他们只是简单地占用了所需的空间。 但是，可以使用与**Shoes.app**方法调用相同的方式来指定尺寸。 本示例创建一个不如窗口宽的流，并向其添加按钮。 还提供了边框样式，以直观地标识流的位置。

>   
> flow :width => 250 do  
> 流：width => 250做  
> border red  
> 边框红色  
> button "Button 1"  
> 按钮“按钮1”  
> button "Button 2"  
> 按钮“按钮2”  
> button "Button 3"  
> 按钮“按钮3”  
> button "Button 4"  
> 按钮“按钮4”  
> button "Button 5"  
> 按钮“按钮5”  
> button "Button 6"  
> 按钮“按钮6”  
> end  
> 结束  
> end  
> 结束

You can see by the red border that the flow doesn't extend all the way to the edge of the window. When the third button is going to be created, there's not enough room for it so Shoes moves down to the next line.

您可以通过红色边框看到流并没有一直延伸到窗口边缘。 当将要创建第三个按钮时，没有足够的空间来容纳它，因此鞋将移至下一行。

## 栈流，栈流 **(** Flows of Stacks, Stacks of Flows **)** ##

![Screenshot6-56a811853df78cf7729bd7f5.jpg][]

Flows and stacks don't just contain the visual elements of an application, they can also contain other flows and stacks. By combining flows and stacks, you can create complex layouts of visual elements with relative ease.

流和堆栈不仅包含应用程序的可视元素，还可以包含其他流和堆栈。 通过组合流和堆栈，可以相对轻松地创建视觉元素的复杂布局。

If you're a Web developer, you may note this is very similar to the CSS layout engine. This is intentional. Shoes is heavily influenced by the Web. In fact, one of the basic visual elements in Shoes is the "Link" and you can even arrange Shoes applications into "pages."

如果您是Web开发人员，则可能会注意到这与CSS布局引擎非常相似。 这是故意的。 鞋子受网络的影响很大。 实际上，“鞋子”中的基本视觉元素之一是“链接”，您甚至可以将“鞋子”应用程序排列到“页面”中。

In this example, a flow containing 3 stacks is created. This will create a 3 column layout, with the elements in each column being displayed vertically (because each column is a stack). The width of the stacks is not a pixel width as in previous examples, but rather 33%. This means each column will take 33% of the available horizontal space in the application.

在此示例中，将创建一个包含3个堆栈的流。 这将创建3列布局，每列中的元素垂直显示(因为每列都是一个堆栈)。 堆叠的宽度不是象先前示例中那样的像素宽度，而是33％。 这意味着每列将占用应用程序中可用水平空间的33％。

>   
> flow do  
> 流做  
> stack :width => '33%' do  
> stack：width => '33％'做  
> button "Button 1"  
> 按钮“按钮1”  
> button "Button 2"  
> 按钮“按钮2”  
> button "Button 3"  
> 按钮“按钮3”  
> button "Button 4"  
> 按钮“按钮4”  
> end  
> 结束  
> stack :width => '33%' do  
> stack：width => '33％'做  
> para "This is the paragraph " +  
> 段落“这是段落” +  
> "text, it will wrap around " +\[b r\] "and fill the column."  
> “文本，它将围绕“ + \[br\]”并填充列。  
> end  
> 结束  
> stack :width => '33%' do  
> stack：width => '33％'做  
> button "Button 1"  
> 按钮“按钮1”  
> button "Button 2"  
> 按钮“按钮2”  
> button "Button 3"  
> 按钮“按钮3”  
> button "Button 4"  
> 按钮“按钮4”  
> end  
> 结束  
> end  
> 结束  
> end  
> 结束

> 翻译自: [https://www.thoughtco.com/stack-flow-shoes-layout-manager-2908270][https_www.thoughtco.com_stack-flow-shoes-layout-manager-2908270]

x86-64堆栈结构

[Screenshot1-56a811843df78cf7729bd7ec.jpg]: /images/20221123/a3bd917c05a943bfb3c51054b66206ab.png
[GUI]: https://www.thoughtco.com/gui-2034108
[method]: https://www.thoughtco.com/what-is-ruby-2907828
[044c9153563f6067a14024e951606dc0.png]: /images/20221123/e0f24ab6f3114d8b8c395da7c2bbdf24.png
[b1d51d6e78d24d1615e2ba91048f99ae.png]: /images/20221123/82c9f77c6e334c208a6c7fdfc72bcf90.png
[5ff421aa88adfc165e970dc5673e70c0.png]: /images/20221123/d2151636037547158bfe6b1f3b57dcc9.png
[Screenshot6-56a811853df78cf7729bd7f5.jpg]: /images/20221123/fa2cf1a62fd2411b804d9827f13a0b16.png
[https_www.thoughtco.com_stack-flow-shoes-layout-manager-2908270]: https://www.thoughtco.com/stack-flow-shoes-layout-manager-2908270