QtQuick 技巧

QtQuick 技巧

dpi

  property real dpi: Screen.pixelDensity.toFixed(2)

常用的 qmlproject

/* File generated by Qt Creator */

import QmlProject 1.1

Project {
    mainFile: "main.qml"

    /* Include .qml, .js, and image files from current directory and subdirectories */
    QmlFiles {
        directory: "."
    }
    JavaScriptFiles {
        directory: "."
    }
    ImageFiles {
        directory: "."
    }
    Files {
        directory: "."
        filter: "qmldir"
    }
    Files {
        directory: "."
        filter: "*.md"
    }

    // for Qt3D
    Files {
        directory: "."
        filter: "*.vert"
    }
    Files {
        directory: "."
        filter: "*.frag"
    }
    Files {
        directory: "."
        filter: "*.obj"
    }
    Files {
        directory: "."
        filter: "*.3ds"
    }
    /* List of plugin directories passed to QML runtime */
    // importPaths: [ "../exampleplugin" ]
}

测时函数

        function longtimeRunning(callback) {
            var timeStart = Date.now();
            callback();
            return timeEnd - Date.now();
        }

openUrlExternally

Qt.openUrlExternally("tel:10086")
Qt.openUrlExternally("sms:10086")
Qt.openUrlExternally("http://www.baidu.com")
Qt.openUrlExternally("mailto:[email protected]")

ios — 调用系统”设置”里的功能(转)

安装后第一次运行软件时，系统会弹出提示用户是否允许软件获取当前位置，如果用户不允许的话，之后运行时系统不会在弹出提示设置，这点很不方便，有个解决办法是给用户一个选项，调出iphone中“设置”定位服务选项，由用户手动设置，调用系统“设置”中定位服务相关代码如下：

-(IBAction)btnSetting:(id)sender{ 
    NSURL*url=[NSURL URLWithString:@"prefs:root=LOCATION_SERVICES"]; 
    [[UIApplication sharedApplication] openURL:url]; 
} 

还有其他调用系统设置的命令：

[font=]
About — prefs:root=General&path=About

Accessibility — prefs:root=General&path=ACCESSIBILITY

Airplane Mode On — prefs:root=AIRPLANE_MODE

Auto-Lock — prefs:root=General&path=AUTOLOCK

Brightness — prefs:root=Brightness

Bluetooth — prefs:root=General&path=Bluetooth

Date & Time — prefs:root=General&path=DATE_AND_TIME

FaceTime — prefs:root=FACETIME

General — prefs:root=General

Keyboard — prefs:root=General&path=Keyboard

iCloud — prefs:root=CASTLE

iCloud Storage & Backup — prefs:root=CASTLE&path=STORAGE_AND_BACKUP

International — prefs:root=General&path=INTERNATIONAL

Location Services — prefs:root=LOCATION_SERVICES

Music — prefs:root=MUSIC

Music Equalizer — prefs:root=MUSIC&path=EQ

Music Volume Limit — prefs:root=MUSIC&path=VolumeLimit

Network — prefs:root=General&path=Network

Nike + iPod — prefs:root=NIKE_PLUS_IPOD

Notes — prefs:root=NOTES

Notification — prefs:root=NOTIFICATIONS_ID

Phone — prefs:root=Phone

Photos — prefs:root=Photos

Profile — prefs:root=General&path=ManagedConfigurationList

Reset — prefs:root=General&path=Reset

Safari — prefs:root=Safari

Siri — prefs:root=General&path=Assistant

Sounds — prefs:root=Sounds

Software Update — prefs:root=General&path=SOFTWARE_UPDATE_LINK

Store — prefs:root=STORE

Twitter — prefs:root=TWITTER

Usage — prefs:root=General&path=USAGE

VPN — prefs:root=General&path=Network/VPN

Wallpaper — prefs:root=Wallpaper

Wi-Fi — prefs:root=WIFI

以上，可以通过 QML 中的

Qt.openUrlExternally("prefs:root=WIFI");

打开。

原文链接

很好的 QML 的 transform示例

import QtQuick 1.0

Rectangle {
    id: splashText
    property string text: "Splash!"
    width: 440; height: 160
    property bool reverse: Math.random() > 0.5
    color: Qt.rgba(0.5+0.5*Math.random(), 0.2+0.4*Math.random(),
                   0.2+0.2*Math.random())
    transform: Rotation {
        origin.x: splashText.width/2
        origin.y: splashText.height/2
        property real value: Math.random()
        axis.x: Math.random() < 0.2 || value < 0.3
        axis.y: Math.random() < 0.2 || value >= 0.3 && value < 0.7
        axis.z: Math.random() < 0.2 || value >= 0.7
        SequentialAnimation on angle {
            loops: Animation.Infinite
            NumberAnimation {
                from: 0.0; to: reverse ? -20.0 : 20.0
                duration: 500; easing.type: Easing.InOutQuad
            }
            NumberAnimation {
                from: reverse ? -20.0 : 20.0; to: 0.0
                duration: 500; easing.type: Easing.InOutQuad
            }
        }
    }
    Repeater {
        model: 20
        Rectangle {
            height: Math.random()*parent.height
            width: 0.4*Math.random()*parent.width
            color: Qt.rgba(0.6+0.5*Math.random(), 0.4+0.4*Math.random(),
                           0.2+0.4*Math.random(), 0.5+0.5*Math.random())
            x: Math.random() > 0.3 ? Math.random()*parent.width - width/2 :
               Math.random()*width - width + (Math.random() > 0.5 ? parent.width : 0)
            y: Math.random()*parent.height - height/2
        }
    }
    Repeater {
        model: 5
        Text {
            text: splashText.text
            color: "white"
            font.pixelSize: 70+Math.random()*10
            anchors {
                centerIn: parent
                horizontalCenterOffset: 3*Math.random()
                verticalCenterOffset: 4*Math.random()
            }
        }
    }
}

很好的 QML 动画加载示例

Rectangle {
    id:contair
    width: rad * 2
    height: rad * 2
    color: backColor
    radius: 720

    property var run: true
    property var arc: 230
    property var backColor: "#00000000"
    property var arcColor: "#5f8aa4"
    property var fontColor: "#5f8aa4"
    property var borderColor: "#5f8aa4"
    property string txt: "Please Wait for a while."
    property string endText: "The project has been loaded."
    property var endWaitTime: 1200
    property var rad: 250

    property var arcWidth: 6
    Text {
        id:textInfo
        font.pixelSize: 16
        font.family: "微软雅黑"
        anchors.centerIn: parent
        color:fontColor
        state: "runningText"
        states:[
            State{
                name:"runningText"
                changes: [
                    PropertyChanges {
                        target: textInfo;
                        text : txt
                    }
                ]
            },
            State{
                name:"endingText"
                when:hideText.complete()
                changes: [
                    PropertyChanges {
                        target: textInfo;
                        text : endText
                    }
                ]
            }
        ]
    }
    onArcChanged: canvas.requestPaint();
    //结束动画
    onRunChanged:
        SequentialAnimation{
        NumberAnimation{
            id:hideText
            target: textInfo
            property: "opacity"
            to:0
            duration: 500
            onStopped: textInfo.state = "endingText"
            easing.type: Easing.InBack
        }
        NumberAnimation{
            target: textInfo
            property: "opacity"
            to:1
            duration: 500
            easing.type: Easing.OutBack
            onStopped: running.stop();
        }
        NumberAnimation {
            target: contair
            property: "endWaitTime"
            duration: endWaitTime
            to:0
        }
        ParallelAnimation{
        NumberAnimation {
            target: contair
            property: "scale"
            duration: 500
            to:0.5
            easing.type: Easing.InBack
        }
        NumberAnimation {
            target: contair
            property: "opacity"
            duration: 500
            to:0
            easing.type: Easing.InBack
        }
        onStopped: contair.destroy()
    }}

    //加载动画
    Component.onCompleted: ParallelAnimation{
        NumberAnimation {
            target: contair
            property: "scale"
            duration: 250
            from: 0.5
            to:1
            easing.type: Easing.OutBack
        }
        NumberAnimation {
            target: contair
            property: "opacity"
            duration: 250
            from:0.5
            to:1
            easing.type: Easing.OutBack
        }
        onStopped: running.start()

    }


    NumberAnimation{
        id: running
        target: canvas
        property: "rotation"
        duration: 2000
        to: 360
        easing.type: Easing.Linear
        onStopped: NumberAnimation {
            id: toZero
            target: canvas
            property: "rotation"
            duration: run != false ? 1 : 1000
            to:0
            easing.type: Easing.OutBack
            onStopped: if(run != false) running.start();
        }
    }
    MouseArea{
        anchors.fill: parent
        onClicked: run = false
    }

    Canvas{
        id: canvas
        anchors.fill: parent
        contextType: "2d"
        onPaint: {
            var ctx = getContext("2d");
            ctx.lineWidth = arcWidth
            ctx.strokeStyle = arcColor
            ctx.beginPath();
            ctx.arc(rad,rad,rad - arcWidth,Math.PI/180 * 270,Math.PI/180 * arc,false);
            ctx.stroke();
        }
    }
}

