Whats a flex grid sizer

A flex grid sizer is a more flexible version of a grid sizer. It is nearly identical to the regular grid sizer, with the following exceptions:

■ It determines a separate size for each row and column.

■ By default, it does not change the size of its cells when resized. You can specify which rows or columns should grow if needed.

■ It can grow flexibly in either direction, meaning that you can specify proportional amounts for individual child elements, and you can specify the behavior in the non-flexible direction.

Figure 11.7 shows a flex grid sizer in action, using the same nine-cell layout as used for the basic grid sizer. In this case, the center cell has been made larger.

Compare this image to figure 11.5, showing the same layout in an ordinary grid sizer. In the ordinary grid sizer, each cell is the same size as the middle object. In the flex grid sizer, cells are sized according to the row and column they are part of. They take the width of the widest item in their column and the height of the tallest item in their row. In this case, the cells for items "four" and "six" are taller, because they are in the same row as item "five," while the cells for "two" and "seven" are wider. The cells for "one," "three," "seven," and "nine" are the normal size, and are unaffected by the larger widget.

Figure 11.8 shows the default behavior of a flex grid sizer when resized, which is that the size of the cells is unchanged.

n FlexGridSizer (ZIO0

n FlexGridSizer (ZIO0

Figure 11.7 A simple flex grid sizer

Figure 11.7 A simple flex grid sizer

Figure 11.8

A flex grid sizer being resized.

Listing 11.6 shows the code for creating the image in figure 11.8.

Listing 11.6 Creating a flex grid sizer import wx from blockwindow import BlockWindow labels = "one two three four five six seven eight nine".split()

class TestFrame(wx.Frame): def _init_(self):

wx.Frame._init_(self, None, -1, "FlexGridSizer")

sizer = wx.FlexGridSizer(rows=3, cols=3, hgap=5, vgap=5) for label in labels:

bw = BlockWindow(self, label=label) sizer.Add(bw, 0, 0) center = self.FindWindowByName("five") center.SetMinSize((150,50)) self.SetSizer(sizer) self.Fit()

app = wx.PySimpleApp()

TestFrame().Show()

app.MainLoop()

A flex grid sizer is an instance of wx.FlexGridSizer. The class wx.FlexGridSizer is a subclass of wx.GridSizer, so the property methods of wx.GridSizer are still available. The constructor for wx.FlexGridSizer is identical to the parent class:

wx.FlexGridSizer(rows, cols, vgap, hgap)

In order to have a row or column grow when the sizer grows, you need to explicitly tell the sizer that the row or column is growable by using the appropriate method:

When the sizer grows horizontally, the default behavior is for the new width to be allocated equally to each growable column. Similarly, a vertical resize is allocated equally to each growable row. To change the default behavior and make rows or columns grow at different rates, you use the proportion argument to the add growable methods. If the proportion element is used, then the new space is allocated to the row or column relative to their proportion arguments. For example, if you have two resizable rows, and their proportions are 2 and 1, then the first row will get 2/3 of the new space, and the second row will get 1/3. Figure 11.9 shows the flex grid sizer with proportional spacing. In this case, the middle row and column have proportion 2, and the end rows and columns have proportion 1. Figure 11.9 shows what that looks like in practice.

As you can see, while all the cells have gotten larger, the middle row and column have gotten larger twice as fast as the ends. The widgets have not resized to fill the cells, although they could if the wx.expand flag had been used when they were added to the sizer. Listing 11.7 shows the code used to create the flex grid sizer—notice the use of the add growable methods.

Figure 11.9 A flex grid sizer with a growable row and column

Listing 11.7 The flex grid sizer with growable elements import wx from blockwindow import BlockWindow labels = "one two three four five six seven eight nine".split()

class TestFrame(wx.Frame):

wx.Frame._init_(self, None, -1, "Resizing Flex Grid Sizer")

sizer = wx.FlexGridSizer(rows=3, cols=3, hgap=5, vgap=5) for label in labels:

app = wx.PySimpleApp()

TestFrame().Show()

app.MainLoop()

Figure 11.9 A flex grid sizer with a growable row and column

If you use proportional sizing on one of your growable rows or columns, you need to specify a proportional amount on all the growables in that direction, otherwise you will get an odd flicker effect on resize as wxPython tries to deal with a proportion of zero.

There is one other mechanism to control widget growth in a flex grid sizer. By default, the proportional sizing applies to both directions of the flex grid; however, you can specify that only one direction should resize proportionally using the method SetFlexibleDirection(direction), where the direction values are wx.HORlZONTAL, wx.VERTlCAL, or wx.BOTH (the default). Then you specify the behavior in the other direction using SetNonFlexibleGrowMode(mode). For example, if you call SetFlexibleDirection(wx.HORlZONTAL), the columns behave as specified using AddGrowableCol(), and the call to SetNonFlexibleGrowMode() defines the behavior of the rows. Table 11.3 shows the available values for the mode parameter.

 Mode Description wx.FLEX_GROWMODE_ALL The flex grid resizes all cells in the non-flexible direction equally. This overrides any behavior set using the add growable methods—all cells are resized regardless of their proportion or even whether or not they were specified as growable. wx.FLEX_GROWMODE_NONE Cells in the non-flexible direction are not resized, regardless of whether they were specified as growable. wx.FLEX_GROWMODE_SPECIFIED The sizer only grows those cells in the non-flexible direction that were specified as growable using the appropriate method. However, the sizer ignores any proportion information and grows all those cells equally. This is the default behavior.

Each of the methods discussed in the previous paragraph has an associated getter, GetFlexibleDirection() and GetNonFlexibleGrowMode(), which returns the integer flags. To emphasize the point made in the table, any setting specified using these methods supersedes the settings created by AddGrowableCol() and AddGrowableRow().

+1 0

Responses

• nerea endrizzi
How update flexgrid sizer?
7 years ago
• granville morris
How to update the grid sizer wxpython?
7 years ago
• Fnan
What is flexible grid?
6 years ago
• zane
How to dynamically add growable row in flexgrid sizer?
6 years ago