devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

QT Quick（QML）学习笔记1_qml rectangle scrollview

作者：小丑西瓜9 | 2024-02-20 00:00:52

赞

踩

qml rectangle scrollview

1、添加网络模块 

目的：是为了使得Image能够加载到http或https（https的访问强查看：https://blog.csdn.net/wtl1992/article/details/110401820）

2、QT QML的Hello，world

  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3.  
  4. Window {
  5.     visible: true
  6.     width: 640
  7.     height: 480
  8.     title: qsTr("Hello World")
  9.  
  10.     Rectangle{
  11.         id: rect
  12.         width: parent.width / 2
  13.         height: parent.height / 2
  14.         color: "#FF0000"
  15.         anchors.centerIn: parent
  16.     }
  17. }

3、Image

  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3.  
  4. Window {
  5.     visible: true
  6.     width: 640
  7.     height: 480
  8.     title: qsTr("Hello World")
  9.  
  10.     Rectangle{
  11.         id: rect
  12.         width: parent.width / 2
  13.         height: parent.height / 2
  14.         color: "#FF0000"
  15.         anchors.centerIn: parent
  16.  
  17.         Image {
  18.             id: image
  19.             fillMode: Image.PreserveAspectFit
  20.             source: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2076212417,3005667226&fm=26&gp=0.jpg"
  21.         }
  22.     }
  23.  
  24. }

4、ScrollView

  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3. import QtQuick.Controls 2.14
  4. Window {
  5.     id: window
  6.     visible: true
  7.     width: 640
  8.     height: 480
  9.     title: qsTr("Hello World")
  10.  
  11.     //构造12个Rectangle
  12.     ScrollView{
  13.         id: scrollView
  14.         width: window.width
  15.         height: window.height
  16.         ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
  17.         ScrollBar.vertical.policy: ScrollBar.AlwaysOn
  18.         Flow{
  19.             width: scrollView.width
  20.             anchors.margins: 4
  21.             spacing: 10
  22.             Repeater{
  23.                 model: 12
  24.                 Rectangle{
  25.                     width: 200
  26.                     height: 200
  27.                     color: "blue"
  28.                 }
  29.             }
  30.         }
  31.     }
  32.  
  33. }

  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3. import QtQuick.Controls 2.14
  4. Window {
  5.     id: window
  6.     visible: true
  7.     width: 640
  8.     height: 480
  9.     title: qsTr("Hello World")
  10.  
  11.     //构造12个Rectangle
  12.     ScrollView{
  13.         id: scrollView
  14.         width: window.width
  15.         height: window.height
  16.         ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
  17.         ScrollBar.vertical.policy: ScrollBar.AlwaysOn
  18.         Flow{
  19.             width: scrollView.width
  20.             anchors.margins: 4
  21.             spacing: 10
  22.             Repeater{
  23.                 model: 12
  24.                 Image{
  25.                     width: 200
  26.                     fillMode: Image.PreserveAspectFit
  27.                     source: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3353166494,2700282750&fm=26&gp=0.jpg"
  28.                 }
  29.             }
  30.         }
  31.     }
  32.  
  33. }

5、自定义组件（Rectangle+TextInput）

TextInput:

MTextInput.qml：

  1. import QtQuick 2.0
  2.  
  3. Rectangle{
  4.     id: rect
  5.  
  6.     property int textInputWidth: 200
  7.     property int textInputHeight: 30
  8.     property string textInputColor: qsTr("#000000")
  9.     property string background: qsTr("#CCCCCC")
  10.     property string fontFamily: qsTr("微软雅黑")
  11.     property int fontSize: 20
  12.     property int borderWidth: 1
  13.     property string borderColor: qsTr("#000000")
  14.  
  15.     property alias anchorBottom: rect.bottom
  16.     property alias anchorLeft: rect.left
  17.     property alias textInputText: textinput.text
  18.  
  19.  
  20.     signal textchanged
  21.  
  22.     width: textInputWidth
  23.     height: textInputHeight
  24.     color: background
  25.     border.width: borderWidth
  26.     border.color: borderColor
  27.     anchors.centerIn: parent
  28.  
  29.     TextInput{
  30.         id: textinput
  31.         width: textInputWidth
  32.         height: textInputHeight
  33.         color: textInputColor
  34.         font.family: fontFamily
  35.         font.pixelSize: fontSize
  36.         verticalAlignment: TextInput.AlignVCenter
  37.         onTextChanged: {
  38.             rect.textchanged();
  39.         }
  40.     }
  41. }

