Question

我正在尝试制作类似“ Bing images”的布局。

也就是说：

图像分为相同宽度的几列。
所有图像的宽度相同。
添加图像的方式是先添加图像在布局的顶部。
可以将布局添加到ScrollView中以使用鼠标滚轮滚动

我没有找到使用Stack Layout的方法，所以我决定创建自己的布局。

我在这里停了

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.image import Image
from kivy.properties import NumericProperty
from kivy.lang import Builder
from kivy.core.window import Window
from kivy.uix.scrollview import ScrollView

KV = '''
#:import Window kivy.core.window.Window

ScrollView

    size_hint: (1, None)
    size: Window.size

    MyLayout
        id:my_l
        Button
            text:'1'
        Button
            size_hint_y: None
            height: 900
            text:'2'
        Button
            text:'3'
        Button
            text:'4'
        Button
            text:'5'
            size_hint_y: None
            height: 900

<MyLayout>:
    #height: self.minimum_height

    cols: 3
    spacing: 10
    size_hint_y:None
    row_width: 300
'''

class MyLayout(FloatLayout):
    def __init__(self, **kwargs):

        super(MyLayout, self).__init__(**kwargs)

    cols = NumericProperty(3)
    row_width = NumericProperty(300)
    spacing = NumericProperty(0)

    def do_layout(self, *args):

        self.i = 0
        self.last_x = [self.height]*self.cols
        for child in self.children[::-1]:

            child.width = self.row_width

            if isinstance(child, Image):
                child.height = child.width / child.image_ratio

            child.size_hint_y= None
            child.size_hint_x= None

            self.i+=1
            if self.i == self.cols+1: self.i = 1


            child.x = self.x+(self.i-1)*(self.row_width+self.spacing)

            child.y = self.last_x[self.i-1]-child.height
            self.last_x[self.i-1]-=child.height+self.spacing



        def on_pos(self, *args):
            self.do_layout()

        def on_size(self, *args):
            self.do_layout()

        def add_widget(self, widget):
            super(SuperGrid, self).add_widget(widget)
            self.do_layout()

        def remove_widget(self, widget):
            super(SuperGrid, self).remove_widget(widget)
            self.do_layout()



class MyApp(App):
    def build(self):
        self.root = Builder.load_string(KV)
        Window.bind(on_dropfile=self.add)

    def add(self, *args):

        name= list(args)[1]
        self.root.ids.my_l.add_widget(Image(source=name))

MyApp().run()

它已经部分工作了（可以运行它，然后从文件夹中拖放一些图像以查看我的意思），但是问题是我不知道如何将ScrollView连接到它。

似乎我需要在KV字符串中添加一行类似height: self.minimum_height的行。但目前尚不清楚我需要在布局类中的哪儿计算minimum_height。

如何使代码与ScrollView一起使用？

Answer 1

您只需要计算height实例的MyLayout。在您的kv文件中，添加：

size_hint: (1, None)

在您的MyLayout部分

然后，在do_layout方法中，计算height中的MyLayout。在self.height =的末尾仅执行一次do_layout（以避免由于on_size方法而导致的无限循环）。例如，这是您的do_layout的修改版本：

def do_layout(self, *args):

    self.i = 0
    col_heights = [0] * self.cols    # keeps track of the height of each column
    self.last_x = [self.height]*self.cols
    for child in self.children[::-1]:

        child.width = self.row_width

        if isinstance(child, Image):
            child.height = child.width / child.image_ratio

        child.size_hint_y= None
        child.size_hint_x= None

        self.i+=1
        if self.i == self.cols+1:
            self.i = 1

        col_heights[self.i-1] += child.height + self.spacing
        child.x = self.x+(self.i-1)*(self.row_width+self.spacing)

        child.y = self.last_x[self.i-1]-child.height
        self.last_x[self.i-1]-=child.height+self.spacing

    if len(self.children) > 0:
        self.height = max(col_heights)

Kivy Bing图片布局

1 个答案: