Qt Quick综合实例之文件查看器

    如果你基于Qt SDK 5.3.1来创建一个Qt Quick App项目，项目模板为你准备的main.qml文档的根元素是ApplicationWindow或Window。这次我们就以ApplicationWindow为例，围绕着它实现一个综合实例：文件查看器。通过文件查看器的实现，我们来再次领略一下Qt Quick的犀利。

    版权所有foruok，转载请注明出处：http://blog.youkuaiyun.com/foruok。

    本实例将会用到下列特性：

• ApplicationWindow
• MenuBar
• ToolBar、ToolButton
• Action
• StatusBar
• MediaPlayer
• Image
• XMLHttpRequest
• ColorDialog
• FileDialog
• TextArea
• 动态创建QML组件
• 多界面切换

    我们之前的文章都是就某一个主题来展开的，这次要出个大招。先看点儿图。

文件查看器效果

    图1，初始状态

                  图1 初始状态

    图2 是浏览文本文件的效果：

              图2 浏览文本文件

    图3是浏览图片：

           图3 浏览图片

    图4是播放视频：

              图4 播放视频

    图5是播放音乐：

               图5 播放音乐

    好啦，看代码前，先大概介绍下用到的Qt Quick元素。

    Image、动态创建组件、界面切换这些没什么好说的，我之前的文章中已经涉及到。只讲新的了。

ApplicationWindow

    ApplicationWindow，类似Qt C++中的QMainWindow，请对照着理解。

    ApplicationWindow有菜单栏(menuBar属性）、工具栏（toolBar属性）、状态栏（statusBar属性）。咦，没有centralWidget哈，别急，有的，就是ContentItem，就是那个你不与任何属性绑定的Item。例如：

ApplicationWindow{
    ...
    Rectangle{
        id: centralView;
        anchors.fill: parent;
        color: "red";
    }
}

    上面代码中的centralView就对应QMainWindow的centralWidget了。

    看起来没有DockWidgets……兄弟，别要求太高了，你想要么，真的想要么，你真的确定你想要么？好吧，自己实现就好了，QML里很多元素的哈。

MenuBar

    MenuBar就是菜单栏一长条区域了，它干两件事：

1.     维护一个Menu列表（menus属性）
2.     绘制菜单栏背景色（style属性）

Menu

    看截图中的“文件”、“设置”、“帮助”三个菜单，点一下弹出一个子菜单，Menu就代表文件这个菜单和它下面的子菜单。

    列表属性items指向Menu的子菜单项，它的类型是list<Object>，是默认属性。

    title属性是string类型，你看到的“文件”、“设置”等字样就是它指定的。

    有这两个属性，Menu就可以开始干活了。看Qt帮助里的示例代码片段：

Menu {
    title: "Edit"

    MenuItem {
        text: "Cut"
        shortcut: "Ctrl+X"
        onTriggered: ...
    }

    MenuItem {
        text: "Copy"
        shortcut: "Ctrl+C"
        onTriggered: ...
    }

    MenuItem {
        text: "Paste"
        shortcut: "Ctrl+V"
        onTriggered: ...
    }

    MenuSeparator { }

    Menu {
        title: "More Stuff"

        MenuItem {
            text: "Do Nothing"
        }
    }
}

MenuItem

    Menu的孩子啊，最受待见的就是MenuItem了。

    MenuItem代表一个具体的菜单项，点一下就干一件事情的角色。你可以实现onTriggered信号处理响应用户对它的选择。

    MenuItem的text属性指定菜单文字，iconSource属性指定菜单图标。

    Action属性很强大哦，MenuItem的text、iconSource、trigger信号等实现的效果，都可以通过Action来实现，这两种方式是等同的。咱们来看Action。

Action    

    Action类有text、iconSource等属性，还有toggled、triggered两个信号。这些在MenuItem里有对应的属性，不必多说了。

    使用Action的一大好处是，你可以给它指定一个id（比如叫open），然后在使用ToolButton构造ToolBar时指定ToolBatton的action属性为之前定义的id为open的那个action，这样工具栏的按钮就和菜单关联起来了。

    好啦，总结一下，实现菜单栏的典型代码结构是酱紫的：

MenuBar {
    Menu{
        title:"文件";
        MenuItem{
            text:"打开";
            iconSource: "res/ic_open.png";
            onTriggered:{
                ...
            }

        }
        MenuItem{
            action: Action {
                text:"保存";
                iconSource: "res/ic_save.png";
                onTriggered:{
                    ...
                }
            }
        }        
    }
}

    如你所见，我使用了两种构造MenuItem的方式，一种用到了Action，一种没有。

ToolBar

    ToolBar就是工具栏对应的类，它只有一个属性，contentItem，类型为Item。一般我们可以将一个Row或者RowLayout对象赋值给contentItem，而Row或RowLayout则管理一组ToolButton来作为工具栏上的按钮。

ToolButton

    ToolButton是Button的派生类，专为ToolBar而生，一般情况下定义ToolButton对象时只需要指定其iconSource属性即可。例如：

ToolButton {
    iconSource: "res/ic_open.png";
}

    还有一种方式是将一个已定义好的Action对象关联到ToolButton对象上