Environment configuration

Install Virtualenv

Open CMD

Install virtualenv

	pip install virtualenv

Switch directory
Switch to your work location

Create virtual environment

	virtualenv kv-demo-env 

KV demo env is the interpreter

Setting up the virtual environment interpreter for the compiler

Install Kivy

(if version replacement is required, just change the version number of the corresponding dependency to the required version number)
Install dependencies

	python -m pip install docutils pygments pypiwin32 kivy_deps.sdl2==0.1.22 kivy_deps.glew==0.1.12

Install gstreamer

	python -m pip install kivy_deps.gstreamer==0.1.17

Install angle

	python -m pip install kivy_deps.angle==0.1.9

Install Kivy

	python -m pip install kivy==2.0.0

Installation example

	python -m pip install kivy_examples=1.11.1

Size and location

size

size_ The value of hint (0 ~ 1) can set the size of the control to the ratio of the current window

Size is used to fix the size of a control, so the values of width and height are required
(Note: when using, you need to set size_hint to [None,None])

position

pos_hint can set the position with a dictionary ratio (0 ~ 1) (take the lower left corner of the window as the starting point (0,0))
The control has three lines, the left boundary x-ray and the center in the middle_ x-ray, right boundary line,
The y-axis has an upper boundary, a top line, and a center in the middle_ Y-line, lower boundary Y-line,
x. Y lines can be combined at will
For example: pos_hint:{‘center_x’:0.5, ‘y’:0.7}

pos finds the corresponding point in the current window with the corresponding value (x,y)

Eight layout

Layout general properties

attribute	explain	value
padding	Fill values in all directions between layout and child controls	[value, value, value, value]
spacing	Fill values between child controls	Value
boder
col_force_default	Force default column width	Bool
col_default_width	Set default column width	Value
row_force_default	Force default row height	Bool
row_default_width	Set default row height	Value

FloatLayout layout

As a floating layout, it allows subassemblies to be placed in any position of the window with position and size. Its advantage is that it can automatically adjust the size according to the setting resolution, and will not make your layout look messy

Code example:

py file

from kivy.app import App

from kivy.uix.floatlayout import FloatLayout


class FloatLayoutWidget(FloatLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)

class FloatApp(App):
    def build(self):
        return FloatLayoutWidget()


if __name__ == "__main__":
    FloatApp().run()

kv file:

<BoxLayoutWidget>:
    Button:
        text:'bt0'
        background_color:0,1,1,1
        font_size:40
    Button:
        text:'bt1'
        background_color:0,1,0,1
        font_size:35
    Button:
        text:'bt2'
        background_color:0,0,1,1
        font_size:30
    Button:
        text:'bt3'
        background_color:1,0,1,1
        font_size:25
    Button:
        text:'bt4'
        background_color:1,0,0,1
        font_size:20

BoxLayout layout

Box layout: the child controls can be arranged horizontally or vertically (using orientation). If no size is set, the child controls will divide the parent controls equally at a spacing of 10 pixels

padding and spacing apply to all layouts

padding is required for filling between layout and child controls. The default value is [0,0,0,0]
spacing is required for filling between children, which is 0 by default

Code example:

py file:

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout

class BoxLayoutWidget(BoxLayout):
    def __init__(self,**kwargs):
        super().__init__(**kwargs)

class BoxApp(App):
    def build(self):
        return BoxLayoutWidget()


if __name__=="__main__":
    BoxApp().run()

kv file:

<BoxLayoutWidget>:
    orientation:'vertical'
    padding:[10,40,40,30]

    Button:
        text:'bt0'
        background_color:0,1,1,1
        font_size:40
    Button:
        text:'bt1'
        background_color:0,1,0,1
        font_size:35
    Button:
        text:'bt2'
        background_color:0,0,1,1
        font_size:30
        
    BoxLayout:
        orientation:'vertical'
        spacing:20

        Button:
            text:'bt3'
            background_color:1,0,1,1
            font_size:20
        Button:
            text:'bt4'
            background_color:1,0,0,1
            font_size:20

AnchorLayout layout

The anchor point can be set in the layout (x) and the anchor point (x)
Upper left middle upper right
Left middle right
Left lower middle lower right lower
Note: after setting the position, adding two child controls at the same time will make the two child controls overlap

Code example:

py file:

from kivy.app import App
from kivy.uix.anchorlayout import AnchorLayout


class AnchorLayoutWidget(AnchorLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)

