私はPythonでKivyを使用していますが、最後のボタンには埋め込まれたオブジェクトが表示されています

Question

私の質問が愚かで明白な場合は事前にお詫びしますが、これを繰り返し研究しています。私は現在、Kivyを使用していて、スクロールビュー内にあるgridlayoutに複数のボタンがあります。これらのボタンを使って私はラベルと画像を持っています。コードを実行するたびに、最後のボタンだけがラベルと画像を表示します。私はポジションとは関係があると思うが、それが何であるかは分からない。ここに私のコードは次のとおりです。

Window.clearcolor = (0.937, 0.698, 0.176, 1) 

class Solis(App): 
    def build(self): 
     b1 = Button(text= "", 
         background_color=(237, 157, 59, 1), 
         size_hint_y= None, 
         background_normal = '', 
         valign = 'middle', 


        font_size=20) 

    lab1 = Label(text= Content1, 
       color= (0.937, 0.698, 0.176, 1), 
       valign= 'middle', 
       pos=(b1.x , b1.height/2)) 

    b1I = AsyncImage(source = lead1image) 

    def callback1(self): 
     webbrowser.open(lead1) 

    b1.bind(on_press=callback1) 

    b2 = Button(text= "", 
        background_color=(237, 157, 59, 1), 
        size_hint_y= None, 
        background_normal = '', 
        valign = 'middle', 

        font_size=20) 

    lab2 = Label(text= Content2, 
       color= (0.937, 0.698, 0.176, 1), 
       valign= 'middle', 
       halign= 'center', 
       pos=(b2.x + 800, b2.height)) 

    b2I = AsyncImage(source = lead2image) 

    def callback2(self): 
     webbrowser.open(lead2) 

    b2.bind(on_press=callback2) 

    b3 = Button(text= "", 
        background_color=(237, 157, 59, 1), 
        size_hint_y= None, 
        background_normal = '', 
        valign = 'middle', 

        font_size=20) 

    lab3 = Label(text= Content3, 
       color= (0.937, 0.698, 0.176, 1), 
       valign= 'middle', 
       pos=(b3.x + 800, b3.height/4)) 

    b3I = AsyncImage(source = lead3image) 

    def callback3(self): 
     webbrowser.open(lead3) 

    b3.bind(on_press=callback3) 




    l = GridLayout(cols=1, spacing=10, size_hint_y=None, orientation = 'vertical') 

    l.bind(minimum_height=l.setter('height')) 

    s = ScrollView(size_hint=(1, None), size=(Window.width, Window.height)) 

    s.add_widget(l) 
    l.add_widget(b1) 
    l.add_widget(b2) 
    l.add_widget(b3) 
    b1.add_widget(b1I) 
    b1.add_widget(lab1) 
    b2.add_widget(b2I) 
    b2.add_widget(lab2) 
    b3.add_widget(b3I) 
    b3.add_widget(lab3) 


    return s 



if __name__ == "__main__": 
    Solis().run() 

そして、ここでは私の結果はここでhere

Answer 1

であるあなたが欲しいものを得るのを助けるべきものされています

このようなmain.py：

from kivy.app import App 
import webbrowser 

class Solis(App): 

    def __init__(self, **kwargs): 
     super(Solis, self).__init__(**kwargs) 
     self.lead1image='https://pbs.twimg.com/profile_images/562300519008333825/6WcGRXLU.png' 
     self.lead2image='https://pbs.twimg.com/profile_images/439154912719413248/pUBY5pVj.png' 
     self.lead3image='https://pbs.twimg.com/profile_images/424495004/GuidoAvatar.jpg' 

    def callback(self,url): 
     webbrowser.open(url) 

if __name__ == '__main__': 
    Solis().run() 

solis.kvこのように：

ScrollView: 

    GridLayout: 
     cols:1 
     size_hint_y:None 
     height: self.minimum_height 

     Button: 
      size_hint_y: None 
      height:'50dp' 
      on_press: app.callback(app.lead1image) 

      AsyncImage: 
       id:im1 
       size_hint: None, None 
       height: self.parent.height 
       width: '48dp' 
       source: app.lead1image 
       pos: (self.parent.x, self.parent.y) 

      Label: 
       size_hint: None, None 
       height:self.parent.height 
       width: self.parent.width - im1.width 
       text: 'Text for the 1st Label' 
       pos: (self.parent.x, self.parent.y) 

     Button:   
      size_hint_y: None 
      height:'50dp' 
      on_press: app.callback(app.lead2image) 

      AsyncImage: 
       size_hint: None, None 
       height: self.parent.height 
       width: '48dp' 
       source: app.lead2image 
       pos: (self.parent.x, self.parent.y) 

      Label: 
       size_hint: None, None 
       height:self.parent.height 
       width: self.parent.width - im1.width 
       text: 'Text for the 2st Label' 
       pos: (self.parent.x, self.parent.y) 

     Button: 
      size_hint_y: None 
      height:'50dp' 
      on_press: app.callback(app.lead3image) 

      AsyncImage: 
       size_hint: None, None 
       height: self.parent.height 
       width: '48dp' 
       source: app.lead3image 
       pos: (self.parent.x, self.parent.y) 

      Label: 
       size_hint: None, None 
       height:self.parent.height 
       width: self.parent.width - im1.width 
       text: 'Text for the 2st Label' 
       pos: (self.parent.x, self.parent.y) 

したがって、2つのファイル（ ".py"と ".kv"）があります。これは、アプリケーションのロジックをユーザーインターフェイスから分離するのに役立ちます。いくつかのカスタマイズされたウィジェットでコードの長さを減らすことができることに注意してください。また、1つの.pyファイルを保存したい場合は、 "for"ループを追加します。 最後に、あなたの問題について：あなたのラベルと画像が重ね合わされたと思います。私はこれを避けるために "pos："を使用しました。