时间戳

首页 > 解决方案 > 带有两个标签并同时滚动的 Kivy ScrollView？

kivy - 带有两个标签并同时滚动的 Kivy ScrollView？

问题描述

我创建了一个 UI，它在下部区域显示两个带有长文本的标签。两个标签都在单独的滚动视图中，因此可以滚动。如何将两个标签组合成一个滚动视图，以便两个标签同时滚动？我需要围绕滚动视图创建另一个布局吗？

这是我的kv：

<Button>:
    font_size: 20
    color: 0.1,0.5,0.6,1
    size_hint: 0.3,0.1

<Label>:
    size_hint: 0.1,0.1

<TextInput>:
    size_hint: 1,0.1

<PopupBox>:
    size_hint: .2, .15
    auto_dismiss: True
    title: 'Please wait'
    Label:
        pos_hint: {"x":0.5, "top":0.7}
        text: 'Creating the data...'

<FloatLayout>:
    canvas:
        Color:
            rgba: 0.15, 0.15, 0.15, 0.15
        Rectangle:
            size: self.size
            pos: self.pos

    Label:
        text: "Label 1"
        size_hint: 0.1,0.1
        pos_hint: {"x":0.0, "top":1}

    TextInput:
        id: input1
        pos_hint: {"x":0.11, "top":1}
        multiline: True

    Label:
        text: "Label 2"
        size_hint: 0.1,0.1
        pos_hint: {"x":0.0, "top":0.9}

    TextInput:
        id: input2
        pos_hint: {"x":0.11, "top":0.9}
        multiline: True

    Label:
        text: "Label 3"
        size_hint: 0.11, None
        pos_hint: {"x":0, "top":0.8}
        height: 30

    TextInput:
        id: input3
        text: "|"
        pos_hint: {"x":0.11, "top":0.8}
        size_hint: 0.03, None
        height: 30

    Button:
        text: "Clear"
        on_press: app.clear_inputs()
        pos_hint: {"x":0.15, "top":0.8}
        size_hint: 0.1, None
        height: 30

    Label:
        id: dd_label
        text: "dd"
        pos_hint: {"x":0.7, "top":0.8}
        size_hint: 0.1, None
        height: 30

    Button:
        text: "Comp"
        on_press: app.start_second_thread()
        pos_hint: {"x":0, "top":0.76}
        size_hint: 1, None
        height: 50

    Button:
        text: "So"
        on_press: app.show_popup()
        pos_hint: {"x":0, "top":0.69}
        size_hint: 0.1, None
        height: 25

    GridLayout:
        cols: 2
        size_hint: 1, 0.67
        ScrollView:
            size_hint: (1, 1)
            bar_width: 10
            bar_color: 0.1, 0.1, 0.1, 0.1
            bar_inactive_color: 0.15, 0.15, 0.15, 0.15
            effect_cls: "ScrollEffect"
            scroll_type: ['bars']

            Label:
                id: f_output1
                text: "long text1 \n" * 100
                size_hint_y: None
                size_hint_x: 0.7
                size: self.texture_size
                pos_hint: {"x":0.6, "top":0.7}
                markup: True
                text_size: 700, None
                valign: "middle"
                halign: 'right'
                padding_x: 5

        ScrollView:
            size_hint: (1, 1)
            bar_width: 10
            bar_color: 0.1, 0.1, 0.1, 0.1
            bar_inactive_color: 0.15, 0.15, 0.15, 0.15
            effect_cls: "ScrollEffect"
            scroll_type: ['bars']

            Label:
                id: f_output2
                text: "long text2 \n" * 100
                size_hint_y: None
                size_hint_x: 1
                size: self.texture_size
                pos_hint: {"x":0.6, "top":0.7}
                text_size: 600, None
                markup: True

标签： kivyscrollview

解决方案

您可以制作一个并使用2 个标签ScrollView创建一个GridLayoutcols:2

ScrollView:
    size_hint: (1, 1)
    bar_width: 10
    bar_color: 0.1, 0.1, 0.1, 0.1
    bar_inactive_color: 0.15, 0.15, 0.15, 0.15
    effect_cls: "ScrollEffect"
    scroll_type: ['bars']
    GridLayout:
        cols: 2
        size_hint_y:None
        height:self.minimum_height
        Label:
            id: f_output1
            text: "long text1 \n" * 100
            size_hint_y: None
            size_hint_x: 0.7
            size: self.texture_size
            pos_hint: {"x":0.6, "top":0.7}
            markup: True
            text_size: 700, None
            valign: "middle"
            halign: 'right'
            padding_x: 5

        Label:
            id: f_output2
            text: "long text2 \n" * 100
            size_hint_y: None
            size_hint_x: 1
            size: self.texture_size
            pos_hint: {"x":0.6, "top":0.7}
            text_size: 600, None
            markup: True

推荐阅读