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

Question

我想知道怎么在小部件之间插入一条线（分隔符），还有怎么给网格视图的边框上色，在KV文件里怎么做：

TextBox 其实就是一个带有 max_chars 功能的 TextInput 输入框。

现在的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

这个不行，因为所有的东西都变成了绿色（而不仅仅是背景）。

我甚至试着把我的网格布局（这次背景是蓝色）放在一个绿色背景的盒子布局里面。

我本来希望能看到一个清晰的对比：底下是绿色的底层，上面是我所有绿色的小部件（就像你分享的那个图，但底色是蓝色而不是白色）。

结果并不是这样，所有的东西还是变成了蓝色。看起来最后添加的颜色就成了整个窗口的背景色。

这是我的 .kv 文件：

BoxLayout:

<BoxLayout>:
    canvas.before:
        Color:
            rgba: 0.3, 0.69, 0.31, 1.0
        Rectangle:
            size: self.size
            pos: self.pos

    SettingsGridLayout:

<SettingsGridLayout>:
    orientation: "lr-tb"
    spacing: "20dp"
    padding: "30dp"
    cols: 2
    canvas.before:
        Color:
            rgba: 0, 0, 1, 1
        Rectangle:
            size: self.size
            pos: self.pos

    Label:
        text: "Rows:"
        #text_size: self.size
        #halign: "left"
        #valign: "middle"
        color: 1, 0, 0, 1
        size_hint: .3, None

    SizeSelectionSpinner:
        size_hint: .7, None
        height: "40dp"

    Label:
        text: "Columns:"
        text_size: self.size
        halign: "left"
        valign: "middle"
        color: 1, 0, 0, 1
        size_hint: .3, None

    SizeSelectionSpinner:
        size_hint: .7, None
        height: "40dp"

这是最终的屏幕效果：

Answer 2

你也可以为你的网格布局设置间距，然后画一个矩形作为背景。可以这样做：

GridLayout:
    spacing: 10

    canvas.before:
        Color:
            rgba: 0.3, 0.69, 0.31, 1.0
        Rectangle:
            size: self.size
            pos: self.pos

这样看起来会像这样：

Answer 3

我刚开始学习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.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

顺便说一下：
我在pos中加了+1，因为这样看起来更好（但我不知道为什么）。
我添加了左右边距。