QML Book 学习基础5(An Image Viewer)

目录

桌面版(win端)

移动端


下面我们用更有挑战性例子来使用Qt控件,将创建一个简单的图像查看器。

桌面版(win端)

程序主要由四个主要区域组成,如下所示。菜单栏、工具栏和状态栏,通常由控件的实例填充,而内容区域是窗口子项所在的位置。

QML Book 学习基础5(An Image Viewer)_第1张图片

 

原书作者(应该创建Qt Quick项目,但是不影响我们使用Qt Quick 2 UI项目)

由于我们面向桌面,因此我们强制使用 Fusion 样式。这可以通过配置文件、环境变量、命令行参数或在C++代码中以编程方式完成。我们采用后一种方式,将以下行添加到 :main.cpp

QQuickStyle::setStyle("Fusion");

 

import QtQuick 2.12
import QtQuick.Window 2.12
import Qt.labs.platform 1.0
import QtQuick.Dialogs 1.0
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.12

ApplicationWindow
{
    visible: true
    id:window
    width: 640
    height: 480
    background: Rectangle{color:"darkGray"}
    //创建一个ToolBar,当点击的时候会相应咱们创建的对话框打开
    header:ToolBar
    {
        anchors.fill:parent
        ToolButton
        {
            text: qsTr("open")
            icon.name: "open pictrue"
            onClicked: fileOpenDialog.open()
        }
    }
    //创建两个MenuBar,当点击的时候会相应咱们创建的对话框打开,或者打开关于这个软件对话框
    menuBar:MenuBar
    {
        Menu
        {
            title:qsTr("&file")
            MenuItem
            {
                text: qsTr("&open..")
                icon.name: "document-open"
                icon.source: "documentopen.png"
                onTriggered: fileOpenDialog.open()
            }
        }
        Menu
        {
            title:qsTr("&Help")
            MenuItem
            {
                text: qsTr("&About")
                onTriggered: aboutDialog.open()
            }
        }
    }

    //将打开的图片设置成缓存图像
    Image {
        id: image
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit
        asynchronous: true
        cache: false

    }
    //图像文件打开窗口
    FileDialog
    {
        id:fileOpenDialog
        title:"Select Image file "
        //获取文档写的权限
        folder: StandardPaths.writableLocation(StandardPaths.DocumentsLocation)
        nameFilters: ["Image files (*.png *.jpeg *.jpg)",]
        onAccepted: {image.source = fileOpenDialog.fileUrl}
    }
    //关于这个软件信息窗口
    Dialog
    {
        id:aboutDialog
        title: qsTr("about")
        Label
        {
            anchors.fill: parent
            text: qsTr("QML Image Viewer\nA part of the QmlBook\nhttp://qmlbook.org")
            horizontalAlignment: Text.AlignHCenter
        }
        standardButtons: StandardButton.Ok
    }

QML Book 学习基础5(An Image Viewer)_第2张图片

移动端

在原本基础上添加下面代码就可以

    Drawer {
           id: drawer

           width: Math.min(window.width, window.height) / 3 * 2
           height: window.height

           ListView {
               focus: true
               currentIndex: -1
               anchors.fill: parent

               delegate: ItemDelegate {
                   width: parent.width
                   text: model.text
                   highlighted: ListView.isCurrentItem
                   onClicked: {
                       drawer.close()
                       model.triggered()
                   }
               }

               model: ListModel {
                   ListElement {
                       text: qsTr("Open...")
                       triggered: function() { fileOpenDialog.open(); }
                   }
                   ListElement {
                       text: qsTr("About...")
                       triggered: function() { aboutDialog.open(); }
                   }
               }

               ScrollIndicator.vertical: ScrollIndicator { }
           }
       }

    header: ToolBar {
            // 桌面端无作用
            Material.background: Material.Orange
            ToolButton {
                id: menuButton
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                icon.source: "baseline-menu-24px.svg"
                onClicked: drawer.open()
            }
            Label {
                anchors.centerIn: parent
                text: "Image Viewer"
                font.pixelSize: 20
                elide: Label.ElideRight
            }
        }

代码的详细解释:

创建了一个具有两个选项的列表视图(ListView)

  1. focus: true:这将使ListView获得焦点,这意味着当用户首次打开该界面时,ListView将成为用户可以直接与之交互的第一个元素。

  2. currentIndex: -1:这将设置当前选定的列表项的索引为-1,这意味着在开始时没有任何项目被选中。

  3. anchors.fill: parent:这将使ListView填充其父元素的所有可用空间,使得列表视图占据整个界面。

  4. delegate: ItemDelegate:这是ListView的代理对象,它负责创建列表中的每个元素。在这个例子中,它是一个ItemDelegate对象,用于显示每个列表项的内容。

    • width: parent.width:这将每个列表项的宽度设置为父元素的宽度,使得每个列表项占据整个列表视图的宽度。
    • text: model.text:这将显示模型中每个元素的文本。
    • highlighted: ListView.isCurrentItem:当一个列表项成为当前选定的项时,这个列表项会被高亮显示。
    • onClicked::当用户点击一个列表项时,这个列表项将被选中,然后关闭Drawer,并执行模型中指定的函数。
  5. model: ListModel:这是ListView的数据模型,它包含了一组ListElement,每个ListElement代表一个列表项。

    • 在这个例子中,数据模型有两个元素:
      • "Open...",点击时会打开一个文件打开对话框(fileOpenDialog.open())。
      • "About...",点击时会打开一个关于对话框(aboutDialog.open())。
  6. ScrollIndicator.vertical: ScrollIndicator { }:这是垂直滚动指示器,当列表视图的内容超过视窗时,滚动指示器会显示出来。

总的来说,这段代码创建了一个具有两个选项的列表视图,用户可以通过点击来选择一个选项,并根据选项的内容执行不同的操作。

QML Book 学习基础5(An Image Viewer)_第3张图片

 

你可能感兴趣的:(#,QML,Book,学习,qt)