使用 PathSvg 自定义窗口 [英] Customizing Window with PathSvg
问题描述
这是我现在在 main.qml 中的内容:
导入QtQuick 2.9导入 QtQuick.Window 2.3导入 QtQuick.Layouts 1.3导入 QtQuick.Controls 2.5导入 QtQuick.Shapes 1.12导入 QtGraphicalEffects 1.0窗户 {可见:真实宽度:640高度:480标题:qsTr(测试窗口")属性双图标大小:24行布局{anchors.fill:父级矩形{编号: rectLayout.fillHeight: 真Layout.preferredWidth: iconSize列表显示{编号:lv模型:ViewModel.viewsanchors.fill:父级委托:ItemDelegate{宽度:图标大小高度:图标大小列布局{形状 {形状路径{fillColor:悬停?蓝色": 突出显示?绿色":黑色"PathSvg { 路径:modelData.icon }}}}已点击:{lv.currentIndex = 索引load.setSource(modelData.view)}突出显示:ListView.isCurrentItem背景:矩形{anchors.fill:父级颜色:透明"}}Component.onCompleted: load.setSource(a.qml")}}装载机{id:加载Layout.fillHeight: 真Layout.fillWidth: 真Layout.margins:5}阴影{anchors.fill:矩形来源: rect半径:10样品:15颜色:黑色"}阴影{anchors.fill:加载来源:负载半径:10样品:15颜色:黑色"}}}我在运行应用程序时收到这些警告/错误:
qrc:/main.qml:58:9: QML DropShadow:在由布局管理的项目上检测到锚点.这是未定义的行为；使用 Layout.alignment 代替.qrc:/main.qml:66:9: QML DropShadow:在由布局管理的项目上检测到锚点.这是未定义的行为；使用 Layout.alignment 代替.我必须在 DropShadow 中都有 anchors.fill: elementId 才能让它工作，对吧?这是它的外观:
首先，那些 SVG 不流畅，我尝试了一些列出的属性
它总是显示在我的任务栏中.后者是完美的:
没有外边框，默认没有调整大小功能，它甚至不会出现在任务栏中.在这两种情况下，我都必须手动处理拖动！
Here's what I've now in my main.qml:
import QtQuick 2.9
import QtQuick.Window 2.3
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5
import QtQuick.Shapes 1.12
import QtGraphicalEffects 1.0
Window {
visible: true
width: 640
height: 480
title: qsTr("Test Window")
property double iconSize: 24
RowLayout{
anchors.fill: parent
Rectangle{
id: rect
Layout.fillHeight: true
Layout.preferredWidth: iconSize
ListView{
id: lv
model: ViewModel.views
anchors.fill: parent
delegate: ItemDelegate{
width: iconSize
height: iconSize
ColumnLayout{
Shape {
ShapePath {
fillColor: hovered? "blue" : highlighted? "green" : "black"
PathSvg { path: modelData.icon }
}
}
}
onClicked: {
lv.currentIndex = index
load.setSource(modelData.view)
}
highlighted: ListView.isCurrentItem
background: Rectangle{
anchors.fill: parent
color: "transparent"
}
}
Component.onCompleted: load.setSource("a.qml")
}
}
Loader{
id: load
Layout.fillHeight: true
Layout.fillWidth: true
Layout.margins: 5
}
DropShadow{
anchors.fill: rect
source: rect
radius: 10
samples: 15
color: "black"
}
DropShadow{
anchors.fill: load
source: load
radius: 10
samples: 15
color: "black"
}
}
}
I get these warnings/error when I run the application:
qrc:/main.qml:58:9: QML DropShadow: Detected anchors on an item that is managed by a layout. This is undefined behavior; use Layout.alignment instead.
qrc:/main.qml:66:9: QML DropShadow: Detected anchors on an item that is managed by a layout. This is undefined behavior; use Layout.alignment instead.
I've to have anchors.fill: elementId in both DropShadow to make it work, right? Here's how it looks:
First, those SVG aren't smooth, I've tried with some properties listed here BUT those actually don't help! What do I've to do to make those look better?
Second, I want to replace the default Window Title Bar with another Rectangle on top with DropShadow and add 3 more SVG as minimize, maximize and close buttons BUT haven't yet found any example of customizing default QtQuick Window.
EDIT
Here's Constants.h that holds SVG Path Data:
#ifndef CONSTANTS_H
#define CONSTANTS_H
#include<QString>
const QString AIcon = "M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,7A2,2 0 0,0 9,9V17H11V13H13V17H15V9A2,2 0 0,0 13,7H11M11,9H13V11H11V9Z";
const QString BIcon = "M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M15,10.5V9A2,2 0 0,0 13,7H9V17H13A2,2 0 0,0 15,15V13.5C15,12.7 14.3,12 13.5,12C14.3,12 15,11.3 15,10.5M13,15H11V13H13V15M13,11H11V9H13V11Z";
const QString CIcon = "M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,7A2,2 0 0,0 9,9V15A2,2 0 0,0 11,17H13A2,2 0 0,0 15,15V14H13V15H11V9H13V10H15V9A2,2 0 0,0 13,7H11Z";
#endif // CONSTANTS_H
here's View.h, the model:
#ifndef VIEW_H
#define VIEW_H
#include <QObject>
#include <QString>
#include "Property.h"
class View : public QObject
{
Q_OBJECT
PROPERTY(QString, icon)
PROPERTY(QString, view)
public:
View(QString icon, QString view) : m_icon(icon), m_view(view) {}
};
#endif // VIEW_H
here's VM.h, the ViewModel
#ifndef VM_H
#define VM_H
#include <QObject>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QtCore>
#include "Property.h"
#include "Constants.h"
#include "view.h"
class VM : public QObject
{
Q_OBJECT
PROPERTY(QVector<View*>, views)
public:
explicit VM(QObject *parent = nullptr);
private:
QQmlApplicationEngine engine;
};
#endif // VM_H
here's VM.cpp:
#include "vm.h"
VM::VM(QObject *parent) : QObject(parent)
{
engine.rootContext()->setContextProperty("ViewModel", this);
engine.load("qrc:/main.qml");
m_views.push_back(new View(AIcon, "a.qml"));
m_views.push_back(new View(BIcon, "b.qml"));
m_views.push_back(new View(CIcon, "c.qml"));
emit viewsChanged();
}
here's main.cpp:
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "vm.h"
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
VM vm;
return app.exec();
}
the PROPERTY macro:
#ifndef PROPERTY_H
#define PROPERTY_H
#define PROPERTY(QType, name) \
Q_PROPERTY(QType name READ name WRITE set##name NOTIFY name##Changed) \
public: \
QType name(){return m_##name;}\
void set##name(QType value){m_##name = value; emit name##Changed();} \
Q_SIGNAL void name##Changed(); \
private: \
QType m_##name;
#endif // PROPERTY_H
and here's a.qml:
import QtQuick 2.0
Item {
anchors.fill: parent
Rectangle{
anchors.fill: parent
Text{
text: "A View"
font.pointSize: 18
anchors.centerIn: parent
}
}
}
a.qml, b.qml and c.qml are same except the text. For b.qml and I've B View as text and C View for c.qml
Both flags: Qt.Window | Qt.CustomizeWindowHint and flags: Qt.FramelessWindowHint works. With the first I get a resize grip by default and a outer black border but the TitleBar gets taller than what I expect:
It always is shown in my Taskbar. With the latter it's perfect:
no outer border, no resize capability by default and it doesn't even appear in Taskbar. In both cases I've to handle the dragging manually!
这篇关于使用 PathSvg 自定义窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