上诉代码为上海 Qt 开发群群友共享。

QML动态显示当前系统日期时间

import QtQuick 2.0

Item {
    width: 300
    height: 150

    //显示
    Text{
        id: textDateTime
        text: currentDateTime();

        anchors.centerIn: parent
    }

    //当前日期时间
    function currentDateTime(){
        return Qt.formatDateTime(new Date(), "yyyy-MM-dd hh:mm:ss.zzz ddd");
    }

    //定时器
    Timer{
        id: timer
        interval: 1 //间隔(单位毫秒):1000毫秒=1秒
        repeat: true //重复
        onTriggered:{
            textDateTime.text = currentDateTime();
        }
    }

    Component.onCompleted: {
        timer.start();
    }

}

/*
Text元素用来显示日期时间,
currentDateTime函数用来获取当前日期时间,
Timer元素用来定时刷新,实现动态呈现.
*/

QML动态显示当前系统日期时间

QML 中，执行动画之后改变某个非数字属性

Animation 没有 finished 这个信号。

所以你无法在一个动画执行之后执行一个操作。

但是配合状态和过度，就可以这么做。

首先过度就是不同状态切换的时候，这之间的过场。

过场就会包含一些列动画（并行动画抑或序列动画）。

取序列动画而言。

在执行某个动画之后，你就想执行一个函数了，（例如这个函数的功能为改变某个属性）。

那么 ActionScript 绝对是你想要的。

如下代码示：

import QtQuick 2.0

Item {
    Text {
        id: text
        text: "d"
        MouseArea {
            anchors.fill: parent
            onClicked: {
                text.state = "ChangeText"
            }
        }
        states: [
            State {
                name: "ChangeText"
                PropertyChanges {
                    target: text
                    x: 10
                }
            }
        ]
        transitions: [
            Transition {
                from: "*"
                to: "ChangeText"
                SequentialAnimation {
                    NumberAnimation {
                        properties: "x"
                        duration: 1000
                    }
                    ScriptAction {
                        script: {
                            text.text = "ddd"
                        }
                    }
                }
            }
        ]
    }
}

Android上面通过URL来启动本地应用

大体是在 AndroidManifest.xml 中填写：

 <activity  
 <category android:name="android.intent.category.BROWSABLE" />  

                <data android:scheme="fyfeng" />  

Android上面通过URL来启动本地应用

ANDROID – 使用特定的URL开启应用程序

通过浏览器直接打开Android应用程序

更新：通过浏览器直接打开Android应用程序

android如何实现文件打开方式可供选择功能

比如通过文档查看器打开一个文本文件时，会弹出一个可用来打开的软件列表；
如何让自己的软件也出现在该列表中呢？ 通过设置AndroidManifest.xml文件即可：

<activity android:name=".EasyNote" android:label="@string/app_name" android:launchMode="singleTask" android:screenOrientation="portrait">
< intent-filter>
< action android:name="android.intent.action.MAIN" />
< category android:name="android.intent.category.LAUNCHER" />
< /intent-filter>
<intent-filter>
< action android:name="android.intent.action.VIEW">action>
< category android:name="android.intent.category.DEFAULT">category>
< data android:mimeType="text/plain">data>
< /intent-filter>
< /activity>