main.qml：

  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3. import QtQuick.Controls 2.14
  4. Window {
  5.     id: window
  6.     visible: true
  7.     width: 640
  8.     height: 480
  9.     title: qsTr("Hello World")
  10.  
  11.     MTextInput{
  12.         id: mtextinput
  13.         textInputColor: qsTr("#FF0000")
  14.         onTextchanged: {
  15.             text.text = mtextinput.textInputText;
  16.         }
  17.     }
  18.  
  19.     Rectangle{
  20.         id: rect
  21.         color: qsTr("#FF0000")
  22.         width: mtextinput.textInputWidth
  23.         height: mtextinput.textInputHeight
  24.         anchors.top: mtextinput.anchorBottom
  25.         anchors.left: mtextinput.anchorLeft
  26.         anchors.topMargin: 10
  27.         Text{
  28.             id: text
  29.             width: parent.width
  30.             height: parent.height
  31.         }
  32.     }
  33.  
  34. }

6、Keys

  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3. import QtQuick.Controls 2.14
  4. Window {
  5.     id: window
  6.     visible: true
  7.     width: 640
  8.     height: 480
  9.     title: qsTr("Hello World")
  10.  
  11.     Rectangle{
  12.         id: rect
  13.         width: parent.width
  14.         height: parent.height
  15.         color: qsTr("yellow")
  16.         anchors.centerIn: window
  17.         focus: true
  18.  
  19.         Keys.onPressed: {
  20.             console.log(event.key);
  21.         }
  22.     }
  23.  
  24. }

7、MouseArea

  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3. import QtQuick.Controls 2.14
  4. Window {
  5.     id: window
  6.     visible: true
  7.     width: 640
  8.     height: 480
  9.     title: qsTr("Hello World")
  10.  
  11.     Rectangle{
  12.         id: rect
  13.         width: parent.width / 2
  14.         height: parent.height / 2
  15.         color: qsTr("yellow")
  16.         anchors.centerIn: parent
  17.         focus: true
  18.  
  19.         MouseArea{
  20.             id: mouseArea
  21.             width: parent.width
  22.             height: parent.height
  23.             hoverEnabled: true
  24.             onEntered: {
  25.                 console.log("鼠标进入");
  26.                 rect.color = "blue";
  27.             }
  28.             onExited: {
  29.                 console.log("鼠标离开");
  30.                 rect.color = "yellow";
  31.             }
  32.         }
  33.     }
  34.  
  35.  
  36.  
  37. }

8、QML请求数据

Ajax.js：

  1. // GET
  2. function get(url, success, failure)
  3. {
  4.     let xhr = new XMLHttpRequest;
  5.     xhr.open("GET", url);
  6.     xhr.onreadystatechange = function() {
  7.         handleResponse(xhr, success, failure);
  8.     }
  9.     xhr.send();
  10. }
  11.  
  12. // POST
  13. function post(url, arg, success, failure)
  14. {
  15.     let xhr = new XMLHttpRequest;
  16.     xhr.open("POST", url);
  17.     xhr.setRequestHeader("Content-Length", arg.length);
  18.     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");  //用POST的时候一定要有这句
  19.     xhr.onreadystatechange = function() {
  20.         handleResponse(xhr, success, failure);
  21.     }
  22.     xhr.send(arg);
  23. }
  24.  
  25. // 处理返回值
  26. function handleResponse(xhr, success, failure){
  27.     if (xhr.readyState === XMLHttpRequest.DONE) {
  28.         if (xhr.status ===  200){
  29.             if (success !== null && success !== undefined)
  30.             {
  31.                 let result = xhr.responseText;
  32.                 try{
  33.                     success(result, JSON.parse(result));
  34.                 }catch(e){
  35.                     success(result, {});
  36.                 }
  37.             }
  38.         }
  39.         else{
  40.             if (failure !== null && failure !== undefined)
  41.                 failure(xhr.responseText, xhr.status);
  42.         }
  43.     }
  44. }

