Python | StackLayout in Kivy using .kv file



Kivy — it is a platform independent GUI tool in Python. Since it can run on Android, IOS, Linux, Windows, etc. It is mainly used to develop Android application, but that does not mean that it cannot be used in desktop applications.

StackLayout:

To use StackLayout, first import the StackLayout with the following command:

 from kivy.uix.stacklayout import StackLayout 

StackLayout vertically or horizontally as the layout can fit. Individual child widgets do not have to be the same size. There are 4 rows and 4 columns.

  StackLayout Orientation (2D):  - right to left or left to right - top to bottom or bottom to top - `rl-bt`, `rl-tb`, lr-bt`,` lr-tb` (Row wise) - `bt-rl`,` bt-lr`, `tb-rl`,` tb-lr` (Column wise)  
  Basic Approach to create Stack layout:  1) import kivy 2) import kivyApp 3) import Button 4) import Stacklayout 5) Set minimum version (optional) 6) Create the StackLayout class 7 ) Create the App class 8) Set up .kv file (name same as App class) 9) return StackLayout Class 10) Run an instance of the class 

Below is the implementation of row orientation and column orientation :

main.py file —

# code to show how to use StackLayout using a .kv file

 
# Your application base class inherits from the application class.
# app: always refers to your application instance

from kivy.app import App 

 
# creates a button in kiw
# if not imported shows an error

from kivy.uix .button import Button

 
# StackLayout arranges children vertically
# or horizontally as much as the layout can fit.

from kivy.uix.stacklayout im port StackLayout

 
# create the root widget used in the .kv file

class StackLayout (StackLayout):

pass

 
# class where the name of the .kv file should be named Slider.kv.
# or create application class

class StackApp (App):

def build ( self ):

# return an instance of the StackLayout class

return StackLayout ()

 
# launch application

if __ name__ = = `__main__` :

StackApp (). run ()

File name

& lt ; StackLayout & gt ;:

 

# Different orientation

# [& # 39; lr-tb & # 39 ;, & # 39; tb-lr & # 39 ;, & # 39; rl-tb & # 39 ;, & # 39; tb-rl & # 39 ;, & # 39; lr-bt & # 39;, & # 39; bt-lr & # 39 ;, & # 39; rl-bt & # 39 ;, & # 39; bt-rl & # 39;]

  orientation: `lr-tb`

  

  # Create multiple buttons

Button:

text: < / code> `B1`

  size_hint: [. 2 ,. 1 ]

  

  Button:

text: ` B2`

size_hint: [. 2 ,. 1 ]

 

Button:

text: `B3`

size_hint: [. 2 ,. 1 ]

 

Button:

  text: `B4`

  size_hint: [. 2 ,. 1 ]

 

Button:

text: `B5`

size_hint: [. 2 ,. 1 ] < / p>

 

Button:

text: `B6`

size_hint: [. 2 ,. 1 ]

 

Button:

text: `B7`

size_hint: [. 2 ,. 1 ]

 

Button: 

text: `B8`

size_hint: [. 2 ,. 1 ]

 

Button:

text: `B9`

size_hint: [. 2 ,. 1 ]

  

Button:

  text: ` B10` < / p>

size_hint: [. 2 ,. 1 ]

Output:

This is for the" lr-tb "orientation. First, widgets are added from left to right and then from top to bottom.

Note. If you want to change the orientation, just change the orientation on line # 04 .kv file with any of the following orientations —

 For row wise orientation use: -`lr-tb` -`lr-bt` -`rl-tb` -`rl-bt` For column wise orientation use: -`tb-lr` -`tb-rl` -`bt-lr` -`bt-rl` 

Images of all directions from above are displayed at the bottom —

For line orientation use:

 `lr-tb` 

Output:

 `lr-bt` 

Output:

 `rl-tb` 

Output:

 `rl-bt`  

Output:

For column orientation use:

` tb-lr` 

Output:

 `tb-rl` 

Output:

 `bt-lr`  

Output:

 `bt- rl` 

Output: