qml学习2(一些基础控件)

1、首先是图片，图片资源最好在同级目录下创建一个文件夹，放入对应图片，然后再使用

点击查看代码

 Image {
        // anchors.fill:parent
        // fillMode: Image.PreserveAspectFit//填充方式，全部填充，保持原图片大小
        //fillMode: Image.Stretch//拉伸模式
        source: "sourse/AZS.png"
        sourceSize: Qt.size(400,200)//提前进行压缩，防止图片过大消耗内存资源
        asynchronous: true//异步加载，用于图片资源放于网络上
    }

2、不可编辑的文本框(Text)

点击查看代码

Text {
        text: qsTr("hello")
        font.family: "微软雅黑"
        font.pixelSize: 40
        font.italic: true//斜体
        font.underline: true//下划线
        color:"lightblue"
        wrapMode: Text.NoWrap//不跨行
        width:100
        height: 100
        anchors.horizontalCenter: parent.horizontalCenter//居中
    }

3、可编辑的文本框，如果带边框可以parent用Rectangle 但是它不允许有文本提示

点击查看代码

 //用矩形可以方便带边框
    Rectangle
    {
        x:20
        y:50
        width: 300
        height: 400
        color:"grey"//矩形的背景颜色
        radius:5//圆角边框(大小)
        border.color: "red"//边框颜色
        clip: true//超出部分裁剪掉
        //可编辑的文本框
        TextEdit
        {
            width: 300
            height: 400
            text: "请输入文本"
            font.pixelSize: 20
            color: "lightblue"
            focus: true;//上来确定焦点
            font.italic: true//斜体
            clip: true//超出部分裁剪掉
        }
    }

4、按钮控件Button，可以通过信号与槽控制点击后的效果，而且可以设置为一直选中的状态

点击查看代码

Button
    {
        text: "点击我"
        font.pixelSize: 30
        anchors.centerIn: parent
        checkable: true//可以改变为被选中这个状态
        onCheckedChanged:
        {
            console.log("状态",checked);//编译输出
            if(checked)
            {
                text="被点击"
            }
            else
            {
                text="点击我点击我"
            }
        }
    }

除此之外，我们不能直接改变字体的颜色或者背景颜色，背景颜色可以嵌套一个background的矩形控件 而字体颜色我们可以用contentItem部件

点击查看代码

Button
    {
        id:mybtn
        text: "点击我"
        font.pixelSize: 30
        anchors.centerIn: parent
        checkable: true//可以改变为被选中这个状态
        //点击后操作
        onCheckedChanged:
        {
            console.log("状态",checked);//编译输出
            if(checked)
            {
                text="被点击"
            }
            else
            {
                text="点击我点击我"
            }
        }
        //定义一个新内容项目来改变字体颜色
        contentItem: Text {
            text: mybtn.text
            color:"white"
            font.pixelSize: 30
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }
        //定义一个背景来改变按钮颜色
        background: Rectangle
        {
            radius:5
            //悬浮下是红色，点击后是绿色，未点击是蓝色
            color: mybtn.checked ? "lightgreen"
                             : mybtn.hovered ? "red"
                             : "blue"
            border.color:"red"
        }
    }

按钮还可以和计时器搭配，实现按住按钮时的一些操作

点击查看代码

Button
    {
        width: 50
        height: 50
        icon.source: "qrc:/source/ALS.png"
        anchors.centerIn: parent//居中
        background:Rectangle
        {
            color:"green"
        }
        onPressed: timer.start()
        onReleased: timer.stop()
        Timer
        {
            id:timer
            interval: 1000
            repeat:true
            onTriggered: console.log("长按了")
        }
    }

5、可以显示提示文字的文本编辑器TextField，但是只能一行显示，不允许跨行

点击查看代码

TextField
    {
        anchors.centerIn: parent//居中
        color:"white"
        width: 200
        height: 200
        placeholderText: "请输入文本"
        onAccepted: console.log("输入了",text)//回车后会触发
        echoMode:TextInput.Password//输入模式为密码模式
        maximumLength:8//最大文本长度
        background:Rectangle
        {
            radius:8//圆角
            color:"lightblue"
            border.color:"grey"
            border.width:2
        }
    }

6、允许跨行的提示文本的文本编辑器，wrapMode进行设置 而外面嵌套ScrollView是方便加入滚动条

点击查看代码

 ScrollView//方便装入滚动条
    {
        anchors.centerIn: parent//居中
        width: 100
        height: 100
        TextArea
        {
            width: 100
            height: 100
            placeholderText: "请输入文本"
            color:"white"
            wrapMode:TextArea.Wrap//允许跨行
            onTextChanged:console.log(text)//文本改变后触发
            background:Rectangle
            {
                radius:8//圆角
                color:"lightblue"
                border.color:"grey"
                border.width:2
            }
        }
    }

7、滑动模块

点击查看代码

 //滑块部分
    Slider
    {
        id:mySlider
        anchors.centerIn: parent
        width: 200
        //范围从0到200
        from:0
        to:200
        stepSize: 5//每次滑动结果是5的倍数
        value:50//滑块初始位置为50
        onValueChanged:
        {
            console.log("当前值为",value)
        }
    }
    Text {
        anchors.top: mySlider.bottom
        anchors.horizontalCenter: mySlider.horizontalCenter
        padding: 10//控件间隔
        color: "red"
        font.pixelSize: 40
        text: Math.round(mySlider.value)
    }

8、进度条控件

点击查看代码

ProgressBar
    {
        id:myProgress
        width: 200
        anchors.centerIn: parent
        from: 0
        to:100
        value: 20
    }
    Timer
    {
        id:mytimer
        interval: 100
        repeat: true//允许重复计时
        running: true//设置启动
        onTriggered:
        {
            if(myProgress.value<myProgress.to)
                myProgress.value+=5
            else
                myProgress.value=0
        }

    }