Component的加载事件：

  1. Component.onCompleted: {
  2.         Ajax.get("https://ljxwtl.cn/getPagingNewZongYis?pageIndex=1",
  3.                  function(result, data){
  4.                      console.log(JSON.stringify(data));
  5.                      listView.model = data;
  6.                  },function(){
  7.  
  8.                  });
  9.     }

将Ajax请求的数据绑定到ListView上

  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3. import QtQuick.Controls 2.14
  4. import QtQml.Models 2.14
  5. import "javascript/Ajax.js" as Ajax
  6. Window {
  7.     id: window
  8.     visible: true
  9.     width: 640
  10.     height: 480
  11.     title: qsTr("Hello World")
  12.  
  13.     ListView{
  14.         id: listView
  15.         width: parent.width - 40
  16.         height: parent.height
  17.         spacing: 10
  18.         anchors.centerIn: parent
  19.         delegate: Rectangle{
  20.             width: parent.width
  21.             height: 30
  22.             color: "yellow"
  23.             Text{
  24.                 width: parent.width
  25.                 height: 30
  26.                 text: modelData.title
  27.                 horizontalAlignment: Text.AlignHCenter
  28.                 verticalAlignment: Text.AlignVCenter
  29.                 font.family: "微软雅黑"
  30.                 font.pixelSize: 20
  31.             }
  32.         }
  33.     }
  34.  
  35.  
  36.     Component.onCompleted: {
  37.         Ajax.get("https://ljxwtl.cn/getPagingNewZongYis?pageIndex=1",
  38.                  function(result, data){
  39.                      console.log(JSON.stringify(data));
  40.                      listView.model = data;
  41.                  },function(){
  42.  
  43.                  });
  44.     }
  45. }

外部嵌套ScrollView：

  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3. import QtQuick.Controls 2.14
  4. import QtQml.Models 2.14
  5. import "javascript/Ajax.js" as Ajax
  6. Window {
  7.     id: window
  8.     visible: true
  9.     width: 640
  10.     height: 480
  11.     title: qsTr("Hello World")
  12.  
  13.     ScrollView{
  14.         id: scrollView
  15.  
  16.         width: parent.width
  17.         height: parent.height
  18.  
  19.         GridView{
  20.             id:gridView
  21.  
  22.             width: parent.width - 40
  23.  
  24.             cellWidth: 300
  25.             cellHeight: 360
  26.             delegate: Rectangle{
  27.                 width: 300
  28.                 height: 360
  29.  
  30.                 border.width: 1
  31.                 border.color: "#000000"
  32.  
  33.  
  34.                 Text{
  35.                     id: text
  36.                     width: parent.width
  37.                     height: 50
  38.                     text: modelData.fromPageTitle
  39.                     horizontalAlignment: Text.AlignHCenter
  40.                     verticalAlignment: Text.AlignVCenter
  41.                     font.family: "微软雅黑"
  42.                     font.pixelSize: 16
  43.                     wrapMode: TextEdit.WrapAnywhere
  44.                 }
  45.  
  46.                 Image{
  47.                     width: parent.width
  48.                     height: parent.height - 50
  49.                     source: modelData.middleURL
  50.                     fillMode: Image.PreserveAspectFit
  51.                     anchors.top: text.bottom
  52.                     horizontalAlignment: Image.AlignHCenter
  53.                 }
  54.  
  55.             }
  56.         }
  57.     }
  58.  
  59.  
  60.     Component.onCompleted: {
  61.         Ajax.get("https://ljxwtl.cn/getAllMatchingImages?keyword=%E7%BE%8E%E5%A5%B3&pageIndex=1&pageSize=60",
  62.                  function(result, data){
  63.                      console.log(JSON.stringify(data));
  64.                      gridView.model = data;
  65.                  },function(){
  66.  
  67.                  });
  68.     }
  69. }

