qml4（布局器）

1、首先是row行布局器还有column列布局器
其中可以设置间隔，spacing是每个部件的间隔，padding是整体的间隔

点击查看代码

 Row
    {
           spacing: 5//这个水平布局器中每个元素之间的间隔
           padding: 3//整体组件的上下左右的间隔
           Rectangle
           {
                  width: 50
                  height: 50
                  color: "red"
           }
           Rectangle
           {
                  width: 50
                  height: 50
                  color: "blue"
           }
           Rectangle
           {
                  width: 50
                  height: 50
                  color: "green"
           }
    }

除此之外row和column也可以在Grid整体布局器中设置

点击查看代码

 Grid
    {
           //columns: 3//设置3列
           rows: 4
           spacing: 5//这个水平布局器中每个元素之间的间隔
           padding: 3//整体组件的上下左右的间隔
           Rectangle
           {
                  width: 50
                  height: 50
                  color: "red"
           }
           Rectangle
           {
                  width: 50
                  height: 50
                  color: "blue"
           }
           Rectangle
           {
                  width: 50
                  height: 50
                  color: "green"
           }
           Rectangle
           {
                  width: 50
                  height: 50
                  color: "lightgreen"
           }
    }

2、自动规划排列Flow，可以根据不同控件的大小进行自定义排列

点击查看代码

Flow
    {
           width: 400
           height: 500
           spacing: 4
           padding: 3
           Repeater
           {
              model: 10//循环10个控件
              Rectangle
              {
                  width: 50+Math.random()*50
                  height: 50
                  color: Qt.rgba(Math.random(),Math.random(),Math.random())
                  radius:5
                  border.color: "grey"
                  border.width: 2
              }
           }
    }

同时我们也可以用Positioner来判断控件当前在布局中的序号

点击查看代码

Flow
    {
           width: 400
           height: 500
           spacing: 4
           padding: 3
           Repeater
           {
              model: 10//循环10个控件
              Rectangle
              {
           //Positioner用于布局管理器中，判断当前控件的位置
                  property bool firstItem: Positioner.isFirstItem
                  property bool lastItem: Positioner.isLastItem
                  width: 50+Math.random()*50
                  height: 50
                  color: Qt.rgba(Math.random(),Math.random(),Math.random())
                  radius:5
                  border.color: "grey"
                  border.width: 2
                  Text {
                      color: "black"
                      font.pixelSize: 10
                      anchors.centerIn: parent
                      //模板字符串，firstItem判断是不是第一个控件
                      text: `item${index+1}-$`+(firstItem?"First":lastItem?"Last":"Middle")
                  }
              }
           }
    }

3、有一些控件的信号与槽 比如Button的onClicked、Rectangle的onWidthChanged 还有键盘事件，比如空格，回车，还有键盘按下

点击查看代码

TextField
    {
        id:mytext
        anchors.centerIn: parent
        width: 200
        height: 80
        focus: true
        font.pixelSize: 20
        Keys.onPressed:
        {
           console.log(mytext.text)
           if(event.key===Qt.Key_Space)
                      console.log("空格按下")
        }
        Keys.onReturnPressed:
        {
           console.log("回车键按下")
        }
    }

4、鼠标也有一些事件，比如按下，松开，滚轮等

点击查看代码

 Rectangle
    {
    width: 400
    height: 400
    anchors.centerIn: parent
    color: "lightgreen"
    MouseArea
    {
    width: 400
    height: 400
    anchors.centerIn: parent

       onClicked:
       {
           console.log("点击",mouseX,mouseY)
       }
       onPressed:
       {
           console.log("按住")
       }
       onDoubleClicked:
       {
           console.log("双击")
       }
       onReleased:
       {
           console.log("松开鼠标")
       }
       onWheel:
       {
           console.log("滚动的角度",wheel.angleDelta)
       }
    }
    }

5、Timer定时器也有对应的事件，可以通过onTriggered来确定触发时间后的操作 通过timer.running设置为true和false来控制定时器的开启和关闭

6、qml中控件也有对应类似的构造函数和析构函数

点击查看代码

Rectangle
    {
      width: 400
      height: 400
      anchors.centerIn: parent
      color: "lightgreen"
           Component.onCompleted:
           {
               console.log("组件创建")
           }
           Component.onDestruction:
           {
               console.log("组件销毁")
           }
    }

7、我们自己也可以定义一些信号，和正常写代码一样，信号用signal，槽用on+信号 比如现在创建了两个qml文件，MyComponent.qml和Main.qml

MyComponent中定义信号

点击查看代码

Rectangle
{
    id:myrect
    width: 100
    height: 100
    radius: 5
    color: "lightgreen"
    signal mysignal(string msg,int value)
    MouseArea
    {
        anchors.centerIn: parent
        width: 100
        height: 100
        onClicked:
        {
            myrect.mysignal("点击",mouseX)
        }
    }
}

在Main.qml中定义槽，通过信号触发槽

点击查看代码

Window
{
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Text {
        id: mytext
        anchors.centerIn: parent
        width: 100
        height: 100
        color: "lightblue"
        text: qsTr("text")
    }
    MyComponent
    {
        anchors.top: mytext.bottom
        anchors.horizontalCenter: mytext.horizontalCenter
        onMysignal:
        {
            mytext.text="被改变"
        }
    }
}