Shulou(Shulou.com)06/02 Report--

This article is to share with you about how to use Flex layout. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Basic layout of Flex

For Flex beginners, after Hello World, Flex layout is the next step to learn. If you change from the traditional Html, you always want to find controls like Div/Table/UL, and you also hope that you can drag and drop controls like Dreamweaver in Flex, while if you change from a Windows Application program, you may prefer the Absolute layout, with controls scattered on the page and its coordinates controlled by XCompy. This is funny to Html designers, but I've seen people do it with VS.

Friends who like Div may feel that Box is very friendly; designers who like to use Table, I'm sorry, Flex without Table,Grid is very similar to it, but it's not suitable for layout; Application programmers don't want to do things, use Absolute layout, this kind of layout is not suitable for developing Web applications, and it doesn't matter if you just develop a desktop version.

This section writes three Demo:

◆ Absolute layout

◆ Hbox layout

◆ VBox layout (collectively referred to as Box layout)

If you develop AIR programs or desktop applications, you can choose the Absolute layout, but if you develop Web applications, it is recommended to study and study the Box layout. Right-click to view the source code.

1. Absolute of Flex layout

When you create a new Application with Flex, there is a layout property option at the bottom: Vertical,Horizontal,Absolute. It means like a word. If Absolute is selected, the child controls of Application depend on their {xperience y} coordinates. However, it does not affect the second generation of child controls, that is, if you put a HBox into the Application, the controls in the HBox are arranged horizontally. Horizontal and Vertical are equivalent to treating Application as a horizontal or vertical Box, and the influence on child and grandchild controls is similar to that of Absolute.

Looking at the Absolute, it is not difficult to find that the width of the visual area is certain, no matter what the resolution, what kind of browser width. But in Web applications, we don't want this effect. Instead, we might want the control to automatically reposition as a percentage. Only this one, the development of Web applications, it is not recommended to use Absolute layout. This leads to a convenient, simple, and easy-to-use Box layout.

2. Hbox of Flex layout

HBox automatically arranges child controls horizontally, right, left, or center.

Look at the Hbox, the control and the former do not add or decrease, the same control. But it can adapt to the browser width. The title bar of the article uses a HBox, which contains three child controls: the width of Label,Spacer and LinkButton.Spacer is set to 100%, so that no matter how many characters or how wide the Label is, you can hold the LinkButton to the far right. Similarly, you can use it in VBox and set it to 100% high. Spacer is very useful in Box layouts.

Careful friends are not difficult to find that the layout attribute of this Application is Vertical, and the whole App is equivalent to a VBox. The bottom comment text box and button are also within a HBox.

3. VBox of Flex layout

VBox allows child controls to be arranged vertically. Top,bottom or center .

Look at VBox. The layout of this App is Horiazontal, which is equivalent to a HBox. The first-level control is two VBox, one left and one right. The left side is similar to the corresponding part of the previous HBox. On the right, use Panel and TitleWindow, and Grid,Tile. Both Panel and TitleWindow have the layout property, and you can place any child control inside them in the same way as Application. What is worth mentioning is Tile, which allows child controls to flow and extend, ranking first on the x-axis, and then wrapping lines when full. TileList is similar.

Grid is very similar to Table in html, but it is very different and is not suitable for layout. In practical application, Tile or TileList is often used instead.

Box layout can meet basic project applications, but there are some problems. For example, if the content of the article needs to be scrolled, can the flow layout be implemented like Html? The answer is yes. Box layout is only a basic layout method and does not give full play to the strengths and advantages of Flex. About State and flow layout later.

In commercial project development, Application99% uses absolute layouts, with box,tile or other layouts between the containers used in the middle.

Thank you for reading! This is the end of this article on "how to use Flex layout". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.