在KV文件中为网格视图插入一条线和颜色到边框

Question

如何在窗口小部件之间插入线(分隔符),以及在KV文件中为网格视图插入颜色边框:

TextBox只是一个功能的TextInput盒子max_chars.

目前的KV档案:

<Label@Label>
    text_size: self.size
    valign: 'middle'

<ContactFrm>
    padding: 5,5
    orientation: 'vertical'
    #row_default_height: '36dp'
    #cols:1 
    #spacing: 0,0

    GridLayout:
        cols: 4     
        row_default_height: '32dp'
        row_force_default: True
        spacing: 10,0
        size_hint_y: None
        #height:34

        Label:
            text: 'Name'
            size_hint_x: 0.5

        TextBox:
            id:name
            max_chars:35

        Label:
            text: 'Contact Name'
            size_hint_x: 0.5

        TextBox:
            id:contactname
            max_chars:35

    GridLayout:
        cols: 4     
        row_default_height: '32dp'
        row_force_default: True
        spacing: 10,0       
        size_hint_y: None
        #height: 36             

        Label:
            text: 'Mobile 1'
            size_hint_x: 0.5
        TextBox:
            id:mob1
            max_chars:35
        Label:
            text: 'Mobile 2'
            size_hint_x: 0.5
        TextBox:
            id:mob2
            max_chars:35
        Label:
            text: 'Landline'
            size_hint_x: 0.5
        TextBox:
            id:land1
        max_chars:35
    Label:
        text: 'E-mail'
        size_hint_x: 0.5
    TextBox:
        id:email1
        max_chars:75

GridLayout:
    row_default_height: '32dp'
    row_force_default: True
    spacing: 10,0
    cols: 4     
    size_hint_y: None
    #height: 36

    Label:
        text: 'Street 1'
        size_hint_x: 0.5
    TextBox:
        id:street1
        max_chars:75
    Label:
        text: 'Street 2'
        size_hint_x: 0.5
    TextBox:
        id:street2
        max_chars:75
    Label:
        text: 'Area'
        size_hint_x: 0.5
    TextBox:
        id:area
        max_chars:75
    Label:
        text: 'City'
        size_hint_x: 0.5
    TextBox:
        id:city
        max_chars:35
    Label:
        text: 'District'
        size_hint_x: 0.5
    TextBox:
        id:district
        max_chars:35
    Label:
        text: 'State'
        size_hint_x: 0.5
    TextBox:
        id:state
        max_chars:35
    Label:
        text: 'Zip Code'
        size_hint_x: 0.5
    TextBox:
        id:zipcode
        max_chars:10
BoxLayout:

我是python和kivy的新手,所以上面的代码可能有点幼稚,请建议我可以改进的地方.谢谢.

最终代码我使用了修改,因此也可以提供厚度:

<Seperator@Widget>:
    id: separator
    size_hint_y: None
    height: 6
    thickness: 2
    canvas:
        Color:
            rgb: .24, .65, .94
        Rectangle:
            #pos: 0, separator.center_y
            pos: self.pos[0], separator.center_y
            size: separator.width, self.thickness

Answer 1

我是Kivy的新手,但我认为你可以Widget在画布上添加普通的分隔符和绘制矩形.

这样的东西给我红线 - 见下图:

    Widget:
        id: separator
        size_hint_y: None
        height: 6
        canvas:
            Color:
                rgb: 1., 0., 0.
            Rectangle:
                pos: 0, separator.center_y
                size: separator.width, 2

我认为你可以在GridLayout中使用canvas(或canvas.before)来绘制边框(使用矩形或两个 - 外部带有边框颜色和内部带有背景颜色)但是你可能需要(以某种方式)做一些边距来显示边界.

编辑:

第一种解决方案是厚度恒定.

对于不同的厚度,您需要一些计算.
我添加margin进行计算.

<Separator@Widget>
    size_hint_y: None
    thickness: 2
    margin: 2
    height: self.thickness + 2 * self.margin
    color: 1., .0, .0
    canvas:
        Color:
            rgb: self.color
        Rectangle:
            pos: self.x + self.margin, self.y + self.margin + 1
            size: self.width - 2 * self.margin , self.thickness

顺便说一句:
我用它+1是pos因为它看起来更好(但我不知道为什么).
我添加左右边距.