第一个标签是每个程序都有的，关键是要添加第二个！这样你的应用程序就会出现在默认打开列表了。。。

注意需要将mimeType修改成你需要的类型，文本文件当然就是：text/plain

还有其它常用的如：

text/plain（纯文本）

text/html（HTML文档）

application/xhtml+xml（XHTML文档）

image/gif（GIF图像）

image/jpeg（JPEG图像）【PHP中为：image/pjpeg】

image/png（PNG图像）【PHP中为：image/x-png】

video/mpeg（MPEG动画）

application/octet-stream（任意的二进制数据）

application/pdf（PDF文档）

application/msword（Microsoft Word文件）

message/rfc822（RFC 822形式）

multipart/alternative（HTML邮件的HTML形式和纯文本形式，相同内容使用不同形式表示）

application/x-www-form-urlencoded（使用HTTP的POST方法提交的表单）

multipart/form-data（同上，但主要用于表单提交时伴随文件上传的场合）

QML 媒体播放小探

window

在 Windows 下 QML 媒体播放一般是调用系统的解码接口的，在比较旧的 QML 媒体播放类型，是使用 DirectShow 解码技术，比较新的 QML 媒体播放类型使用的是 Media Foundation 技术。

Media Foundation 是DirectShow为主的旧式多媒体应用程序接口的替代者与继承者，在微软的计划下将逐步汰换DirectShow技术。

当播放时打印类似如下错误：

DirectShowPlayerService::doRender: Unresolved error code ****

请安装 LAV Filters，或者升级 Windows 的 Media Foundation。

Supported Media Formats in Media Foundation

Media Foundation

信号 connect 小探

import QtQuick 2.0

Rectangle {
    id: page
    width: 100
    height: 62

    function handle() {
        console.log(page, " : page")
    }

    MouseArea {
        anchors.fill: parent
        onClicked: page.destroy();
    }

    signal timeout()

    onTimeout: console.log("here is qml timeout handle ", page);

    Component.onCompleted: {
        // 对象死亡之后，仍然会触发函数
        singletonObject.timeout.connect(page.handle);

        console.log("page.handle type :",typeof page.handle, "page.handle:", page.handle, "page.handle.connect: ",page.handle.connect);

        // Error: Function.prototype.connect: this object is not a signal
        page.handle.connect(function(){
            console.log("尼玛，太贱了，在qml中，连函数都可以有信号的作用啊~，竟然可以使用connect连接，其实是不行的");
        });

        // 对象死亡之后，就会自动移除对象的信号！但是不会移除连接到其他信号的函数。
        singletonObject.timeout.connect(page.timeout);

        console.log("page.timeout type :", typeof page.timeout, "page.timeout", "page.timeout.connect:", page.timeout.connect);
    }
}

ApplicationWindow 的 visible 属性

ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480
    visible: true                       // 这个必须添加
}

常用的 ListView 设置

    ListView {
        id: view
        currentIndex: 0
        clip: false  //此属性的默认值是false，表示不会自动截掉超出显示区域的部分。桌面软件中应设置为true。
        anchors.fill: parent
        preferredHighlightBegin: 0
        preferredHighlightEnd: 0
        highlightMoveDuration: 250
        highlightRangeMode: ListView.StrictlyEnforceRange
        snapMode: ListView.SnapOneItem
        boundsBehavior: ListView.StopAtBounds
        orientation: ListView.Horizontal
        model: itemModel
        interactive: false // 此属性的默认值是true，表示用户可以拖动该对象。桌面软件中应设置为false。
        Component.onCompleted: positionViewAtIndex(0, ListView.Beginning);
        onCurrentIndexChanged: forceActiveFocus();
    }

代码来自yeatse/moebox

Qt 中加密算法返回结果注意事项

// Qt 中加密算法，一般返回二进制字符，要进行toHex。

邮箱验证

    TextField {
        id: inputEmail
        validator: RegExpValidator {
            regExp: /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
        }
    }

qml 数据库的文件路径

//! [file] C:\Users\Administrator\AppData\Local\QML\OfflineStorage\Databases

将Item抓成图片

