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

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

訳

layoutしようとしているwidgetが何処かへ行ってしまってびっくりしたことはありませんか？

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

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

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:

実行すると

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

widgets.kv

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

すると

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

追記

2018/10/22

kivy.modulesに新しくshowborderという物が加えられたのですが、これを使えば上記に書いた作業を行わずとも簡単に境界を可視化できます。詳しくはこの記事を見てください。