Kivy

(翻訳,要約) 全てのWidgetの境界を可視化する方法

著者: Roberto Ulloa
著者のBlog: that doesn't make any sense…
原文: Easy way of debugging Kivy interfaces

レイアウトしようとしているWidgetが何処かへ行ってしまってびっくりしたことはありませんか?

 効率の為、Kivyの基本的なWidget達は可能な限りSimpleになっています。境界線や背景色を持たないWidgetがあるのもその為です。ただそのせいで事がうまくいかなかった時の対処を難しくしているのも事実です。

 そういった時にInspectorを使うのはありですが、それではレイアウト全体の把握は簡単ではありません。なので私がいい方法を紹介します。以下のコードを見て下さい。

main.py
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout

class Widgets(FloatLayout):
    pass

class WidgetsApp(App):
    def build(self):
        return Widgets()

WidgetsApp().run()
widgets.kv
<Widgets>:
    AnchorLayout:
        anchor_x: 'right'
        anchor_y: 'bottom'
        GridLayout:
            cols: 3
            size_hint: .6,.6
            Label:
            StackLayout:
                orientation: 'lr-tb'
                Widget:
                    size_hint: .2,.2
                Button:
                    size_hint: .3,.3
                    text: "how?"
            Widget:
            Widget:

実行すると

screenshot

ここで疑問が湧きます。このButtonは一体どのようにしてこの位置に定まったのでしょうか?そんな時はwidgets.kvに以下の行を加えてください。

widgets.kv
<Widget>:
    canvas.after:
        Line:
            rectangle: self.x+1,self.y+1,self.width-1,self.height-1
            dash_offset: 5
            dash_length: 3

すると

screenshot2

なかなかイケてると思いませんか?これは私のアイディア・オブ・ザ・イヤーです。