function saveImageToFile(item,fileName){
    if(Qt.isQtObject(itme)){
        return  item.grabToImage(function(result){
            // result QQuickItemGrabResult::saveToFile(QString)
            // fileName 不能是file:// 开头！
            result.saveToFile(fileName.toString());
        });
    } else {
        throw item.toString()+"isn't a Qt or QML object";
    }
}

QML 中的 destroy()

有关qml中 destroy() 函数的使用问题，qml 对象调用销毁函数后，不是马上销毁，而是添加到 Qt 的事件循环中，在事件循环中删除。

import QtQuick 2.0
import QtQuick.Controls 1.2

Rectangle {
    id: root
    width: 300
    height: 300
    color: "red"

    property Rectangle item1: Rectangle {
        color: "blue"
        width: 200
        height: 200
        Component.onDestruction: {
            console.log("good bye");
        }
    }

    Rectangle {
        id: item2
        color: "black"
        width: 200
        height: 200
        anchors.bottom: parent.bottom
    }

    Row {
        Button {
            id: killItem1
            text: "killItem1"
            // 在第一次点击之后，item1的删除操作在下一个事务循环执行，
            // 在本次事务循环中，还存在
            // 在第二、三次之后的点击中，item1 已经是 null 了
            onClicked: {
                console.log(item1)
                item1.destroy();
                console.log(item1.color)
            }
        }
        Button {
            id: killItem2
            text: "killItem2"
            // 在第一次点击之后，item1的删除操作在下一个事务循环执行，
            // 在本次事务循环中，还存在
            // 在第二、三次之后的点击中，item1 已经是 null 了
            onClicked: {
                console.log(item2)
                item2.destroy();
                console.log(item2.color)
            }
        }
    }
}

获取 Layout 控件的高度

获取 ColumnLayout 和 RowLayout 的实际高宽度应该使用 implicitHeight 和 implicitWidth。

implicitHeight 和 implicitWidth，height 和 width 的区别。

Component.onCompleted 的发送顺序

• 注意qml中页面传参的方式！以及内部控件信号触发的方式。

  qml对象是先完成内部子控件的创建，在完成自身的创建，所以信号是内部子控件先发射，根控件后发射。

• 动态组件创建，多数用于页面传参。页面传参最好在createObject这里设定。

---

ListView 的视图渲染和数据缓存，模型数据跟踪

ListView 使用注意，由于 ListView 是典型的 MVC，只会实时跟进数据，但是对于视图，会尽可能的进行惰性渲染，就是视图超出视窗的部分会进行裁剪，销毁，不在后台维护这个视图。

例如：

ListView {
    model: listModel
    delegate: CheckBox {
        text: listModelText
   }
}

视图代理可以跟进数据的变化，但是一旦视图项超出视窗范围，就会进行销毁，例如，你点击了视图项中的 CheckBox，你以为 ListView 会为你保存每个 CheckBox 的属性值，但是，并不会，ListView 对超出视窗部分的视图项进行销毁，当视图项进入视窗的时候重新构造。

可以使用另一个模型来存储数据，例如在多选模式下就可以这么做。

控制 ListView 滚速度

        // 控制滚动速度
        maximumFlickVelocity: 5000

安卓上特效

按钮特效。

import QtQuick 2.4

