QML中border、padding、margin

1、border

定义

border代表边框，可以设置border的宽度和颜色等属性

实现image

实现code

Rectangle
{
    width: 200
    height: 160
    anchors.centerIn: parent
    color: "red"
    border.width: 10
    border.color: "yellow"
}

2、margin

定义

margin代表一个控件的边框到另一个控件的边框的距离，属于容器外部距离

实现image

实现code

Rectangle
{
    id:rect1
    width: 150
    height: 150
    anchors.left: parent.left
    anchors.leftMargin: 80
    anchors.top: parent.top
    anchors.topMargin: 80
    color: "red"
}

3、padding

定义

padding代表自身边框到自身内部另一个容器边框之间的距离，属于容器内距离

实现image

实现code

Control
{
    width: 200
    height: 160
    anchors.centerIn: parent
    padding: 30
    background: Rectangle
    {
        anchors.fill: parent
        color: "red"
    }

    contentItem: Rectangle
    {
        color: "yellow"
    }

    //border.width: 10
    //border.color: "yellow"
}

4、试验

4.1.1 image

4.1.2 code

Control
{
    width: 200
    height: 160
    anchors.centerIn: parent
    //padding: 30
    background: Rectangle
    {
        anchors.fill: parent
        color: "red"
    }

    contentItem: Rectangle
    {
        color: "yellow"
    }

    //border.width: 10
    //border.color: "yellow"
}

4.2.1 image

4.2.2 code

Control
{
    width: 200
    height: 160
    anchors.centerIn: parent
    padding: 30
    background: Rectangle
    {
        anchors.fill: parent
        color: "red"
    }

    contentItem: Rectangle
    {
        color: "yellow"
    }

    //border.width: 10
    //border.color: "yellow"
}

5、总结

由外到内，margin -> border -> padding -> content