Kivy Scrollview的變色問題

Question

我在scrollview的按鈕之間創建了一些簡單的線條，但是當您在不同位置上下拖動滾動條時，線條的亮度似乎會波動。

當您在501到999像素范圍內設置scrollview對象的高度時，會發生此問題。 但是，當您將scrollview對象的高度更改為恰好為500或1000像素時，問題就停止了，並且顏色保持一致。 無論scrollview的高度如何，我都需要紅色線條在所有行中保持一致。

有誰知道導致此問題的原因以及如何解決此問題？

編輯：我在2019年7月22日用更新的代碼和描述編輯了這篇文章，更好地演示了明顯的錯誤。 請在下面查看代碼和屏幕截圖。

這是從黑開始的線條的圖像：

這是拖動滾動條后線條變為更亮的顏色的圖像：

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.lang import Builder
from kivy.uix.button import Button
from kivy.graphics import Line, InstructionGroup, Canvas, CanvasBase, Color, Rectangle

Builder.load_string("""
<ButtonsApp>:
    ScrollView:
        id: sv
        size_hint: None, None
        pos: 205, 0
        size: 900, 700 #If you change the height to 700 pixels, the line colors will darken and brighten as you drag the scroll bar up and down... 
        #Alternatively, if you change the height to 500 pixels, the line colors stay consistent as you drag the scroll bar..
        scroll_type: ['bars']
        scroll_wheel_distance: 20
        bar_width: 8
        bar_inactive_color: .55, .55, .55, 1 
        bar_color: .663, .663, .663, 1 
        canvas.before:
            Color:
                rgba: 0, .5, 1, 1
                group: 'b'
            Rectangle:
                size: 0, 0
                group: 'b'
        GridLayout:
            id: container
            cols: 6
            height: self.minimum_height
            size_hint: None, None
            do_scroll_x: False


""")

class ButtonsApp(App, FloatLayout):

    def build(self):
        y = 1 #we need to use this variable for dynamic ID creation
        start_pixel = 0
        for i in range(0, 200):
            L1 = Button(text="row = " + str(y), font_size=12, halign='left', valign='middle', size_hint_x=None, width=60, background_color=[0, 0, 0, 1],
            id=str(y), color=[.92, .92, .92, 1])
            L2 = Button(text="", font_size=12, halign='left', valign='middle', size_hint=[None, None], width=63, height=40, background_color=[0, 0, 0, 1],
            id=str(y), color=[.92, .92, .92, 1])
            L3 = Button(text="22" + str(y), font_size=12, halign='left', valign='middle', size_hint_x=None, width=330, background_color=[0, 0, 0, 1],
            id=str(y), color=[.92, .92, .92, 1])
            L4 = Button(text="33" + str(y), font_size=12, halign='left', valign='middle', size_hint_x=None, width=118, background_color=[0, 0, 0, 1],
            id=str(y), color=[.92, .92, .92, 1])
            L5 = Button(text="Test Description" + str(y), font_size=12, halign='left', valign='middle', size_hint_x=None, width=122, background_color=[0, 0, 0, 1],
            id=str(y), color=[.92, .92, .92, 1])
            L6 = Button(text="Test Description" + str(y), font_size=12, halign='left', valign='middle', size_hint_x=None, width=118, background_color=[0, 0, 0, 1],
            id=str(y), color=[.92, .92, .92, 1])
            with self.ids.container.canvas.after:
                Color(1, 0, 0, 1)
                Line(points=(L1.pos[0], L1.pos[1] + start_pixel, L1.pos[0] + 900, L1.pos[1] + start_pixel), width=1)
            #bind text_size to size so that halign and valign work properly on button created above
            L1.bind(size=L1.setter('text_size'))  
            L2.bind(size=L2.setter('text_size')) 
            L3.bind(size=L3.setter('text_size')) 
            L4.bind(size=L3.setter('text_size')) 
            L5.bind(size=L3.setter('text_size')) 
            L6.bind(size=L3.setter('text_size'))
            #add the button to grid layout
            self.ids.container.add_widget(L1)
            self.ids.container.add_widget(L2)
            self.ids.container.add_widget(L3)
            self.ids.container.add_widget(L4)
            self.ids.container.add_widget(L5)
            self.ids.container.add_widget(L6)
            y = y + 1   
            start_pixel = start_pixel + 40
        return self

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

Answer 1

