QML常用控件

这里的控件是显示的元素

1、Item:一切的基类

Item {
      Image {
          source: "tile.png"
      }
      Image {
          x:
          width:
          height:
          source: "tile.png"
      }
      Image {
          x:
          width:
          height:
          fillMode: Image.Tile
          source: "tile.png"
      }
  }

2、Rectangle:矩形

Rectangle{
    width:300;
    height:200;
    color:"#C0C0C0";
    focus:true;
    Keys.enabled:true;
    Keys.onEscapePressed:Qt.quit();
    Keys.onBackPressed:Qt.quit();
    Keys.onPressed:{
        switch(event.key){
        case Qt.Key_0:
        case Qt.Key_1:
        case Qt.Key_2:
        case Qt.Key_3:
        case Qt.Key_4:
        case Qt.Key_5:
        case Qt.Key_6:
        case Qt.Key_7:
        case Qt.Key_8:
        case Qt.Key_9:
            event.accepted=true;
            keyView.text = event.key-Qt.Key_0;
            break;
        }
    }

3、Text:字

Text{
        id:keyView;
        font.bold:true;
        font.pixelSize:;
        text:"Waiting";
        anchors.centerIn:parent;
        color:"#FF0000";
    }

4、Glow:光影

Glow{
        anchors.fill:keyView;
        radius:;
        samples:;
        color:"white";
        source:keyView;
    }

5、PushButton:按钮

 Button{
        id:openBtn;//id
        text:"OPEN";//显示字
        anchors.left: parent.left;
        anchors.leftMargin: ;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: ;
        style:ButtonStyle{
            background: Rectangle{
                implicitWidth: ;
                implicitHeight: ;
                color:"#FFFFFF";
                border.width: control.pressed?:;
                border.color: (control.hovered || control.pressed)?"green":"#888888";
            }
        }
        onClicked:{
       //点击信号回调
       //fileDialog.open();
        }
    }

6、TabView，用TabViewStyle定制外观，注意手册中TabView没有style属性【实际上有，只是没有加上去】

main.qml:
 
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.0
import QtQuick.Controls 1.4
Window {
    visible: true
    width:
    height:
    title: qsTr("Hello World")
 
    TabView{
        anchors.fill: parent;
        style: TabViewStyle {
            frameOverlap:
            tabsAlignment: Qt.AlignHCenter
            tab: Rectangle {
                color: styleData.selected ? "steelblue" :"lightsteelblue"
                border.color:  "steelblue"
                implicitWidth: Math.max(text.width + , )
                implicitHeight:
                radius:
                Text {
                    id: text
                    anchors.centerIn: parent
                    text: styleData.title
                    color: styleData.selected ? "white" : "black"
                }
            }
            frame: Rectangle { color: "steelblue" }
        }
        Tab {
            source:"tab.qml";
        }
        Tab {
            title: "Blue"
            Rectangle { color: "blue" }
        }
        Tab {
            title: "Green"
            Rectangle { color: "green" }
        }
    }
}

tab.qml:
 
import QtQuick 2.0
import QtQuick.Controls 1.4
Rectangle{
    Button{
        id:btn1;
        text: "";
    }
    Button{
        anchors.left: btn1.right;
        text: "";
    }
}

7、行编辑：TextInput，TextField【比TextInput多了背景颜色设置】

8、块编辑：TextEdit，TextArea【比TextEdit多了背景颜色设置】

9、ExclusiveGroup，互斥分组，可以在里面放入RadioButton、CheckBox、Action等元素

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
    visible: true
    width:
    height:
    title: qsTr("Hello World")
 
    Text {
        id: toptext;
        text: qsTr("请选择操作系统:");
        anchors.top: parent.top;
        anchors.topMargin: ;
    }
    Text{
        id:maintext;
        anchors.centerIn: parent;
        font.pixelSize: ;
        text:"no section";
        z:;
    }
 
    ExclusiveGroup{
        id:eg;
    }
    RadioButton{
        id:btn1;
        text: "android";
        anchors.top:toptext.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: ;
        exclusiveGroup: eg;
        anchors.topMargin: ;
    }
    RadioButton{
        id:btn2;
        text: "ios";
        anchors.top:btn1.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: ;
        exclusiveGroup: eg;
        anchors.topMargin: ;
    }
    RadioButton{
        id:btn3;
        text: "windows";
        anchors.top:btn2.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: ;
        exclusiveGroup: eg;
        anchors.topMargin: ;
    }
    RadioButton{
        id:btn4;
        text: "wh";
        anchors.top:btn3.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: ;
        exclusiveGroup: eg;
        anchors.topMargin: ;
    }
    RadioButton{
        id:btn5;
        text: "linux";
        anchors.top:btn4.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: ;
        exclusiveGroup: eg;
        anchors.topMargin: ;
    }
    Button{
        id:btn;
        text:"确定";
        anchors.top:btn5.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: ;
        anchors.topMargin: ;
        onClicked: {
            maintext.text = eg.current.text;
        }
    }
}