ScrollView里的ScrollBar的事件监听：

  1. ScrollBar.vertical.onPositionChanged: {
  2.             let scrollBarHeight = ScrollBar.vertical.visualSize * 1000;
  3.             let scrollBarPosition = ScrollBar.vertical.position * 1000;
  4.  
  5.             if (scrollBarPosition + scrollBarHeight > scrollView.height * 0.9){
  6.                 Ajax.get("https://ljxwtl.cn/getAllMatchingImages?keyword=%E7%BE%8E%E5%A5%B3&pageIndex=1&pageSize=60",
  7.                          function(result, data){
  8.                              console.log("JSON.stringify(data)");
  9.                              //gridView.model = data;
  10.                          },function(){
  11.  
  12.                          });
  13.             }
  14.         }
  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3. import QtQuick.Controls 2.14
  4. import QtQml.Models 2.14
  5. import "javascript/Ajax.js" as Ajax
  6. Window {
  7.     id: window
  8.     visible: true
  9.     width: 640
  10.     height: 480
  11.     title: qsTr("Hello World")
  12.  
  13.     ScrollView{
  14.         id: scrollView
  15.  
  16.         width: parent.width
  17.         height: parent.height
  18.  
  19.         //Component.onCompleted: ScrollBar.vertical.position = 1.0
  20.         ScrollBar.vertical.onPositionChanged: {
  21.             let scrollBarHeight = ScrollBar.vertical.visualSize * 1000;
  22.             let scrollBarPosition = ScrollBar.vertical.position * 1000;
  23.  
  24.             if (scrollBarPosition + scrollBarHeight > scrollView.height * 0.9){
  25.                 Ajax.get("https://ljxwtl.cn/getAllMatchingImages?keyword=%E7%BE%8E%E5%A5%B3&pageIndex=1&pageSize=60",
  26.                          function(result, data){
  27.                              console.log("JSON.stringify(data)");
  28.                              //gridView.model = data;
  29.                          },function(){
  30.  
  31.                          });
  32.             }
  33.         }
  34.  
  35.  
  36.         GridView{
  37.             id:gridView
  38.  
  39.             width: parent.width - 40
  40.  
  41.             cellWidth: 300
  42.             cellHeight: 360
  43.             delegate: Rectangle{
  44.                 width: 300
  45.                 height: 360
  46.  
  47.                 border.width: 1
  48.                 border.color: "#000000"
  49.  
  50.  
  51.                 Text{
  52.                     id: text
  53.                     width: parent.width
  54.                     height: 50
  55.                     text: modelData.fromPageTitle
  56.                     horizontalAlignment: Text.AlignHCenter
  57.                     verticalAlignment: Text.AlignVCenter
  58.                     font.family: "微软雅黑"
  59.                     font.pixelSize: 16
  60.                     wrapMode: TextEdit.WrapAnywhere
  61.                 }
  62.  
  63.                 Image{
  64.                     width: parent.width
  65.                     height: parent.height - 50
  66.                     source: modelData.middleURL
  67.                     fillMode: Image.PreserveAspectFit
  68.                     anchors.top: text.bottom
  69.                     horizontalAlignment: Image.AlignHCenter
  70.                 }
  71.  
  72.             }
  73.         }
  74.     }
  75.  
  76.  
  77.     Component.onCompleted: {
  78.         Ajax.get("https://ljxwtl.cn/getAllMatchingImages?keyword=%E7%BE%8E%E5%A5%B3&pageIndex=1&pageSize=60",
  79.                  function(result, data){
  80.                      console.log(JSON.stringify(data));
  81.                      gridView.model = data;
  82.                  },function(){
  83.  
  84.                  });
  85.     }
  86. }

