Search code examples
python-3.xkivykivy-language

Kivy Button changing values unwantedly (size_hint)


So, i've been studying the kivy library for a couple of days and I did a simple app with some screens simulating a SignIn/Register enviroment. What i noticed is, in my .kv file, when I set "global parameters" to my widgets, the Button parameters are simply not changing. Take a look:

#: import FadeTransition kivy.uix.screenmanager.FadeTransition

Gerencia:
    transition: FadeTransition()
    TelaDeLogin:
    TelaDeCadastro:
    TelaEsqueci:
    TelaEmDesenvolvimento:

<Button>:
    size_hint: 1, 0.1
    font_size: 40
    color: 1, 1, 1, 1

<Label>:
    size_hint: 0.5, 0.1
    color: 1, 1, 0, 1
    font_size: 40 

<TextInput>:
    multiline: False
    size_hint: 0.5, 0.1


<TelaDeLogin>:
    name: "Login"
    FloatLayout:
        Button:
            on_release: app.root.current = "Desenvolvimento"
            pos_hint: {'x':0, 'y':0.2}
            text: 'Logar'

        Button:
            on_release: app.root.current = "Esqueci"
            pos_hint: {'x':0, 'y':0.1}
            text: 'Esqueci a senha'

        Button:
            on_release: app.root.current = "Cadastro" 
            pos_hint: {'x':0, 'y':0}
            text: 'Cadastre-se'

        Label:
            text: "Usuário"
            pos_hint: {'x':0.25, 'y':0.8}

        TextInput:
            pos_hint: {'x':0.25, 'y':0.7}

        Label:
            text: "Senha"
            pos_hint: {'x':0.25, 'y':0.6}

        TextInput:
            password: True
            pos_hint: {'x':0.25, 'y':0.5}

I'm ommiting some other screens but they are irrelevant, what happened was, I did some tests and changing the size_hint inside of "<"Button">" doesn't affect the size of my Buttons at all, they are apparently just getting some default size. Another weird thing that happened was, just to test, I did some changes to font_size both inside "<"Button">" and inside "<"Label">", and the value I put into Label also affected my Buttons on the screen, same happened with color. So it seems like my Buttons are getting their values from "<"Label">" and not from "<"Button>". Does anyone have any Idea what's going on?


Solution

  • Explanation

    You have overwritten the base class Label, and Button is a Label as specified in the following Kivy documentation. In your Kivy App, Button has inherited the size_hint, font_size and color from your customized Label.

    Button

    The Button is a Label with associated actions that are triggered when the button is pressed (or released after a click/touch). To configure the button, the same properties (padding, font_size, etc) and sizing system are used as for the Label class

    Solution

    Create dynamic classes for Label and Button.

    1. Create a dynamic class with inheritance from Button. Replace instantied children, Button: with MyButton:
    2. Create a dynamic class with inheritance from Label. Replace instantied children, Label: with MyLabel:

    Snippets

    <MyButton@Button>:
        size_hint: 1, 0.1
        font_size: 40
        color: 1, 1, 1, 1
    
    <MyLabel@Label>:
        size_hint: 0.5, 0.1
        color: 1, 1, 0, 1
        font_size: 40 
    ...
    
    <TelaDeLogin>:
        name: "Login"
        FloatLayout:
            MyButton:
                on_release: app.root.current = "Desenvolvimento"
                pos_hint: {'x':0, 'y':0.2}
                text: 'Logar'
    
            MyButton:
                on_release: app.root.current = "Esqueci"
                pos_hint: {'x':0, 'y':0.1}
                text: 'Esqueci a senha'
    
            MyButton:
                on_release: app.root.current = "Cadastro" 
                pos_hint: {'x':0, 'y':0}
                text: 'Cadastre-se'
    
            MyLabel:
                text: "Usuário"
                pos_hint: {'x':0.25, 'y':0.8}
    
            TextInput:
                pos_hint: {'x':0.25, 'y':0.7}
    
            MyLabel:
                text: "Senha"
                pos_hint: {'x':0.25, 'y':0.6}
    
            TextInput:
                password: True
                pos_hint: {'x':0.25, 'y':0.5}
    

    Output

    Img01 - Using Dynamic Classes for Button and Label