プログラミング

kivy戦記(7-2) Widghtのrootとselfの解釈

この記事は約15分で読めます。
(2018/4/19現在) 「kivy戦記(9-5) サイズ問題解決」(https://koh-sen.jp/blog/archives/7162)の結果により、もっと良い方法が発見されました。
ここの結果は、参考までにしてください)

もういちど、先ほどのfilelist.kvを再掲する。


<AllSCN>:
    BoxLayout:
        size: root.size
        canvas.before:
            Color:
                rgba: 0,0,.5,1 # 青色
            Rectangle:
                pos: self.pos
                size: self.size
        OpeSCN:
        ResultSCN:
<OpeSCN>:
    BoxLayout:
        size: root.size
        BoxLayout:
            orientation: 'vertical'
            size_hint_y: 0.1
            Label:
                text: 'aaaa'
                canvas.before:
                    Color:
                        rgba: 0,.5,0,1 # 緑色
                    Rectangle:
                        pos: self.pos
                        size: self.size
<ResultSCN>:
    BoxLayout:
        size: root.size
        BoxLayout:
            orientation: 'vertical'
            size_hint_y: 0.9
            Label:
                text: 'bbbb'
                canvas.before:
                    Color:
                        rgba: .5,0,0,1 # 赤色
                    Rectangle:
                        pos: self.pos
                        size: self.size
AllSCN:

OpeSCNに注目してみると、よくよく見たらその下のLabelに対する領域設定と言うことがわかる。
そこで、OpeSCN直下に色情報(黄色)を追加しよう。
(参考:(翻訳,要約) Kivyのcanvasに関して知っておくべき10の事 https://qiita.com/gotta_dive_into_python/items/edf5574f83f422de657c)(2020-03-12現在リンク切れ)


<AllSCN>:
    BoxLayout:
        size: root.size
        canvas.before:
            Color:
                rgba: 0,0,.5,1 # 青色
            Rectangle:
                pos: self.pos
                size: self.size
        OpeSCN:
        ResultSCN:
<OpeSCN>:
    BoxLayout:
        size: root.size
        canvas:
            Color:
                rgba: 1,1,0,1 # 黄色
            Rectangle:
                pos: self.pos
                size: self.size

        BoxLayout:
            orientation: 'vertical'
            size_hint_y: 0.1
            Label:
                text: 'aaaa'
                canvas.before:
                    Color:
                        rgba: 0,.5,0,1 # 緑色
                    Rectangle:
                        pos: self.pos
                        size: self.size
<ResultSCN>:
    BoxLayout:
        size: root.size
        BoxLayout:
            orientation: 'vertical'
            size_hint_y: 0.9
            Label:
                text: 'bbbb'
                canvas.before:
                    Color:
                        rgba: .5,0,0,1 # 赤色
                    Rectangle:
                        pos: self.pos
                        size: self.size
AllSCN:

結果は、

なかなかいいあんばいのようである。
そういうことで、ResultSCNについてもやってみよう。(この色は水色とする)
filelist.kv


<AllSCN>:
    BoxLayout:
        size: root.size
        canvas.before:
            Color:
                rgba: 0,0,.5,1 # 青色
            Rectangle:
                pos: self.pos
                size: self.size
        OpeSCN:
        ResultSCN:
<OpeSCN>:
    BoxLayout:
        size: root.size
        canvas:
            Color:
                rgba: 1,1,0,1 # 黄色
            Rectangle:
                pos: self.pos
                size: self.size
        BoxLayout:
            orientation: 'vertical'
            size_hint_y: 0.1
            Label:
                text: 'aaaa'
                canvas.before:
                    Color:
                        rgba: 0,.5,0,1 # 緑色
                    Rectangle:
                        pos: self.pos
                        size: self.size
<ResultSCN>:
    BoxLayout:
        size: root.size
        canvas:
            Color:
                rgba: 0,1,1,1 # 水色
            Rectangle:
                pos: self.pos
                size: self.size
        BoxLayout:
            orientation: 'vertical'
            size_hint_y: 0.9
            Label:
                text: 'bbbb'
                canvas.before:
                    Color:
                        rgba: .5,0,0,1 # 赤色
                    Rectangle:
                        pos: self.pos
                        size: self.size
AllSCN:

で結果は、

おかしい。水色(ResultSCN)が右半分にいかなければいけないはずだ。
インスペクタを動かしてみると、水色の部分はOpeSCN直下のBoxLayout

右側はResultSCNである。

おそらくRectangleの原点が、常に0,0を指しているからだと思う。
そこで試験的に、


<ResultSCN>:
    BoxLayout:
        size: root.size
        canvas:
            Color:
                rgba: 0,1,1,1 # 水色
            Rectangle:
                pos: 600, 0
                size: self.size

としたら、

となったので、この辺がおかしいようである。
すると、selfの解釈が違っているのか?
いろいろ調べていったら、私がrootだと思っているのは、各画面に共通に持っているもので、これはAppらしい。
そう考えたら、水色部分をselfをrootに変更して再度やってみよう。
(確認のためにOpeSCNの色は透明にしています。)


<AllSCN>:
    BoxLayout:
        size: root.size
        canvas.before:
            Color:
                rgba: 0,0,.5,1 # 青色
            Rectangle:
                pos: self.pos
                size: self.size
        OpeSCN:
        ResultSCN:
<OpeSCN>:
    BoxLayout:
        size: root.size
        canvas:
            #Color:
                #rgba: 1,1,0,1 # 黄色
            Rectangle:
                pos: self.pos
                size: self.size
        BoxLayout:
            orientation: 'vertical'
            size_hint_y: 0.1
            Label:
                text: 'aaaa'
                canvas.before:
                    #Color:
                        #rgba: 0,.5,0,1 # 緑色
                    Rectangle:
                        pos: self.pos
                        size: self.size
<ResultSCN>:
    BoxLayout:
        size: root.size
        canvas:
            Color:
                rgba: 0,1,1,1 # 水色
            Rectangle:
                pos: root.pos
                size: root.size
        BoxLayout:
            orientation: 'vertical'
            size_hint_y: 0.9
            Label:
                text: 'bbbb'
                canvas.before:
                    Color:
                        rgba: .5,0,0,1 # 赤色
                    Rectangle:
                        pos: self.pos
                        size: self.size
AllSCN:


結果良好。
それでは残りのResultSCNの座標をrootに変更したら、


<AllSCN>:
    BoxLayout:
        size: root.size
        canvas.before:
            Color:
                rgba: 0,0,.5,1 # 青色
            Rectangle:
                pos: self.pos
                size: self.size
        OpeSCN:
        ResultSCN:
<OpeSCN>:
    BoxLayout:
        size: root.size
        canvas:
            #Color:
                #rgba: 1,1,0,1 # 黄色
            Rectangle:
                pos: self.pos
                size: self.size
        BoxLayout:
            orientation: 'vertical'
            size_hint_y: 0.1
            Label:
                text: 'aaaa'
                canvas.before:
                    #Color:
                        #rgba: 0,.5,0,1 # 緑色
                    Rectangle:
                        pos: self.pos
                        size: self.size
<ResultSCN>:
    BoxLayout:
        size: root.size
        canvas:
            Color:
                rgba: 0,1,1,1 # 水色
            Rectangle:
                pos: root.pos
                size: root.size
        BoxLayout:
            orientation: 'vertical'
            size_hint_y: 0.9
            Label:
                text: 'bbbb'
                canvas.before:
                    Color:
                        rgba: .5,0,0,1 # 赤色
                    Rectangle:
                        pos: root.pos
                        size: root.size
AllSCN:


特にaaaaは透明にしてないので出るのは仕方ないが、bbbbがはみ出してしまうのはなぜだろう。
この画面が出たところで、目標に近い画面を作っていくことにする。
つまり、

  • OpeSCNが1、ResultSCNが9で上下分割。
  • Label下の色はOpeSCN、ResultSCNとも廃止

とりあえず、この方針でいろいろ探ることにする。
いろいろいじっているうちに、このソースで目標としているものが出来た。
filelist.kv


<AllSCN>:
    BoxLayout:
        orientation: 'vertical'
        size: root.size
        canvas.before:
            Color:
                rgba: 0,0,.5,1 # 青色
            Rectangle:
                pos: self.pos
                size: self.size
        OpeSCN:
            size_hint_y: 0.1
        ResultSCN:
            size_hint_y: 0.9
<OpeSCN>:
    BoxLayout:
        size: root.size
        pos: root.pos
        BoxLayout:
            canvas:
                Color:
                    rgba: 0,.5,0,1 # 緑色
                Rectangle:
                    pos: root.pos
                    size: root.size
            BoxLayout:
                Label:
                    text: 'aaaa'
<ResultSCN>:
    BoxLayout:
        size: root.size
        pos: root.pos
        BoxLayout:
            canvas:
                Color:
                    rgba: 0.5,0,0,1 # 赤色
                Rectangle:
                    size: root.size
            BoxLayout:
                Label:
                    text: 'bbbb'
AllSCN:


まだ問題はあると思うが、とりあえず目標としているものができあがった。
ああ、疲れた。

タイトルとURLをコピーしました