ShaderEffect {
    id: shaderEffect
    width: 512; height: 128

    // Properties that will get bound to a uniform with the same name in the shader
    property color backgroundColor: "#10000000"
    property color spreadColor: "#20000000"
    property point normTouchPos
    property real widthToHeightRatio: height / width
    // Our animated uniform property
    property real spread: 0
    opacity: 0

    ParallelAnimation {
        id: touchStartAnimation
        UniformAnimator {
            uniform: "spread"; target: shaderEffect
            from: 0; to: 1
            duration: 1000; easing.type: Easing.InQuad
        }
        OpacityAnimator {
            target: shaderEffect
            from: 0; to: 1
            duration: 50; easing.type: Easing.InQuad
        }
    }

    ParallelAnimation {
        id: touchEndAnimation
        UniformAnimator {
            uniform: "spread"; target: shaderEffect
            from: spread; to: 1
            duration: 1000; easing.type: Easing.OutQuad
        }
        OpacityAnimator {
            target: shaderEffect
            from: 1; to: 0
            duration: 1000; easing.type: Easing.OutQuad
        }
    }

    fragmentShader: "
        varying mediump vec2 qt_TexCoord0;
        uniform lowp float qt_Opacity;
        uniform lowp vec4 backgroundColor;
        uniform lowp vec4 spreadColor;
        uniform mediump vec2 normTouchPos;
        uniform mediump float widthToHeightRatio;
        uniform mediump float spread;

        void main() {
            // Pin the touched position of the circle by moving the center as
            // the radius grows. Both left and right ends of the circle should
            // touch the item edges simultaneously.
            mediump float radius = (0.5 + abs(0.5 - normTouchPos.x)) * 1.0 * spread;
            mediump vec2 circleCenter =
                normTouchPos + (vec2(0.5) - normTouchPos) * radius * 2.0;

            // Calculate everything according to the x-axis assuming that
            // the overlay is horizontal or square. Keep the aspect for the
            // y-axis since we're dealing with 0..1 coordinates.
            mediump float circleX = (qt_TexCoord0.x - circleCenter.x);
            mediump float circleY = (qt_TexCoord0.y - circleCenter.y) * widthToHeightRatio;

            // Use step to apply the color only if x2*y2 < r2.
            lowp vec4 tapOverlay =
                spreadColor * step(circleX*circleX + circleY*circleY, radius*radius);
            gl_FragColor = (backgroundColor + tapOverlay) * qt_Opacity;
        }
    "

    function touchStart(x, y) {
        normTouchPos = Qt.point(x / width, y / height)
        touchEndAnimation.stop()
        touchStartAnimation.start()
    }
    function touchEnd() {
        touchStartAnimation.stop()
        touchEndAnimation.start()
    }

    // For this demo's purpose, in practice we'll use a MouseArea
    Timer { id: touchEndTimer; interval: 125; onTriggered: touchEnd() }
    Timer {
        running: true; repeat: true
        onTriggered: {
            touchStart(width*0.8, height*0.66)
            touchEndTimer.start()
        }
    }
}

Qt on Andorid 中有用的Java代码

musicgear

> QML on Android，有使用到 Java 的下载类，可以研究一番。

> [MusicGear](https://github.com/Iktwo/musicgear/blob/master/android/src/com/iktwo/musicgear/MusicGear.java) 这个类有许多用的代码，可以给 Qt 应用交互使用。

```
public static void download(String url, String name)
{
    Log.v(TAG, "download(" + url + ", " + name + ")");

    dm = (DownloadManager) m_instance.getSystemService(DOWNLOAD_SERVICE);
    Request request = new Request(Uri.parse(url));
    request.setTitle(name);
    request.setDescription(url);
    request.allowScanningByMediaScanner();
    request.setNotificationVisibility(Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);
    request.setDestinationInExternalPublicDir(Environment.DIRECTORY_MUSIC, name + ".mp3");
    dm.enqueue(request);
}

public static void share(String name, String url)
{
    Intent share = new Intent(android.content.Intent.ACTION_SEND);
    share.setType("text/plain");
    share.addFlags(Intent.FLAG_ACTIVITY_CLEAR_WHEN_TASK_RESET);
    share.putExtra(Intent.EXTRA_SUBJECT, name);
    if (!name.isEmpty()) {
        share.putExtra(Intent.EXTRA_TEXT, name + " - " + url + " via Musicgear");
        m_instance.startActivity(Intent.createChooser(share, "Share " + name));
    } else {
        share.putExtra(Intent.EXTRA_TEXT, url + " via Musicgear");
        m_instance.startActivity(Intent.createChooser(share, "Share this music"));
    }

}

public static void toast(final String message)
{
    m_instance.runOnUiThread(new Runnable() {
        public void run() {
            Toast.makeText(m_instance.getApplicationContext(), message, Toast.LENGTH_SHORT).show();
        }
    });
}

```

沉浸式任务栏

    @Override
    public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            // setContentView(0x7f020000);
            mTintManager = new SystemBarTintManager(this);
            mTintManager.setStatusBarTintEnabled(true);
            mTintManager.setNavigationBarTintEnabled(true);

//            int selected = 0xFF7F00;
//            int color = Color.argb(100,
//                                   Color.red(selected),
//                                   Color.green(selected),
//                                   Color.blue(selected));
//            mTintManager.setTintColor(color);



            //! [0]
            //! 让整个 Activity 覆盖整个屏幕
            //! 并且系统栏位于整个 Activity 的上层
            getWindow()
                .getDecorView()
                .setSystemUiVisibility(
                            View.SYSTEM_UI_FLAG_LAYOUT_STABLE |
                            View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
            //! [0]

            //! [1]
            //! 设置系统的状态栏为透明
            //! 这两句必须
            //! 后续要拿到系统状态栏高度。
            getWindow().setStatusBarColor(Color.TRANSPARENT);
            getWindow().setNavigationBarColor(Color.TRANSPARENT);
            //! [1]
    }

---

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtGraphicalEffects 1.0

// 圆角图片效果

ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480
    visible: true
    color: "#555555"

    Image {
        id: bug
        source: "qrc:/QQ截图20150930185642.png"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
        width: 200
        height:200
        x:20
        y:20

    }

    Rectangle {
        id: mask
        smooth: true
        visible: false
        width: 200
        height: 200
        anchors.centerIn: bug
        radius: width/2
    }

    OpacityMask {
        anchors.fill: bug
        source: bug
        maskSource: mask
    }


    Image {
        id: bug1
        source: "qrc:/bbbbb.png"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
        width: 200
        height:200
        anchors.right:parent.right
        y:20

    }

    Rectangle {
        id: mask1
        smooth: true
        visible: false
        width: 200
        height: 200
        anchors.centerIn: bug1
        radius: width/3
    }

    OpacityMask {
        anchors.fill: bug1
        source: bug1
        maskSource: mask1
    }
}

