Kivy - Stack Layout

---

---

An object of StackLayout class acts as a widget container, wherein the children widgets are placed one besides other, either horizontally or vertically, depending upon the orientation property. As many widgets are accommodated as the layout dimensions can fit. The dimensions of each widget can be varying.

Let us assume that the StackLayout object is configured to hold the widgets from left to right and from top to bottom. After putting "x" widgets horizontally, if it is not possible to put the widget "x+1" in the same row, it is pushed to the next row, and so on till the height of the layout exhausts.

The StackLayout class is defined in the "kivy.uix.stacklayout" module.

from kivy.uix.stacklayout import StackLayout
stack = StackLayout(**kwargs)

The StackLayout object is customized by defining following properties −

• minimum_width − Automatically computed minimum width needed to contain all children. It is a NumericProperty and defaults to 0. It is read only.

• minimum_height − Automatically computed minimum height needed to contain all children. It is a NumericProperty and defaults to 0. It is read only.

• minimum_height − Automatically computed minimum height needed to contain all children. The minimum_height is a NumericProperty and defaults to 0. It is read only.

• minimum_size − Automatically computed minimum size needed to contain all children.minimum_size is a ReferenceListProperty of (minimum_width, minimum_height) properties. It is read only.

• minimum_width − Automatically computed minimum width needed to contain all children. minimum_width is a NumericProperty and defaults to 0. It is read only.

• orientation − Orientation of the layout. This property determines how the widgets are placed in successive cells in the grid. orientation is an OptionProperty. Its valid values are −

  • 'lr-tb' − cells filled in left to right and top to bottom order.

  • 'tb-lr' − cells filled in top to bottom and left to right order.

  • 'rl-tb' − cells filled in right to left and top to bottom order.

  • 'tb-rl' − cells filled in top to bottom and right to left order.

  • 'lr-bt' − cells filled in left to right and bottom to top order.

  • 'bt-lr' − cells filled in bottom to top and left to right order.

  • 'rl-bt' − cells filled in right to left and bottom to top order.

  • 'bt-rl' − cells filled in bottom to top and right to left order.

Default value of orientation property is 'lr-tb'.

Example

The following program demonstrates the use of StackLayout. As mentioned earlier, the default orientation is 'lr-tb'. Buttons of progressively increasing width but same height are placed from left to right and then top to bottom order.

As and when the next button can not fit in current row, it is pushed down. Each button is captioned with a randomly generated unique number between 1 to 50.

from kivy.app import App
from kivy.uix.button import Button
from kivy.config import Config
from kivy.uix.stacklayout import StackLayout
import random

Config.set('graphics', 'width', '720')
Config.set('graphics', 'height', '400')
Config.set('graphics', 'resizable', '1')

class StackApp(App):
   def build(self):
      stack = StackLayout()
      width=100
      nums=[]
      for i in range(1, 25):
         while True:
            num = random.randint(1,25)
            if num not in nums:
               nums.append(num)
               btn = Button(
                  text = str(num), width=width,
                  size_hint=(None, 0.15)
               )
               width = width+num*2
               stack.add_widget(btn)
               break
      return stack
StackApp().run()

Output

It will produce a stack layout like the one shown below −

If you try to resize the window, the position of the buttons will change accordingly and they are either be accommodated in the row above, or pushed down.

Let us change the orientation of the layout to 'tb-lr'.

stack = StackLayout(orientation='tb-lr')

Run the program again and see the change −

Again, change the orientation property to 'rl-bt' and run the program −

stack = StackLayout(orientation='rl-bt')

The layout starts populating buttons from right to left and bottom to right. As a result, the resulting window appears as below −