0

Estoy tratando de obtener el siguiente Layout para mi app:

La zona naranja-marrón es un label y la zona verde es otro label.
La anchura y la altura de los labels asi como la separación entre ellos puede variar, lo que me importa es que más o menos queden uno apilado encima del otro. Con el código .py y .kv que presento debajo obtengo el siguiente mensaje de error:

TypeError: 'NoneType' object is not subscriptable

Tengo 2 preguntas:

  • ¿Qué significa el error que me sale?
  • ¿Cómo puedo obtener una configuración de Layout similar a la que busco?

Código en python:

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

Builder.load_file('design.kv')

class MyWidget(BoxLayout):
    def __init__(self):
        super(MyWidget, self).__init__()



class MyWidgetgrid(GridLayout):
    def __init__(self):
        super(MyWidget, self).__init__()

    def showquestion(self):
        with open("question.txt","r") as f:
            filetext = f.read()
            self.ids['label1'].text = filetext

    def showanswer(self):
        with open("answer.txt","r") as f:
            filetext = f.read()
            self.ids['label2'].text = filetext

class myApp(App):
    def build(self):
        return MyWidget()
    def on_pause(self): 
        return True
    def on_resume(self): 
        pass


if __name__ in ('__main__', '__android__'): 
    myApp().run()

Archivo .kv:

<MyWidget>:
    BoxLayout:
        size: root.size

        Button:
            id: button1
            text: "Mostrar respuesta"
            on_release: root.showanswer()
            size_hint: 1, 0.1

        Button:
            id: button2
            text: "Pregunta Acertada"
            size_hint: 1, 0.1
        Button:
            id: button3
            text: "Pregunta Fallada"
            size_hint: 1, 0.1
        Button:
            id: button4
            text: "mostrar pregunta"
            on_release: root.showquestion()
            size_hint: 1, 0.1

    GridLayout:
        rows: 2
        cols: 2
        padding: 10
        spacing: 0
        #label1 muestra la pregunta
            Label:
                id: label1
                color: 1,0,1,1
                canvas.before:
                    Color:
                        rgba: 191/255.0, 144/255.0, 63/255.0, 1
                    Rectangle:
                        size: self.size
                        pos: self.pos
#label2 muestra la respuesta
            Label:
                id: label2
                color: 1,0,1,1
                canvas.before:
                    Color:
                        rgba:  110/255.0, 191/255.0, 63/255.0, 1
                    Rectangle:
                        pos:self.pos
                        size: self.size
1
  • @FJSevilla: Estoy leyendo la documentación de Kivy pero voy muy poco a poco y cómo me gusta siempre ir avanzando pues trato siempre de formular alguna pregunta de lo que en ese momento tengo entre manos.
    – Mr. Baldan
    Commented el 18 abr. 2017 a las 23:14

1 respuesta 1

1

Un BoxLayout es un un layout que permite añadir widget en una sola fila (orientation: 'horizontal') o en una sola columna (orientation: 'vertical'). Es decir, los widgets se organizan en matrizes de n x 1 o de 1 x m. Un GridLayout hace lo mismo solo que permite usar matrices de n x m. Ambos tipos de layouts comparten la gran mayoría de características y atributos.

Al igual que en el BoxLayout la posición de los widgets la determina el orden en la lista de hijos que suele ser determinada por el orden en el que son insertados, en este caso se rellena la primera fila, luego la segunda, etc. Esto implica que, a diferencia de otros frameworks, no podemos especificar directamente en que elemento de la matriz se posiciona cada widget hijo. Es obligatorio definir el número de columnas y filas que tiene el GridLayout.

Un ejemplo básico de un GridLayout de 2 x 2 conteniendo 4 botones sería:

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

design = '''
<MyWidget>
    rows:2
    cols: 2
    padding: 10
    spacing: 10

    Button:
        text: "Mostrar respuesta"
    Button:
        text: "Mostrar pregunta"
    Button:
        text: "Pregunta Acertada"
    Button:
        text: "Pregunta Fallada"
'''


