将搜索项更多移到顶部 [英] Move search items more to the top

问题描述

我有以下显示了 popup 窗口的代码段.

I have the following code snippet displaying a popup Window.

class SearchBar(TextInput):
    articles = ListProperty()

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.bind(text=self.on_text)
        self.bind(articles=self.on_articles)

    def on_text(self, *args):
        WikiSearcher().get_search_results(self.text, self)

    def on_articles(self, *args):

        self.parent.parent.children[0].update_recommendations(self.articles)

class SearchItem(ButtonBehavior, Label):

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.url = ''

    def on_release(self):
        print (self.url)


class Recommendations(BoxLayout):

    def update_recommendations(self, recommendations: list):
        for (search_item, recommendation) in zip(reversed(self.children), recommendations):
            search_item.text = recommendation
            try:
                search_item.url = wikipedia.page(recommendation).url
            except:
                search_item.url = 'https://en.wikipedia.org/wiki/' + recommendation.replace(" ", "_")

Builder.load_string('''
<SearchItem>:
    font_size: self.height * 0.4
    canvas.before:
        Color:
            rgba: [0.8, 0.8, 0.8, 1] if self.state == 'normal' else [30/255, 139/255, 195/255, 1]
        Rectangle:
            #pos: self.pos
            #size: self.size[0], self.size[1]
            size: root.size[0], root.size[1]
            pos: self.pos[0], self.pos[1]
        Color:
            rgba: 0, 0, 0, 1
        Line:
            rectangle: self.x, self.y, self.width, self.height

    color: 0, 0, 0, 1
<Urlpup>:
    size_hint: 1, 1
    auto_dismiss: False
    title: 'Enter URL or keywords'

    BoxLayout:
        canvas.before:
            Color:
                rgba: 1, 1, 1, 1
            Rectangle:
                size: self.size
                pos: self.pos

        orientation: 'vertical'
        padding: self.width * 0.1
        spacing: self.height * 0.1

        BoxLayout:
            orientation: 'horizontal'
            Spinner:
                id: spinner
                size_hint: 0.5, 0.4
                pos_hint: { 'top' : 1 }
                text: 'en'
                values: 'en', 'fr', 'de', 'it'

            SearchBar:
                id: url_input
                size_hint: 1, 0.4
                pos_hint: { 'center_x' : 0.5, 'top' : 1 }
                multiline: False
                font_size: self.height*0.8

            Button:
                text: 'OK'
                size_hint: 0.5, 0.4
                pos_hint: { 'top' : 1 }
                on_press: root.dismiss()
                on_release: app.create_new_article(url_input.text)

        Recommendations:
            id: recommendations
            orientation: 'vertical'
            SearchItem
            SearchItem
            SearchItem
            SearchItem
''')

class Urlpup(Popup):
    pass

这是 popup 窗口的图片

您会发现 SearchItems 并不紧靠 SearchBar 下方，我正努力将其定位.你能修好它吗?图片上有4个 SearchItems ，但我计划有10个 Searchitems ，因此它应该适用于10个 SearchItems ，或者在我决定更改时可以灵活使用 SearchItems

You can see that the SearchItems are not tightly below the SearchBar, where I'm struggling to position it. Can you fix it? On the picture there are 4 SearchItems but I plan to have 10 Searchitems so it should work for 10 SearchItems or be flexible when I decide to change the number of SearchItems

推荐答案

除非另有说明，否则 BoxLayout 会尝试在其子级之间平均分配可用空间.因此，您在 Urlpup 类中的顶级 BoxLayout 在包含 TextInput 的 BoxLayout 和建议小部件.您可以通过限制水平 BoxLayout 的空间来减少这两个小部件之间的空间.您可以通过指定 BoxLayout 的高度来做到这一点，就像这样:

The BoxLayout tries to distribute its available space equally among its children, unless you tell it otherwise. So, your top level BoxLayout in the Urlpup class evenly divides its space between the BoxLayout containing the TextInput and the Recommendations widget. You can reduce the space between those two widgets by limiting the space given to the horizontal BoxLayout. You can do that by specifying a height for that BoxLayout, like this:

    BoxLayout:
        size_hint_y: None
        height: 50
        orientation: 'horizontal'
        Spinner:
            id: spinner
            size_hint: 0.5, 1
            pos_hint: { 'top' : 1 }
            text: 'en'
            values: 'en', 'fr', 'de', 'it'

        SearchBar:
            id: url_input
            size_hint: 1, 1
            pos_hint: { 'center_x' : 0.5, 'top' : 1 }
            multiline: False
            font_size: self.height*0.8

        Button:
            text: 'OK'
            size_hint: 0.5, 1
            pos_hint: { 'top' : 1 }
            on_press: root.dismiss()
            on_release: app.create_new_article(url_input.text)

请注意，此 BoxLayout 的子级都具有 1.0 的 size_hint_y ，因此它们都是为其指定的高度容器.

Note that the children of this BoxLayout all have a size_hint_y of 1.0, so they will all be the height that is specified for their container.

Recommendations 小部件获取剩余的垂直空间(减去 spacing ).您可以通过减小 spacing 的间距来使 Recommendations 更加接近.

The Recommendations widget gets the remaining vertical space (minus the spacing). You can move the Recommendations even closer by reducing the spacing.

这篇关于将搜索项更多移到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！