qml3

1、可勾选框
可以自定义勾选框，还可以根据勾选框的勾选状态来进行一些操作

点击查看代码

Column//垂直布局容器
    {
        anchors.centerIn: parent
        CheckBox
        {
            id:checkbox1
            checkable: true
            text:"请同意"
            font.pixelSize: 20
            onCheckedChanged: console.log("状态改变")
            //自定义勾选框
            indicator:Rectangle
            {
                anchors.verticalCenter:parent.verticalCenter
                implicitWidth:12
                implicitHeight:12
                radius:3//圆角3
                color:checkbox1.checked?"green":"red"
            }
        }
    }

当然如果生成控件比较麻烦，我们也可以用循环生成控件组成器Repeater来实现

点击查看代码

 Column//垂直布局容器
    {
        anchors.centerIn: parent
        //循环生成控件组成器
        Repeater
        {
            model:{"1","2","3"}//类似与for循环中的条件
            CheckBox
            {
                text:modelData
                onCheckedChanged: console.log("勾选",text)
            }
        }
    }

2、只支持单选的RadioButton

点击查看代码

Column//垂直布局容器
    {
        anchors.centerIn: parent
        RadioButton
        {
            id:radiobtn1
            text: "选项1"
            checkable: true
            onClicked: console.log("选项1被选中")
        }
        RadioButton
        {
            id:radiobtn2
            text:"选项2"
            onClicked: console.log("选项2被选中")
        }
    }

因为这个按钮只支持单选，所以我们可以定义一个按钮组ButtonGroup，在这个按钮组中只能选择一个按钮 在按钮组中定义如果勾选后的动作

点击查看代码

Column//垂直布局容器
    {
        //一个按钮组
        ButtonGroup
        {
            id:buttongrp
            onCheckedButtonChanged:
            {
                if(checkedButton)
                {
                     console.log(checkedButton.text,"被选中")
                }
            }
        }

        anchors.centerIn: parent
        RadioButton
        {
            id:radiobtn1
            text: "选项1"
            checkable: true
            onClicked: console.log("选项1被选中")
            ButtonGroup.group: buttongrp
        }
        RadioButton
        {
            id:radiobtn2
            text:"选项2"
            onClicked: console.log("选项2被选中")
            ButtonGroup.group: buttongrp
        }
        RadioButton
        {
            id:radiobtn3
            text:"选项3"
            onClicked: console.log("选项3被选中")
            ButtonGroup.group: buttongrp
        }
    }

3、支持滑动的开关Switch

点击查看代码

Column//垂直布局容器
    {
        anchors.centerIn:parent
        //滑动的勾选器
        Switch
        {
            id:myswitch
            checked: false//默认开关关闭
            checkable: true//允许开关可以进行开关滑动
            //是否切换开关
            onCheckedChanged:
            {
                console.log("1111")
            }
        }
    }

4、下拉菜单的选项Combox，通过onCurrentValueChanged来获取当前选中的内容

点击查看代码

//列表模型源
    ListModel
    {
        id:myModel
        ListElement{name:"000"}
        ListElement{name:"111"}
        ListElement{name:"222"}
        ListElement{name:"333"}
    }

    Column {
           anchors.centerIn: parent
           spacing: 10

           ComboBox {
               id: myCombox
                width: 100
                currentIndex: 0
                model: myModel//使用列表模型源
                textRole: name
               onCurrentValueChanged: {
                   console.log("索引", currentIndex, "文本", currentText)
               }
           }
       }

5、通过+-按钮来改变数值的对话框

点击查看代码

Column
    {
        anchors.centerIn: parent
        spacing: 10
        SpinBox
        {
            id:mySpinbox
            width: 100
            height: 40
            from: 0
            to:100
            value: 20//初始值20
            stepSize: 5//每次变化5
            onValueChanged:
            {
                console.log(mySpinbox.value)
            }
        }
    }

6、控制一个方向排列的视图ListView(一个控件只能一行)，搭配内部每一行的模板delegate使用

点击查看代码

 ListModel
    {
        id:mymodel
        ListElement{name:"111";color:"red"}
        ListElement{name:"222";color:"lightblue"}
        ListElement{name:"333";color:"lightgreen"}
    }
    ListView//可以上下滚动的视图
    {
        id:myview
        anchors.fill: parent
        anchors.centerIn: parent
        model:mymodel//选择对应的模型
        //每一行的模版
        delegate: Rectangle
        {
            radius:5
            width:parent.width
            height:40
            color:model.color
            Text {
                font.pixelSize: 20
                anchors.centerIn: parent
                text: qsTr(model.name)
            }
        }
    }

7、可以在行和列2个方向进行排列的视图GridView，优先排满1行后开始排列下一行 同样可以搭配delegate使用

点击查看代码

GridView
    {
        anchors.centerIn: parent
        anchors.fill: parent
        model:15//向视图中填充的数量为15个
        delegate: Rectangle
        {
            width:40
            height:40
            color:Qt.rgba(Math.random(),Math.random(),Math.random(),1)
            radius:5
            Text{
                font.pixelSize:20
                color: "white"
                text: qsTr("text")
            }
        }
    }

8、anchor可以处理每个部件的位置 比如anchor.left控制左侧和哪个对齐，anchor.leftmargin可以控制左侧对齐的空隙等等