6. StackLayout

StackLayout can organize widgets with more complexity than BoxLayout.

---

BoxLayout organizes widgets either horizontally or vertically. With StackLayout, you can combine the orientations. There are 4 row-wise orientations, and there are 4 column-wise orientations. The four row-wise orientations, are shown in the next few examples, along with one example, of a column-wise orientation.

---

This is the main Python file, which will call a particular kv file. As in the BoxLayout examples, we don't have a main kv file.

# mystack.py

from kivy.uix.stacklayout import StackLayout
from kivy.lang import Builder
from kivy.app import App

Builder.load_file('mystack_bt_lr.kv')

class MyStack(StackLayout):
    pass
   
class MyStackApp(App):
    def build(self):
        return MyStack()

if __name__=='__main__':
    MyStackApp().run()

---

All kv files are of this format. There are a total of 9 Buttons, each with the same size_hint so three will fit in a column, and three will fit in a row.

# mystack_lr-tb.kv

<MyStack>:
  orientation: 'lr-tb'
  Button:
    text: 'B1'
    size_hint: [.33,.33]
  Button:
    text: 'B2'
    size_hint: [.33,.33]
  Button:
    text: 'B3'
    size_hint: [.33,.33]
  Button:
    text: 'B4'
    size_hint: [.33, .33]
  Button:
    text: 'B5'
    size_hint: [.33, .33]
  Button:
    text: 'B6'
    size_hint: [.33, .33]
  Button:
    text: 'B7'
    size_hint: [.33,.33]
  Button:
    text: 'B8'
    size_hint: [.33,.33]
  Button:
    text: 'B9'
    size_hint: [.33,.33]

---

This is the result for the orientation 'lr-tb'. The Buttons are added in left-to-right fashion, and secondly from top-to-bottom.

---

This is for the orientation 'lr-bt'. First the widgets are added left-to-right and then bottom-to-top.

---

This is for the orientation 'rl-bt'. First the widgets are added right-to-left and then bottom-to-top.

---

This is for the orientation 'rl-tb'. First the widgets are added right-to-left and then top-to-bottom.

---

So far, the examples were row-wise orientations. Now, there is an example of a column-wise orientation, such that bottom-to-top is first, and left-to-right is next. However instead of Button with text 'B5', we have a Widget. The Widget Class is the class that all widgets, such as Buttons, are based on.

# mystack_bt_lr.kv

<MyStack>:
  orientation: 'bt-lr'
  Button:
    text: 'B1'
    size_hint: [.33,.33]
  Button:
    text: 'B2'
    size_hint: [.33,.33]
  Button:
    text: 'B3'
    size_hint: [.33,.33]
  Button:
    text: 'B4'
    size_hint: [.33, .33]
  Widget:
    size_hint: [.33, .33]
  Button:
    text: 'B6'
    size_hint: [.33, .33]
  Button:
    text: 'B7'
    size_hint: [.33,.33]
  Button:
    text: 'B8'
    size_hint: [.33,.33]
  Button:
    text: 'B9'
    size_hint: [.33,.33]

---

Because of the Widget, B5 is replaced by an empty box.

---