顏色沒有改變，但是您正在繪制的Line被“ Button小部件覆蓋。 我不知道為什么它在Buttons列表中途發生。 但是您可以使用canvas.after修復它。 更改：

with self.ids.container.canvas:

至：

with self.ids.container.canvas.after:

Answer 2

我發現一種不太理想的解決方案，可以通過繪制寬度為1.0001的紅線和下面的寬度為1的黑線來解決此問題。由於某些原因，當拖動紅色線時，拖動滾動視圖時顏色會改變設置為1的寬度（或線條很細）。 由於您必須繪制兩倍的線條，因此該解決方案將稍微影響性能，但是它確實解決了顏色變化問題。

這是代碼：

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.lang import Builder
from kivy.uix.button import Button
from kivy.graphics import Line, InstructionGroup, Canvas, CanvasBase, Color, Rectangle

Builder.load_string("""
<ButtonsApp>:
    ScrollView:
        id: sv
        size_hint: None, None
        pos: 205, 0
        size: 900, 700 #If you change the height to 700 pixels, the line colors will darken and brighten as you drag the scroll bar up and down... 
        #Alternatively, if you change the height to 500 pixels, the line colors stay consistent as you drag the scroll bar..
        scroll_type: ['bars']
        scroll_wheel_distance: 20
        bar_width: 8
        bar_inactive_color: .55, .55, .55, 1 
        bar_color: .663, .663, .663, 1 
        canvas.before:
            Color:
                rgba: 0, .5, 1, 1
                group: 'b'
            Rectangle:
                size: 0, 0
                group: 'b'
        GridLayout:
            id: container
            cols: 6
            height: self.minimum_height
            size_hint: None, None
            do_scroll_x: False


""")

class ButtonsApp(App, FloatLayout):

    def build(self):
        y = 1 #we need to use this variable for dynamic ID creation
        start_pixel = 0
        for i in range(0, 200):
            L1 = Button(text="row = " + str(y), font_size=12, halign='left', valign='middle', size_hint_x=None, width=60, background_color=[0, 0, 0, 1],
            id=str(y), color=[.92, .92, .92, 1])
            L2 = Button(text="", font_size=12, halign='left', valign='middle', size_hint=[None, None], width=63, height=40, background_color=[0, 0, 0, 1],
            id=str(y), color=[.92, .92, .92, 1])
            L3 = Button(text="22" + str(y), font_size=12, halign='left', valign='middle', size_hint_x=None, width=330, background_color=[0, 0, 0, 1],
            id=str(y), color=[.92, .92, .92, 1])
            L4 = Button(text="33" + str(y), font_size=12, halign='left', valign='middle', size_hint_x=None, width=118, background_color=[0, 0, 0, 1],
            id=str(y), color=[.92, .92, .92, 1])
            L5 = Button(text="Test Description" + str(y), font_size=12, halign='left', valign='middle', size_hint_x=None, width=122, background_color=[0, 0, 0, 1],
            id=str(y), color=[.92, .92, .92, 1])
            L6 = Button(text="Test Description" + str(y), font_size=12, halign='left', valign='middle', size_hint_x=None, width=118, background_color=[0, 0, 0, 1],
            id=str(y), color=[.92, .92, .92, 1])
            with self.ids.container.canvas.after: #draw the red line with a width of 1.0001
                Color(1, 0, 0, 1)
                Line(points=(L1.pos[0], L1.pos[1] + start_pixel, L1.pos[0] + 900, L1.pos[1] + start_pixel), width=1.0001)
            with self.ids.container.canvas.after: #draw a black line with a width of 1
                Color(0, 0, 0, 1)
                Line(points=(L1.pos[0], (L1.pos[1] + start_pixel) - 1, L1.pos[0] + 900, (L1.pos[1] + start_pixel) - 1), width=1)
            #bind text_size to size so that halign and valign work properly on button created above
            L1.bind(size=L1.setter('text_size'))  
            L2.bind(size=L2.setter('text_size')) 
            L3.bind(size=L3.setter('text_size')) 
            L4.bind(size=L3.setter('text_size')) 
            L5.bind(size=L3.setter('text_size')) 
            L6.bind(size=L3.setter('text_size'))
            #add the button to grid layout
            self.ids.container.add_widget(L1)
            self.ids.container.add_widget(L2)
            self.ids.container.add_widget(L3)
            self.ids.container.add_widget(L4)
            self.ids.container.add_widget(L5)
            self.ids.container.add_widget(L6)
            y = y + 1   
            start_pixel = start_pixel + 40
        return self

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