动态添加新数据：

  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3. import QtQuick.Controls 2.14
  4. import QtQml.Models 2.14
  5. import "javascript/Ajax.js" as Ajax
  6. Window {
  7.     id: window
  8.     visible: true
  9.     width: 640
  10.     height: 480
  11.     title: qsTr("Hello World")
  12.  
  13.     function setTimeout(callback,timeout){
  14.         let timer = Qt.createQmlObject("import QtQuick 2.14; Timer {}", window);
  15.         timer.interval = timeout;
  16.         timer.repeat = false;
  17.         timer.triggered.connect(callback);
  18.         timer.start();
  19.     }
  20.     
  21.     function setInterval(callback,timeout){
  22.         let timer = Qt.createQmlObject("import QtQuick 2.14; Timer {}", window);
  23.         timer.interval = timeout;
  24.         timer.repeat = true;
  25.         timer.triggered.connect(callback);
  26.         timer.start();
  27.     }
  28.  
  29.  
  30.     ListModel{
  31.         id:listModel
  32.     }
  33.  
  34.  
  35.     ScrollView{
  36.         id: scrollView
  37.  
  38.         width: parent.width
  39.         height: parent.height
  40.  
  41.         property int pageIndex: 2
  42.         property bool flag: true
  43.  
  44.         //Component.onCompleted: ScrollBar.vertical.position = 1.0
  45.         ScrollBar.vertical.onPositionChanged: {
  46.             let scrollBarSize = ScrollBar.vertical.size * 1000;
  47.             let scrollBarHeight = ScrollBar.vertical.height;
  48.             let scrollBarPosition = ScrollBar.vertical.position;
  49.  
  50. //            console.log(scrollBarHeight * scrollBarPosition + scrollBarSize);
  51. //            console.log(scrollView.height);
  52. //            console.log(flag);
  53.             if (scrollBarHeight * scrollBarPosition + scrollBarSize > scrollView.height * 0.9 && flag){
  54.                 flag = false;
  55.                 pageIndex ++;
  56.                 Ajax.get("https://ljxwtl.cn/getAllMatchingImages?keyword=%E7%BE%8E%E5%A5%B3&pageIndex=" + pageIndex + "&pageSize=60",
  57.                          function(result, data){
  58.                              for (let i=0;i<data.length;i++){
  59.                                  listModel.append(data[i]);
  60.                              }
  61.  
  62.                              setTimeout(function(){
  63.                                  flag = true;
  64.                                  console.log("--------------------------------")
  65.                              },1000);
  66.                          },function(){
  67.  
  68.                          });
  69.             }
  70.         }
  71.  
  72.  
  73.         GridView{
  74.             id:gridView
  75.  
  76.             width: parent.width - 40
  77.  
  78.             cellWidth: 300
  79.             cellHeight: 360
  80.  
  81.             model: listModel
  82.  
  83.             delegate: Rectangle{
  84.                 width: 300
  85.                 height: 360
  86.  
  87.                 border.width: 1
  88.                 border.color: "#000000"
  89.  
  90.  
  91.                 Text{
  92.                     id: text
  93.                     width: parent.width
  94.                     height: 50
  95.                     text: fromPageTitle
  96.                     horizontalAlignment: Text.AlignHCenter
  97.                     verticalAlignment: Text.AlignVCenter
  98.                     font.family: "微软雅黑"
  99.                     font.pixelSize: 16
  100.                     wrapMode: TextEdit.WrapAnywhere
  101.                 }
  102.  
  103.                 Image{
  104.                     width: parent.width
  105.                     height: parent.height - 50
  106.                     source: middleURL
  107.                     fillMode: Image.PreserveAspectFit
  108.                     anchors.top: text.bottom
  109.                     horizontalAlignment: Image.AlignHCenter
  110.                 }
  111.  
  112.             }
  113.         }
  114.     }
  115.  
  116.  
  117.     Component.onCompleted: {
  118.         Ajax.get("https://ljxwtl.cn/getAllMatchingImages?keyword=%E7%BE%8E%E5%A5%B3&pageIndex=1&pageSize=60",
  119.                  function(result, data){
  120.                      console.log(JSON.stringify(data));
  121.                      for (let i=0;i<data.length;i++){
  122.                          listModel.append(data[i]);
  123.                      }
  124.                  },function(){
  125.  
  126.                  });
  127.     }
  128. }

