【问题标题】:How to position Async Images inside KivyMD's MDCard in .py File如何在 .py 文件中将异步图像定位在 KivyMD 的 MDCard 中
【发布时间】:2021-07-24 12:43:14
【问题描述】:

我想在 kivyMD 的 MDCard 中放置一个异步图像,但由于某种原因,该卡在 x 方向上使用 pos_hint 正确定位,但在 方向上的工作方式不同>y方向

代码

from kivymd.app import MDApp
from kivymd.uix.screen import Screen
from kivymd.uix.boxlayout import MDBoxLayout
from kivymd.uix.label import MDLabel
from kivymd.uix.button import MDRectangleFlatButton
from kivymd.uix.card import MDCard, MDSeparator

from kivy.lang import Builder
from kivy.metrics import dp
from kivy.uix.image import AsyncImage

Builder.load_string("""
<AppScreen>:
    MDBoxLayout:
        canvas.before:
            Color:
                rgba:1,0,0,1 #Red
            Rectangle:
                size:self.size
                pos:self.pos

        orientation:'vertical'
        pos_hint: {'center_x':.5, 'center_y':.4}
        size_hint: (.75, .6)

        ScrollView:
            canvas.before:
                Color:
                    rgba: 0,1,0,.5 #Green
                Rectangle:
                    size:self.size
                    pos:self.pos 
            do_scroll_x:False
            do_scroll_y:True
            pos_hint:{'center_x':0.5, 'center_y':0.5}
            size_hint:(0.5,1)
            MDBoxLayout:
                canvas.before:
                    Color:
                        rgba: 0,0,1,.5
                    Rectangle:
                        size:self.size
                        pos:self.pos 
                orientation:'vertical'
                id:container
                size_hint_y:None #This makes the stuff scroll O.o
                height:self.minimum_height
                spacing:10

    MDRectangleFlatButton:
        text:"Press Me"
        pos_hint:{'center_x':0.5, 'center_y':.8}
        on_release:root.printing()
""")

class AppScreen(Screen):
    def __init__(self, **kwargs):
        super(AppScreen, self).__init__(**kwargs)
        self.scroll_id = self.ids.container
    def printing(self):
        for x in range(5):
            img=AsyncImage(
                source="https://i.redd.it/x1js663rq7s41.jpg",
                pos_hint={'center_x':0.9, 'center_y':0.5},
                size_hint_y=None,
                size=(dp(20), dp(30))
                )
            card = MDCard(
                orientation='vertical',
                pos_hint={'center_x':0.5},
                size_hint=(1, None),
                #size=(dp(100), dp(100)) #Size is required to view stuff in Cards

            )
            card.add_widget(img)
            self.scroll_id.add_widget(card)
class DemoApp(MDApp):
    def build(self):
        self.theme_cls.theme_style="Dark"
        return AppScreen()

DemoApp().run()

【问题讨论】:

    标签: python-3.x kivy kivymd md-card


    【解决方案1】:

    我在 MDCard 中使用了另一个 Screen,并将异步图像作为子项添加到创建为 layout 的新屏幕中

    注意: You may want to use GridLayout or BoxLayout if you have multiple widgets inside a MDCard. (GridLayout ignores the pos and size hint of it's children though)

    解决办法:

        def __init__(self, **kwargs):
            super(AppScreen, self).__init__(**kwargs)
            self.scroll_id = self.ids.container
        def printing(self):
            for x in range(5):
    
                #New screen as a child of MDCard
                layout = Screen(
                    pos_hint={'center_x':0.5},
                    size_hint=(1,None)
    
                )
    
                img=AsyncImage(
                    source="https://i.redd.it/x1js663rq7s41.jpg",
                    pos_hint={'center_x':0.5, 'center_y':0.6},
                    size_hint = (.5,.5)
                    )
    
                card = MDCard(
                    orientation='vertical',
                    pos_hint={'center_x':0.5},
                    size_hint=(1, None),
                    #size=(dp(100), dp(100)) #Size is required to view stuff in Cards
    
                )
                layout.add_widget(img)
                card.add_widget(layout)
                self.scroll_id.add_widget(card)
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2022-01-23
      • 1970-01-01
      • 2020-11-22
      • 2021-08-19
      • 2021-12-09
      • 1970-01-01
      相关资源
      最近更新 更多