10、RadioButton，单旋按钮，使用RadioButtonStyle来设置风格

11、CheckBox，复选按钮，使用CheckBoxStyle来设置风格

partiallyCheckedEnabled：用来表示可以部分选中

    CheckBox{
        id:btn5;
        text: "linux";
        partiallyCheckedEnabled: true;
        anchors.top:btn4.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: ;
        anchors.topMargin: ;
    }

12、GroupBox

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
    visible: true
    width:
    height:
    title: qsTr("Hello World")
 
    GroupBox{
        id:gb;
        title: "test";
        anchors.centerIn: parent;
        width: ;
        height: ;
        checkable: true;//是否可选
        flat: false;//是否有边框
    }
}

13、ComboBox

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
    visible: true
    width:
    height:
    title: qsTr("Hello World")
 
    ComboBox {
        anchors.centerIn: parent;
        currentIndex: ;
        //model: [ "Banana", "Apple", "Coconut" ]方式一
        model: ListModel {//方式二
            id: cbItems;
            ListElement { text: "Banana"; color: "Yellow" }
            ListElement { text: "Apple"; color: "Green" }
            ListElement { text: "Coconut"; color: "Brown" }
        }
        textRole: "color";//使用text或者color来显示
        width: ;
        onCurrentIndexChanged: {
            console.debug(cbItems.get(currentIndex).text + ", " + cbItems.get(currentIndex).color);//获取当前内容
        }
    }
}

14、ProgressBar

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
    visible: true
    width:
    height:
    title: qsTr("Hello World")
    Column {
        anchors.centerIn: parent;
        ProgressBar {
            value: 0.5//当前值
        }
        ProgressBar {
            indeterminate: true//忙
        }
    }
}

用ProgressBarStyle设置风格

15、Slider，使用SliderStyle来设置风格

Slider由四个部分组成，都可以定义

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Window {
    visible: true
    width:
    height:
    title: qsTr("Hello World")
 
    Text{
        id:text;
        anchors.top:parent.top;
        anchors.topMargin: ;
        anchors.left: parent.left;
        anchors.leftMargin: ;
        font.pixelSize: ;
        color:"red";
        text:"noooooo";
    }
 
    Slider {
        anchors.centerIn: parent;
        width:;
        value: ;
        maximumValue: ;
        stepSize: ;
        tickmarksEnabled: true;
        onValueChanged: {//这个信号没有找到
            text.text=value;
        }
        style:SliderStyle{
            groove: Rectangle{
                width: ;
                height: ;
                radius: ;
                color: "green";
            }
            handle: Rectangle{
                width: ;
                height: ;
                radius: ;
                color: "red";
            }
        }
    }
}

16、Flickable

17、Canvas

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Window {
    visible: true
    width:
    height:
    title: qsTr("Hello World")
    Canvas {
          id: mycanvas
          width:
          height:
          onPaint: {
              var ctx = getContext("2d");
              ctx.fillStyle = Qt.rgba(, , , );
              ctx.fillRect(, , width, height);
          }
      }
}

18、仪表盘CircularGauge

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
  CircularGauge {
      value: accelerating ? maximumValue :
      anchors.centerIn: parent
 
      property bool accelerating: false
 
      Keys.onSpacePressed: accelerating = true
      Keys.onReleased: {
          if (event.key === Qt.Key_Space) {
              accelerating = false;
              event.accepted = true;
          }
      }
 
      Component.onCompleted: forceActiveFocus()
 
      Behavior on value {
          NumberAnimation {
              duration:
          }
      }
  }

19、GridLayout

GridLayout {
    id: grid
    rows:
    columns:
    width:
    height:
    columnSpacing:
    Text {
        id: textUsr
        text: qsTr("用户名")
        font.pointSize:
        color: "black"
    }
    TextField {
        id: filedUsr
        Layout.preferredHeight:
    }
    Text {
        id: textPaswd
        text: qsTr("密码")
        font.pointSize:
        color: "black"
    }
    TextField {
        id: filedPawd
        Layout.preferredHeight:
    }
}

20、Image

Image {
    id: rdJpg
    anchors.centerIn: parent
    smooth: true
    visible: false
    source: "qrc:/img/rd.jpg"
}

如果是将图片全部存到了资源里，然后Image使用资源里的这些图片，最后打包的程序不需要再打包这些图片，因为已经跟随资源编译到程序里了，所以耗内存

QML常用控件的更多相关文章