9、QML与C++交互

  1. //设置rootContext的变量
  2.     QQmlContext * context = engine.rootContext();
  3.     context->setContextProperty("name","王天龙");
  1. #include <QGuiApplication>
  2. #include <QQmlApplicationEngine>
  3. #include <QQmlContext>
  4. int main(int argc, char *argv[])
  5. {
  6.     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
  7.  
  8.     QGuiApplication app(argc, argv);
  9.  
  10.     QQmlApplicationEngine engine;
  11.  
  12.     //设置rootContext的变量
  13.     QQmlContext * context = engine.rootContext();
  14.     context->setContextProperty("name","王天龙");
  15.  
  16.     const QUrl url(QStringLiteral("qrc:/main.qml"));
  17.     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
  18.                      &app, [url](QObject *obj, const QUrl &objUrl) {
  19.         if (!obj && url == objUrl)
  20.             QCoreApplication::exit(-1);
  21.     }, Qt::QueuedConnection);
  22.     engine.load(url);
  23.  
  24.     return app.exec();
  25. }
  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3.  
  4. Window {
  5.     visible: true
  6.     width: 640
  7.     height: 480
  8.     title: qsTr("Hello World")
  9.  
  10.     Rectangle{
  11.         id: rect
  12.         width: parent.width / 2
  13.         height: parent.height / 2
  14.         color: "#000000"
  15.  
  16.         anchors.centerIn: parent
  17.  
  18.         Text{
  19.             id: text
  20.             horizontalAlignment: Text.AlignHCenter
  21.             verticalAlignment: Text.AlignVCenter
  22.  
  23.             anchors.centerIn: parent
  24.             text: name
  25.             color: "#FFFFFF"
  26.             font.pixelSize: 18
  27.             font.family: "微软雅黑"
  28.         }
  29.     }
  30. }

10、Loader的使用

10.1、source属性

Rect.qml：

  1. import QtQuick 2.14
  2.  
  3. Rectangle{
  4.     id: rect
  5.     width: parent.width / 2
  6.     height: parent.height / 2
  7.     color: "#000000"
  8.  
  9.     anchors.centerIn: parent
  10.  
  11.     Text{
  12.         id: text
  13.         horizontalAlignment: Text.AlignHCenter
  14.         verticalAlignment: Text.AlignVCenter
  15.  
  16.         anchors.centerIn: parent
  17.         text: name
  18.         color: "#FFFFFF"
  19.         font.pixelSize: 18
  20.         font.family: "微软雅黑"
  21.     }
  22. }
  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3.  
  4. Window {
  5.     visible: true
  6.     width: 640
  7.     height: 480
  8.     title: qsTr("Hello World")
  9.  
  10.     Loader{
  11.         id: loader
  12.         anchors.fill: parent
  13.         source: Qt.resolvedUrl("Rect.qml")
  14.     }
  15. }

10.2、sourceComponent

10.2.1、在同一个qml文件里定义

  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3.  
  4. Window {
  5.     visible: true
  6.     width: 640
  7.     height: 480
  8.     title: qsTr("Hello World")
  9.  
  10.     Loader{
  11.         id: loader
  12.         anchors.fill: parent
  13.         sourceComponent: component
  14.     }
  15.  
  16.  
  17.     Component{
  18.         id: component
  19.         Rectangle{
  20.             id: rect
  21.             width: parent.width / 2
  22.             height: parent.height / 2
  23.             color: "#000000"
  24.  
  25.             anchors.centerIn: parent
  26.  
  27.             Text{
  28.                 id: text
  29.                 horizontalAlignment: Text.AlignHCenter
  30.                 verticalAlignment: Text.AlignVCenter
  31.  
  32.                 anchors.centerIn: parent
  33.                 text: name
  34.                 color: "#FFFFFF"
  35.                 font.pixelSize: 18
  36.                 font.family: "微软雅黑"
  37.             }
  38.         }
  39.     }
  40. }

10.2.2、在不同文件里加载

Component.qml：

  1. import QtQuick 2.14
  2.  
  3. Rectangle{
  4.     id: rect
  5.     width: 300
  6.     height: 300
  7.     color: "#000000"
  8.  
  9.     Text{
  10.         id: text
  11.         horizontalAlignment: Text.AlignHCenter
  12.         verticalAlignment: Text.AlignVCenter
  13.  
  14.         anchors.centerIn: parent
  15.         text: name
  16.         color: "#FFFFFF"
  17.         font.pixelSize: 18
  18.         font.family: "微软雅黑"
  19.     }
  20. }
  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3.  
  4. Window {
  5.     visible: true
  6.     width: 640
  7.     height: 480
  8.     title: qsTr("Hello World")
  9.  
  10.     property var component
  11.  
  12.     Loader{
  13.         id: loader
  14.         anchors.fill: parent
  15.         sourceComponent: component
  16.     }
  17.  
  18.     Component.onCompleted: {
  19.         component = Qt.createComponent("Component.qml");
  20.         console.log(component)
  21.     }
  22. }