QAbstractListModel

继承 QAbstractListModel 并重写如下三个虚函数。

    enum Roles{
        NameRole = Qt::UserRole + 1,
        AgeRole
    };
int rowCount(const QModelIndex &parent) const;
QVariant data(const QModelIndex &index, int role) const;
QHash<int, QByteArray> roleNames() const;

int TestModel::rowCount(const QModelIndex &parent) const
{
    Q_UNUSED(parent)
    return m_datas.length();
}


QVariant TestModel::data(const QModelIndex &index, int role) const
{
    if (!index.isValid() || index.row() < 0)
        return QVariant();

    if (index.row() >= m_datas.count()) {
        qWarning() << "SatelliteModel: Index out of bound";
        return QVariant();
    }
    const Dao &dao = m_datas.at(index.row());
    switch (role)
    {
    case NameRole:
        return dao.name();
    case AgeRole:
        return dao.age();
    default:
        break;
    }
    return QVariant();
}


QHash<int, QByteArray> TestModel::roleNames() const
{
    QHash<int, QByteArray> roleNames;
    roleNames.insert(NameRole, "NameRole");
    roleNames.insert(AgeRole, "AgeRole");
    return roleNames;
}

url 编解码

encodeURI,encodeURIComponent,deocodeURI,decodeURIComponent,在qt quick中都可以用。

MIT LICENSE

/*
 * Copyright (c) <2015> 
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
*/

---

Qt 发布 windeployqt

windeployqt  APP-PATH/APP.EXE

HTTP Content-type 常用对照表

How to INSTALL & RUN QML QtWebEngine & QtWebKit

QPalette设置各种背景色

QML类型说明-Accessible

QML官方系列教程 Scalability

QML官方系列教程UseCase-Style And Theme Support

QML各术语词汇表

android ui的几个概念：px,dip(dp),sp,dpi,分辨率等

酷友观点/经验：UI设计师不可不知的安卓屏幕知识(原创)

[网页平面] iPhone、iPad、Android UI常用设计尺寸

[Qt教程] QML经验谈（二） 关于动态QML组件的几种用法

qml 一些知识点

qml ios长按晃动

去掉程序启动界面的短暂黑屏

APP规范实例(详细的UI设计方法）

万能胶界面框架

qt android 开发篇之如何实现圆盘（hsv）颜色选择器

qt qml 九宫格划指锁屏视图

QtQuick之Canvas图像圆角遮罩

android:configChanges

QBS 快速向导