android内部培训视频_第三节(3)_常用控件(ViewPager、日期时间相关、ListView)
第三节(2):常用控件之ViewPager.日期时间相关.ListView 一.ViewPager 实例:结合PagerAdapter滑动切换图片二.日期时间相关:AnalogClock\Dig ...
[WinForm]WinForm跨线程UI操作常用控件类大全
前言在C#开发的WinForm窗体程序开发的时候,经常会使用多线程处理一些比较耗时之类的操作.不过会有一个问题:就是涉及到跨线程操作UI元素. 相信才开始接触的人一定会遇上这个问题. 为了解决这个问 ...
android内部培训视频_第三节常用控件(Button,TextView,EditText,AutocompleteTextView)
第三节:常用控件一.Button 需要掌握的属性: 1.可切换的背景 2.9.png使用 3.按钮点击事件 1) onClick 3) 匿名类 4) 公共类二.TextView 常用属性 1.a ...
Xamarin Studio在Mac环境下的配置和Xamarin.iOS常用控件的示例
看过好多帖子都是Win环境装XS,Mac只是个模拟器,讲解在Mac环境下如何配置Xamarin Studio很少,也是一点点找资料,东拼西凑才把Xamarin Studio装在Mac上跑起来,如下: ...
MFC编程入门之二十二（常用控件：按钮控件Button、Radio Button和Check Box）
本节继续讲解常用控件--按钮控件的使用. 按钮控件简介按钮控件包括命令按钮(Button).单选按钮(Radio Button)和复选框(Check Box)等.命令按钮就是我们前面多次提到的侠义的 ...
MFC编程入门之二十（常用控件：静态文本框）
上一节讲了颜色对话框之后,关于对话框的使用和各种通用对话框的介绍就到此为止了.从本节开始将讲解各种常用控件的用法.常用控件主要包括:静态文本框.编辑框.单选按钮.复选框.分组框.列表框.组合框.图片控 ...
Android中常用控件及属性
在之前的博客为大家带来了很多关于Android和jsp的介绍,本篇将为大家带来,关于Andriod中常用控件及属性的使用方法,目的方便大家遗忘时,及时复习参考.好了废话不多讲,现在开始我们本篇内容的介 ...
DevExpress winform XtraEditor常用控件
最近在公司里面开始使用DevExpress winform的第三方控件进行开发和维护,这里整理一些常用控件的资料以便于后续查看 ComboBoxEdit 这个控件和winform自带的控件差不多,使用 ...
五、Android学习第四天补充——Android的常用控件（转）
(转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 五.Android学习第四天补充——Android的常用控件熟悉常用的A ...

随机推荐

Mysql date,datetime的区别以及相互转换
参考:https://blog.csdn.net/a3025056/article/details/62885104/ 在数据库中一直有这三个时间类型有点搞不太清楚. 今天就来说一下之间的区别,其实是 ...
MVC 中url-pattern配置为"/"和"/*"的区别
首先大家都知道"/*"可以匹配所有url,包括带扩展名的,一般只用在过滤器上. 而"/"很多人理解成不能拦截带扩展名的,这种理解是错误的!它其实也能拦截“.js ...
python中安装并使用redis
数据缓存系统:1:mongodb:是直接持久化,直接存储于硬盘的缓存系统2:redis: 半持久化,存储于内存和硬盘3:memcache:数据只能存储在内存里的缓存系统 redis是一个key-val ...
[13]Windows 内核情景分析 --- 网络通信
典型的基于tcpip协议套接字方式的网络通信模块层次: 应用程序 socket api WS2_32.dll socket irp Afd.sys tdi irp Tcpip.sys 回调函数接口各 ...
09 查找列表中元素，移除每个元素的空格，并查找以a或A开头并且以c结尾的所有元素
li = ["alex"," aric","Alex","Tony","rain"]for i in ...
【转】python3实现自动化框架robotframework
由于python2只更新到2020年,python3是未来的主流,为了适应技术的变化python3实现robotframework是迟早的事 1.下载最新版本的python3.7,可根据自己电脑的位数 ...
cocos 搭建安卓环境
http://blog.csdn.net/yiye3376/article/details/42219889
Spark学习之路（七）Spark 运行流程
一.Spark中的基本概念 (1)Application:表示你的应用程序 (2)Driver:表示main()函数,创建SparkContext.由SparkContext负责与ClusterMan ...
浏览器页面请求js、css大文件处理
当页面引用一个比较大的js和css文件时,会出现较大下载延迟,占用带宽的问题,如果一个应用里有很多这样的js或CSS文件,那么就需要优化了. 比如ext-all.js有1.4M,页面引用这个文件,正常 ...
SLAM学习笔记 - 视觉SLAM方法资源汇总
工具类: ros框架 linux系列教程 vim Eigen Eigen快速入门 Pangolin Pangolin安装与使用数据集: TUM 数据格式提供pyt ...

QML常用控件

QML常用控件的更多相关文章

随机推荐

热门专题