10.3、Qt.createComponent("Component.qml")

  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3.  
  4. Window {
  5.     visible: true
  6.     width: 640
  7.     height: 480
  8.     title: qsTr("Hello World")
  9.  
  10.     property var component
  11.  
  12.     Loader{
  13.         id: loader
  14.         anchors.fill: parent
  15.         sourceComponent: component
  16.     }
  17.  
  18.     Component.onCompleted: {
  19.         component = Qt.createComponent("Component.qml");
  20.         console.log(component)
  21.     }
  22. }

10.4、Qt.createQmlObject("import QtQuick 2.14;Component{Rectangle{color:'blue';width:200;height:200}}",window);

  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3.  
  4. Window {
  5.     id: window
  6.     visible: true
  7.     width: 640
  8.     height: 480
  9.     title: qsTr("Hello World")
  10.  
  11.     property var component
  12.  
  13.     Loader{
  14.         id: loader
  15.         anchors.fill: parent
  16.         sourceComponent: component
  17.     }
  18.  
  19.     Component.onCompleted: {
  20.         component = Qt.createQmlObject("import QtQuick 2.14;Component{Rectangle{color:'blue';width:200;height:200}}",window);
  21.         console.log(component)
  22.     }
  23. }

11、Animation动画

11.1、NumberAnimation

  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3.  
  4. Window {
  5.     id: window
  6.     visible: true
  7.     width: 640
  8.     height: 480
  9.     title: qsTr("Hello World")
  10.  
  11.     property var component
  12.  
  13.     Rectangle{
  14.         id: rect
  15.         width: parent.width / 2
  16.         height: parent.height / 2
  17.         color: "#000000"
  18.  
  19.         Text{
  20.             id: text
  21.             horizontalAlignment: Text.AlignHCenter
  22.             verticalAlignment: Text.AlignVCenter
  23.  
  24.             anchors.centerIn: parent
  25.             text: name
  26.             color: "#FFFFFF"
  27.             font.pixelSize: 18
  28.             font.family: "微软雅黑"
  29.         }
  30.  
  31.         NumberAnimation{
  32.             id: numberAnimation
  33.             target: rect
  34.             property: "scale"
  35.             from: 0
  36.             to: 1
  37.             duration: 1000
  38.             running: true
  39.         }
  40.     }
  41. }

11.2、PropertyAnimation

  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3.  
  4. Window {
  5.     id: window
  6.     visible: true
  7.     width: 640
  8.     height: 480
  9.     title: qsTr("Hello World")
  10.  
  11.     property var component
  12.  
  13.     Rectangle{
  14.         id: rect
  15.         width: parent.width / 2
  16.         height: parent.height / 2
  17.         color: "#000000"
  18.  
  19.         Text{
  20.             id: text
  21.             horizontalAlignment: Text.AlignHCenter
  22.             verticalAlignment: Text.AlignVCenter
  23.  
  24.             anchors.centerIn: parent
  25.             text: name
  26.             color: "#FFFFFF"
  27.             font.pixelSize: 18
  28.             font.family: "微软雅黑"
  29.         }
  30.  
  31.         PropertyAnimation {
  32.             id: numberAnimation
  33.             target: rect
  34.             property: "scale"
  35.             from: 0
  36.             to: 1
  37.             duration: 1000
  38.             running: true
  39.         }
  40.     }
  41. }

