小白学qml 4



  • 布局元素( Layout Items)

    QML使⽤anchors( 锚) 对元素进⾏布局。 anchoring( 锚定) 是基础元素对
    象的基本属性, 可以被所有的可视化QML元素使⽤。

    0_1526279655538_6af14d2c-5aa7-4a25-ba09-68d55e5f69ef-image.png

    ⼀个元素有6条锚定线( top顶, bottom底, left左, right右, horizontalCenter⽔平中, verticalCenter垂直中) 。
    每⼀条锚定线都有⼀个偏移( offset) 值, 在top( 顶) , bottom( 底) , left( 左) , right( 右) 的锚定线中它们也被称作边距。 对于horizontalCenter( ⽔平中) 与verticalCenter( 垂直中) 与baseline( ⽂本基线) 中被称作偏移值。

    左对齐

    BigSquare{
            anchors.centerIn: parent
            SmallSquare{
                anchors.left: parent.left
            }
        }
    

    0_1526280121427_67a00b6f-debf-4b30-98e9-b0c16e7d3fad-image.png

    右对齐

    BigSquare{
            anchors.centerIn: parent
            SmallSquare{
                anchors.right: parent.right
            }
        }
    

    0_1526280161571_719a7f48-876d-4b24-8814-d63a4f8051cd-image.png

    左下对齐

    BigSquare{
            anchors.centerIn: parent
            SmallSquare{
                anchors.left: parent.left
                anchors.bottom: parent.bottom
            }
        }
    

    0_1526280248691_7236703c-20c8-4146-96ce-a93b2dad2a4b-image.png

    右上对齐

    BigSquare{
            anchors.centerIn: parent
            SmallSquare{
                anchors.right: parent.right
                anchors.top: parent.top
            }
        }
    

    0_1526280276938_9d1addde-36a7-43b7-8e68-8899c5707002-image.png

    居中

    BigSquare{
            anchors.centerIn: parent
            SmallSquare{
                anchors.centerIn: parent
            }
        }
    

    0_1526280314970_c9450bd0-716c-4540-8cae-69d58720c250-image.png

    垂直对齐

    BigSquare{
            anchors.centerIn: parent
            SmallSquare{
                anchors.verticalCenter: parent.verticalCenter
            }
        }
    

    0_1526280510930_b15f52b5-ab9d-455f-87d5-c6500f38a842-image.png

    水平对齐

    BigSquare{
            anchors.centerIn: parent
            SmallSquare{
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }
    

    0_1526280548249_1def8f81-9d16-4b97-8ec4-5842867895aa-image.png

    左外对齐,加边距

    BigSquare{
            anchors.centerIn: parent
            SmallSquare{
                anchors.right: parent.left
                anchors.rightMargin: 10
            }
        }
    

    0_1526280445330_b7d38f37-28a8-4537-8494-32f975bb0080-image.png

    右下对齐,加边距

    BigSquare{
            anchors.centerIn: parent
            SmallSquare{
                anchors.right: parent.right
                anchors.top: parent.bottom
                anchors.topMargin: 10
            }
        }
    

    0_1526280621953_7961d44f-f7b0-46ed-b570-ce7447cd4fa5-image.png

    情况不一一列举

    输⼊元素( Input Element)

    ⽂本输⼊( TextInput) 单行

    ⽂本输⼊允许⽤户输⼊⼀⾏⽂本。 这个元素⽀持使⽤正则表达式验证器来限制输⼊和输⼊掩码的模式设置

    Rectangle{
            width: 200
            height: 100
            color: "linen"
    
            TextInput{
                id: input
                x: 10; y: 10
                width: 180
                height: 80
                //裁切-防止超出边界
                clip: true
                //焦点
                focus: true
                text: "Text Input"
            }
        }
    

    0_1526281675764_20180514_150620.gif

    ⽂本编辑( TextEdit)多行

    显示一块可编辑、格式化的文本

    Rectangle{
            width: 200
            height: 100
            color: "linen"
    
            TextEdit{
                id: input
                x: 10; y: 10
                width: 180
                height: 80
                //裁切-防止超出边界
                clip: true
                //焦点
                focus: true
                //设置换行模式
                wrapMode: TextEdit.Wrap
                text: "Text Edit"
            }
        }
    

    0_1526281918494_20180514_151045.gif

    按键元素( Key Element)

    MySquare{
            x: 20; y: 20
            focus: true
            Keys.onLeftPressed: x-=5
            Keys.onRightPressed: x+=5
            Keys.onUpPressed: y-=5
            Keys.onDownPressed: y+=5
        }
    

    源代码

    Fork me on Gitee



  • 值得注意的是,如果您发现咱们的TextInput输入中文的时候,发现有跳动的现象,那么可以设置它的属性:topPadding,这样才可以稍微缓和跳动的情况。☺ ☺ 其余的话,也不需要做出过多的处理了。


 

最近的回复

关注我们

微博
QQ群











召唤伊斯特瓦尔