Builder.load_string(design)

class MyWidget(GridLayout):
    def __init__(self):
        super(MyWidget, self).__init__()


class myApp(App):
    def build(self):
        return MyWidget()
    def on_pause(self): 
        return True
    def on_resume(self): 
        pass


if __name__ in ('__main__', '__android__'): 
    myApp().run() 

introducir la descripción de la imagen aquí

El error que comentas simplemente indica que se está intentando obtener items de un objeto que no es un contenedor (como una lista, diccionario, etc). En realidad se debe simplemente a que tienes mal la identación en tu .kv. Las labels en tu GridLayout tienen un nivel más de identación del que deberían. Esto ocasiona el error en el momento de procesar la información del .kv y construir la interfaz:

GridLayout:
    rows: 2
    cols: 2
    padding: 10
    spacing: 0
    #label1 muestra la pregunta
        Label: <<<<<<<<<Esto tiene un nivel más de identación del que debe

Si no he entendido mal tu idea es colocar los Labels uno encima del otro y los botones debajo de los labels unos al lado de los otros. Para esto se puede usar un GridLayout de 3 filas y una columna,las dos primeras filas se usan para las etiquetas y la última columna sería otro GridLayout de 1 fila y 4 columnas y contendría los botones. No obstante es mucho más simple usar dos BoxLayout, tu widget principal sería un BoxLayout con orientación vertical. En el añades las dos etiquetas y por último otro BoxLayout con orientación horizontal con los cuatro botones:

main.py:

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

Builder.load_file('design.kv')

class MyWidget(BoxLayout):
    def __init__(self):
        super(MyWidget, self).__init__()

    def showquestion(self):
        with open("question.txt","r") as f:
            filetext = f.read()
            self.ids['label1'].text = filetext

    def showanswer(self):
        with open("answer.txt","r") as f:
            filetext = f.read()
            self.ids['label2'].text = filetext

class myApp(App):
    def build(self):
        return MyWidget()
    def on_pause(self): 
        return True
    def on_resume(self): 
        pass


if __name__ in ('__main__', '__android__'): 
    myApp().run()

design.kv:

<MyWidget>:
    size: root.size
    orientation: 'vertical'
    padding: 20
    spacing: 0

    #label1 muestra la pregunta
    Label:
        id: label1
        color: 1,0,1,1
        canvas.before:
            Color:
                rgba: 191/255.0, 144/255.0, 63/255.0, 1
            Rectangle:
                size: self.size
                pos: self.pos

    #label2 muestra la respuesta
    Label:
        id: label2
        color: 1,0,1,1
        canvas.before:
            Color:
                rgba:  110/255.0, 191/255.0, 63/255.0, 1
            Rectangle:
                pos:self.pos
                size: self.size

    BoxLayout:
        padding: 0,10,0,0
        spacing: 10
        size_hint:1, 0.25
        orientation: 'horizontal'
        Button:
            id: button1
            text: "Mostrar respuesta"
            on_release: root.showanswer()
        Button:
            id: button2
            text: "Pregunta Acertada"
        Button:
            id: button3
            text: "Pregunta Fallada"
        Button:
            id: button4
            text: "Mostrar pregunta"
            on_release: root.showquestion()

Resultado:

introducir la descripción de la imagen aquí

En este caso se define que los botones ocupen el 25% de la altura que les correspondería. Es decir, el BoxLayout que contien los botones ocupará siempre una cuarta parte de la altura que tiene uno de los Label. El tamño también podria ser referido al tamaño total de root si quisieramos, por ejemplo que ocuparan el 10% de la altura de la ventana. También se pueden definir tamaños estáticos que no se redimencionan si la pantalla lo hace.

Creo que se acerca a lo que quieres. Repito que puedes usar otras combinaciones GridLayout + BoxLayout, GridLayout + GridLayout, RelativeLayout + BoxLayout, etc. No obstante, para lo que pretendes creo que esta es la opción más simple. Si quisieras los botones también apilados en vertical con un solo BoxLayout vertical tienes.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.