11.3、SequentialAnimation

  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3.  
  4. Window {
  5.     id: window
  6.     visible: true
  7.     width: 640
  8.     height: 480
  9.     title: qsTr("Hello World")
  10.  
  11.     property var component
  12.  
  13.     Rectangle{
  14.         id: rect
  15.         width: parent.width / 2
  16.         height: parent.height / 2
  17.         color: "#000000"
  18.  
  19.         Text{
  20.             id: text
  21.             horizontalAlignment: Text.AlignHCenter
  22.             verticalAlignment: Text.AlignVCenter
  23.  
  24.             anchors.centerIn: parent
  25.             text: name
  26.             color: "#FFFFFF"
  27.             font.pixelSize: 18
  28.             font.family: "微软雅黑"
  29.         }
  30.  
  31.         SequentialAnimation{
  32.             running: true
  33.             PropertyAnimation {
  34.                 id: numberAnimation1
  35.                 target: rect
  36.                 property: "scale"
  37.                 from: 0
  38.                 to: 1
  39.                 duration: 1000
  40.             }
  41.  
  42.             PropertyAnimation {
  43.                 id: numberAnimation2
  44.                 target: rect
  45.                 property: "opacity"
  46.                 from: 0
  47.                 to: 1
  48.                 duration: 1000
  49.             }
  50.         }
  51.     }
  52. }

11.4、ParallelAnimation

  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3.  
  4. Window {
  5.     id: window
  6.     visible: true
  7.     width: 640
  8.     height: 480
  9.     title: qsTr("Hello World")
  10.  
  11.     property var component
  12.  
  13.     Rectangle{
  14.         id: rect
  15.         width: parent.width / 2
  16.         height: parent.height / 2
  17.         color: "#000000"
  18.  
  19.         Text{
  20.             id: text
  21.             horizontalAlignment: Text.AlignHCenter
  22.             verticalAlignment: Text.AlignVCenter
  23.  
  24.             anchors.centerIn: parent
  25.             text: name
  26.             color: "#FFFFFF"
  27.             font.pixelSize: 18
  28.             font.family: "微软雅黑"
  29.         }
  30.  
  31.         ParallelAnimation{
  32.             running: true
  33.             PropertyAnimation {
  34.                 id: numberAnimation1
  35.                 target: rect
  36.                 property: "scale"
  37.                 from: 0
  38.                 to: 1
  39.                 duration: 1000
  40.             }
  41.  
  42.             PropertyAnimation {
  43.                 id: numberAnimation2
  44.                 target: rect
  45.                 property: "opacity"
  46.                 from: 0
  47.                 to: 1
  48.                 duration: 1000
  49.             }
  50.         }
  51.     }
  52. }

12、设置窗口为无边框

flags: Qt.FramelessWindowHint

  1. import QtQuick 2.14
  2. import QtQuick.Window 2.14
  3.  
  4. Window {
  5.     id: window
  6.     visible: true
  7.     width: 640
  8.     height: 480
  9.     title: qsTr("Hello World")
  10.     
  11.     flags: Qt.FramelessWindowHint
  12.  
  13.     property var component
  14.  
  15.     Rectangle{
  16.         id: rect
  17.         width: parent.width / 2
  18.         height: parent.height / 2
  19.         color: "#000000"
  20.  
  21.         Text{
  22.             id: text
  23.             horizontalAlignment: Text.AlignHCenter
  24.             verticalAlignment: Text.AlignVCenter
  25.  
  26.             anchors.centerIn: parent
  27.             text: name
  28.             color: "#FFFFFF"
  29.             font.pixelSize: 18
  30.             font.family: "微软雅黑"
  31.         }
  32.  
  33.         ParallelAnimation{
  34.             running: true
  35.             PropertyAnimation {
  36.                 id: numberAnimation1
  37.                 target: rect
  38.                 property: "scale"
  39.                 from: 0
  40.                 to: 1
  41.                 duration: 1000
  42.             }
  43.  
  44.             PropertyAnimation {
  45.                 id: numberAnimation2
  46.                 target: rect
  47.                 property: "opacity"
  48.                 from: 0
  49.                 to: 1
  50.                 duration: 1000
  51.             }
  52.         }
  53.     }
  54. }

13、背景动画

  1. Rectangle{
  2.         id: rect
  3.         width: parent.width / 2
  4.         height: parent.height / 2
  5.         color: "blue"
  6.         anchors.centerIn: parent
  7.  
  8.         PropertyAnimation{
  9.             id: animation
  10.             target: rect
  11.             property: "color"
  12.             from: "blue"
  13.             to: "yellow"
  14.             duration: 2000
  15.             running: true
  16.         }
  17.     }

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/117405
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号