Use of Python Kivy basic tutorials

Kivy is a powerful framework that provides rich component and layout management capabilities for the development of multi-touch applications. This article will introduce the basic components of Kivy and its common properties and methods, and learn how to design the user interface using various layout managers.

1. Kivy components

1.1 Common components and their usage

1.1.1 Label

Labelis a component for displaying text.

from  import App
from  import Label

class MyApp(App):
    def build(self):
        return Label(text='Hello, Kivy!', font_size='20sp')

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

Common properties：

text: The text content displayed.
font_size: Font size.

Common methods：

bind: Bind attributes.

1.1.2 Button

ButtonIt is a clickable button component.

from  import App
from  import Button

class MyApp(App):
    def build(self):
        return Button(text='Click me', on_press=self.on_button_click)

    def on_button_click(self, instance):
        print("The button is clicked!")

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

Common properties：

text: The text content displayed.

Common methods：

bind: The event that binds the button to trigger by clicking.

1.1.3 TextInput

TextInputAllows users to enter text.

from  import App
from  import TextInput

class MyApp(App):
    def build(self):
        return TextInput(hint_text='Please enter content')

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

Common properties：

hint_text: Prompt text in the input box.

1.1.4 Image

ImageUsed to display images.

from  import App
from  import Image

class MyApp(App):
    def build(self):
        return Image(source='path/to/')  # Replace with your image path
if __name__ == '__main__':
    MyApp().run()

Common properties：

source: Image file path.

1.1.5 Spinner

Spinneris a drop-down list component.

from  import App
from  import Spinner

class MyApp(App):
    def build(self):
        spinner = Spinner(text='Select an option', values=('Option 1', 'Option 2', 'Option 3'))
        return spinner

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

Common properties：

text: The displayed text.
values: Options in the drop-down list.

1.1.6 Checkbox

CheckboxComponents are used for selection.

from  import App
from  import BoxLayout
from  import CheckBox
from  import Label

class MyApp(App):
    def build(self):
        layout = BoxLayout()
        checkbox = CheckBox()
        label = Label(text='Agree with the terms')
        layout.add_widget(checkbox)
        layout.add_widget(label)
        return layout

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

Common properties：

active: Indicates the selected status.

1.1.7 ToggleButton

ToggleButtonis a toggleable button.

from  import App
from  import ToggleButton

class MyApp(App):
    def build(self):
        return ToggleButton(text='switch', group='my_buttons')

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

Common properties：

group: Group buttons so that only one of them is selected in the group.

1.2 Common properties and methods of components

property
- size: Sets the size of the component.
- pos: Set the location of the component.
- color: Set text or background color.
method
- bind(callback): Change events of binding components, such ason_press。

2. Layout Management

2.1 Different layouts

Kivy provides a variety of layout managers to facilitate organization of interface elements.

2.1.1 BoxLayout

BoxLayoutis a linear layout that can arrange subcomponents horizontally or vertically.

from  import App
from  import BoxLayout
from  import Button

class MyApp(App):
    def build(self):
        layout = BoxLayout(orientation='vertical')
        layout.add_widget(Button(text='Button 1'))
        layout.add_widget(Button(text='Button 2'))
        return layout

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

2.1.2 GridLayout

GridLayoutPlace the components in the grid.

from  import App
from  import GridLayout
from  import Button

class MyApp(App):
    def build(self):
        layout = GridLayout(cols=2)
        layout.add_widget(Button(text='Button 1'))
        layout.add_widget(Button(text='Button 2'))
        layout.add_widget(Button(text='Button 3'))
        return layout

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

2.1.3 FloatLayout

FloatLayoutRelative positions are allowed.

from  import App
from  import FloatLayout
from  import Button

class MyApp(App):
    def build(self):
        layout = FloatLayout()
        button = Button(text='Click me', size_hint=(0.4, 0.2), pos_hint={'x': 0.3, 'y': 0.4})
        layout.add_widget(button)
        return layout

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

2.1.4 StackLayout

StackLayoutStack components vertically or horizontally.

from  import App
from  import StackLayout
from  import Button

class MyApp(App):
    def build(self):
        layout = StackLayout()
        layout.add_widget(Button(text='Button 1'))
        layout.add_widget(Button(text='Button 2'))
        layout.add_widget(Button(text='Button 3'))
        return layout

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

2.1.5 AnchorLayout

AnchorLayoutPosition subcomponents according to anchor points.

from  import App
from  import AnchorLayout
from  import Button

class MyApp(App):
    def build(self):
        layout = AnchorLayout(anchor_x='center', anchor_y='top')
        layout.add_widget(Button(text='Center button'))
        return layout

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

2.1.6 RelativeLayout

RelativeLayoutLayout subcomponents in relative positions.

from  import App
from  import RelativeLayout
from  import Button

class MyApp(App):
    def build(self):
        layout = RelativeLayout()
        button1 = Button(text='top left', size_hint=(0.5, 0.5), pos_hint={'x': 0, 'y': 0.5})
        button2 = Button(text='Bottom Right', size_hint=(0.5, 0.5), pos_hint={'right': 1, 'top': 1})
        layout.add_widget(button1)
        layout.add_widget(button2)
        return layout

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

2.2 Design a simple interface

The effect of the same interface is achieved through multiple layouts so that the difference in effect is observed.

2.2.1 Using BoxLayout and GridLayout

Two layouts implement the arrangement of the same set of buttons.

BoxLayout implementation：

from  import App
from  import BoxLayout
from  import Button

class MyApp(App):
    def build(self):
        layout = BoxLayout(orientation='vertical')
        for i in range(5):
            layout.add_widget(Button(text=f'Button {i+1}'))
        return layout

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

GridLayout implementation：

from  import App
from  import GridLayout
from  import Button

class MyApp(App):
    def build(self):
        layout = GridLayout(cols=3)
        for i in range(5):
            layout.add_widget(Button(text=f'Button {i+1}'))
        return layout

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

Summarize

This article introduces the basic components and layout manager of Kivy, includingLabel、Button、TextInput、Image、Spinner、CheckboxandToggleButtonUsage of . After understanding the different features of Kivy Layout Manager, you can choose effective layout strategies in development based on different needs. With the power and flexibility provided by Kivy, you can easily build efficient cross-platform applications. Hope these examples help you get familiar with Kivy and inspire you to further develop ideas!

This is the end of this article about the use of the basic Python Kivy tutorial. For more related Python Kivy content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!