class AnchorApp(App):
    def build(self):
        return AnchorLayoutWidget()


if __name__ == "__main__":
    AnchorApp().run()

kv file:

<AnchorLayoutWidget>:

    AnchorLayout:
        anchor_x:'right'
        anchor_y:'top'
        Button:
            text:'right and top'
            size_hint:.2,.2

    AnchorLayout:
        anchor_x:'left'
        anchor_y:'bottom'
        Button:
            text:'left and bottom'
            size_hint:.2,.2

GridLayout layout

Grid layout

, the child controls can be set as a matrix with multiple rows and columns (using columns cols and rows),
Note: if you don't set a single size, they will be neat

Code example:

py file:

from kivy.app import App
from kivy.uix.gridlayout import GridLayout

class GridLayoutWidget(GridLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)


class GridApp(App):
    def build(self):
        return GridLayoutWidget()



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

kv file:

<GridLayout>:
	padding:30
	spacing:30
# You can modify the value of cols or rows to see the effect
	cols:3

	col_force_default:True
	col_default_width:120
	row_force_default:True
	row_default_width:40	
	
	Button:
		text:'1'
		size_hint_x:None
		width:100px
	Button:
		text:'2'
	Button:
		text:'3'		
	Button:
		text:'4'	

PageLayout layout

Paging layout. Each child control of the layout is regarded as a separate interface, so the use of size is not supported_ Hint and pos_hint
Use page to set which page is displayed first by default
swipe_threshold sets the flipping sensitivity
anim_kwargs set page flipping animation and duration

border can specify the boundary size on both sides. The default is 50dp

Code example:

py file:

from kivy.app import App
from kivy.uix.pagelayout import PageLayout

class PageLayoutWidget(PageLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)

class PageApp(App):
    def build(self):
        return PageLayoutWidget()

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

kv file:

<PageLayoutWidget>:
	anim_kwargs:{'d':10,'t':'linear'}
	page:2
	border:'100dp'
	swipe_threshold:.8
	
	BoxLayout:
		Button:
			text:'page 1'
			background_color:(0.3,0.3,0.3,1)
	BoxLayout:
		Button:
			text:'page 2'
			background_color:(.9,.3,.3,1)
	BoxLayout:
		Button:
			text:'page 3'
			background_color:(.3,.9,.3,1)
	BoxLayout:
		Button:
			text:'page 4'
			background_color:(.3,.3,.9,1)

RelativeLayout layout

Relative to the layout, its positioning belongs to (x, y, content_, x.content_, y, right, top), which is relative to the size of the parent control rather than the window size
Note: RelativeLayout cannot be created directly as a window

Code example:
To demonstrate the new technique, use py alone
py file:

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.relativelayout import RelativeLayout
from kivy.uix.boxlayout import BoxLayout
from kivy,graphics import Rectangle,Color

class MyButton(Button):
	def __init__(self,**kwargs)
		super().__init__(**kwargs)
		self.font_size = 20
		self.size_hint = [0.2,.2]
		
class BoxLayoutWidget(BoxLayout):
	def __init__(self,**kwargs)
		super().__init__(**kwargs)
		
		with self.canvas:
			Color(1,1,1,1)
			self.rect = Rectangle(pos=self.pos,size=self.size)
			self.bind(pos=self.update_rect,size=self.update_rect)
		relative = RelativeLayout()
		bt0 = MyButton(text='bt0',pos_hint={'right':1, 'top':1},background_color=(.2,.5,.4,1))
		bt1 = MyButton(text='bt1',pos_hint={'x':0,'top':1},background_color=(.5,.3,.2,1))
		bt2 = MyButton(text='bt2',pos_hint={'center_x':.5,'center_y':.5},background_color=(.4,.2,.2,1))
		bt3 = MyButton(text='bt3',pos_hint={'x':0,'y':0},background_color=(.8,.7,.2,1))
		bt4 = MyButton(text='bt4',pos_hint={'right':1,'y':0},background_color=(.4,.9,.3,1))
		
		for i in [bt0,bt1,bt2,bt3,bt4]:
			relative.add_widget(i)
		self.add_widget(BoxLayout())
		self.add_widget(relative)
	
	def update_rect(self,*args):
		self.rect.pos = self.pos
		self.rect.size = self.size

class RelativeApp(App):
	def build(self):
		return BoxLayoutWidget()

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

ScatterLayout layout

To be continued
go off work