封装listview和滚动条,简化各Item功能

This commit is contained in:
hewenfei 2023-03-31 16:08:10 +08:00
parent fd8d7ed2d6
commit 8f40eb3af1
8 changed files with 185 additions and 142 deletions

View File

@ -3,35 +3,25 @@ import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
import org.ukui.menu.core 1.0
StyleBackground {
radius: 4
useStyleTransparent: false
alpha: control.containsPress ? 0.82 : control.containsMouse ? 0.55 : 0.00
ToolTip.visible: content.textTruncated && control.containsMouse
ToolTip.text: name
MouseArea {
id: control
hoverEnabled: true
IconLabel {
id: content
StyleBackground {
anchors.fill: parent
iconHeight: 32; iconWidth: iconHeight
appName: name; appIcon: icon
display: Display.TextBesideIcon
spacing: 12
}
MouseArea {
id: control
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.LeftButton | Qt.RightButton
radius: 4
useStyleTransparent: false
alpha: control.containsPress ? 0.82 : control.containsMouse ? 0.55 : 0.00
ToolTip.visible: content.textTruncated && control.containsMouse
ToolTip.text: name
onClicked: {
if (mouse.button === Qt.RightButton) {
appListView.model.openMenu(index);
return
}
if (mouse.button === Qt.LeftButton) {
appListView.model.appClicked(index);
}
IconLabel {
id: content
anchors.fill: parent
iconHeight: 32; iconWidth: iconHeight
appName: name; appIcon: icon
display: Display.TextBesideIcon
spacing: 12
}
}
}

View File

@ -3,35 +3,25 @@ import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
import org.ukui.menu.core 1.0
StyleBackground {
radius: 4
useStyleTransparent: false
alpha: control.containsPress ? 0.82 : control.containsMouse ? 0.55 : 0.00
ToolTip.visible: content.textTruncated && control.containsMouse
ToolTip.text: name
MouseArea {
id: control
hoverEnabled: true
IconLabel {
id: content
StyleBackground {
anchors.fill: parent
iconHeight: 32; iconWidth: iconHeight
appName: name; appIcon: icon
display: Display.TextBesideIcon
spacing: 12
}
MouseArea {
id: control
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.LeftButton | Qt.RightButton
radius: 4
useStyleTransparent: false
alpha: control.containsPress ? 0.82 : control.containsMouse ? 0.55 : 0.00
ToolTip.visible: content.textTruncated && control.containsMouse
ToolTip.text: name
onClicked: {
if (mouse.button === Qt.RightButton) {
appListView.model.openMenu(index);
return
}
if (mouse.button === Qt.LeftButton) {
appListView.model.appClicked(index);
}
IconLabel {
id: content
anchors.fill: parent
iconHeight: 32; iconWidth: iconHeight
appName: name; appIcon: icon
display: Display.TextBesideIcon
spacing: 12
}
}
}

View File

@ -2,42 +2,40 @@ import QtQuick 2.0
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
StyleBackground {
radius: 4
useStyleTransparent: false
alpha: control.containsPress ? 0.82 : control.containsMouse ? 0.55 : 0.00
MouseArea {
id: control
hoverEnabled: true
ToolTip.text: qsTr("Open the label selection interface")
ToolTip.visible: control.containsMouse
RowLayout {
StyleBackground {
anchors.fill: parent
StyleText {
Layout.preferredHeight: parent.height
Layout.preferredWidth: contentWidth
Layout.leftMargin: 12
radius: 4
useStyleTransparent: false
alpha: control.containsPress ? 0.82 : control.containsMouse ? 0.55 : 0.00
horizontalAlignment: Qt.AlignLeft
verticalAlignment: Qt.AlignVCenter
font.pixelSize: 14
font.bold: true
text: name
}
RowLayout {
anchors.fill: parent
StyleText {
Layout.preferredHeight: parent.height
Layout.preferredWidth: contentWidth
Layout.leftMargin: 12
Image {
visible: control.containsMouse
Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
Layout.preferredWidth: 24
Layout.preferredHeight: 24
Layout.rightMargin: 16
source: "image://appicon/open-menu-symbolic"
}
}
MouseArea {
id: control
hoverEnabled: true
anchors.fill: parent
onClicked: {
appList.labelItemClicked();
horizontalAlignment: Qt.AlignLeft
verticalAlignment: Qt.AlignVCenter
font.pixelSize: 14
font.bold: true
text: name
}
Image {
visible: control.containsMouse
Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
Layout.preferredWidth: 24
Layout.preferredHeight: 24
Layout.rightMargin: 16
source: "image://appicon/open-menu-symbolic"
}
}
}
}

View File

@ -25,85 +25,79 @@ import org.ukui.menu.core 1.0
Item {
property string title: ""
signal labelItemClicked()
signal openFolderPageSignal(string folderId, string folderName);
function labelSelection(labelId) {
appListView.positionViewAtIndex(appListView.model.getLabelIndex(labelId), ListView.Beginning)
appListView.view.positionViewAtIndex(appListView.model.getLabelIndex(labelId), ListView.Beginning)
}
MouseArea {
id: appListArea
hoverEnabled: true
AppListView {
id: appListView
anchors.fill: parent
AppControls2.StyleBackground {
anchors.top: parent.top
width: parent.width; height: 1
useStyleTransparent: false
alpha: 0.15
paletteRole: Palette.Text
visible: appListView.contentY > 0
}
RowLayout {
anchors.fill: parent
spacing: 0
anchors.leftMargin: 4
ListView {
id: appListView
spacing: 4
Layout.fillHeight: true
Layout.fillWidth: true
ScrollBar.vertical: appListScrollBar
highlightMoveDuration: 0
boundsBehavior: Flickable.StopAtBounds
model: modelManager.getAppModel()
delegate: Component {
Loader {
width: ListView.view ? ListView.view.width : 0
height: 40
property int index: model.index
property int type: model.type
property string name: model.name
property string icon: model.icon
sourceComponent: {
if (type === DataType.Normal) {
return appItem;
}
if (type === DataType.Folder) {
return folderItem;
}
if (type === DataType.Label) {
return labelItem;
}
}
model: modelManager.getAppModel()
delegate: Component {
Loader {
width: ListView.view ? ListView.view.width : 0
height: 40
property int index: model.index
property int type: model.type
property string id: model.id
property string name: model.name
property string icon: model.icon
sourceComponent: {
if (type === DataType.Normal) {
return appItem;
}
if (type === DataType.Folder) {
return folderItem;
}
if (type === DataType.Label) {
return labelItem;
}
}
}
AppControls2.ScrollBar {
id: appListScrollBar
Layout.fillHeight: true
Layout.preferredWidth: 14
visual: appListArea.containsMouse
}
}
}
Component {
id: appItem
AppControls2.AppItem {}
AppControls2.AppItem {
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if (mouse.button === Qt.RightButton) {
appListView.model.openMenu(index);
return;
}
if (mouse.button === Qt.LeftButton) {
appManager.launchApp(id);
return;
}
}
}
}
Component {
id: labelItem
AppControls2.LabelItem {}
AppControls2.LabelItem {
onClicked: labelItemClicked();
}
}
Component {
id: folderItem
AppControls2.FolderItem {}
AppControls2.FolderItem {
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if (mouse.button === Qt.RightButton) {
appListView.model.openMenu(index);
return;
}
if (mouse.button === Qt.LeftButton) {
openFolderPageSignal(id, name);
return;
}
}
}
}
}

69
qml/AppUI/AppListView.qml Normal file
View File

@ -0,0 +1,69 @@
/*
* Copyright (C) 2023, KylinSoft Co., Ltd.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*
*/
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import AppControls2 1.0 as AppControls2
import org.ukui.menu.core 1.0
MouseArea {
id: root
readonly property alias view: listView
property alias model: listView.model
property alias delegate: listView.delegate
hoverEnabled: true
clip: true
AppControls2.StyleBackground {
anchors.top: parent.top
width: parent.width
height: 1
useStyleTransparent: false
alpha: 0.15
paletteRole: Palette.Text
visible: listView.contentY > 0
}
RowLayout {
anchors.fill: parent
spacing: 0
anchors.leftMargin: 4
ListView {
id: listView
spacing: 4
Layout.fillHeight: true
Layout.fillWidth: true
highlightMoveDuration: 0
boundsBehavior: Flickable.StopAtBounds
ScrollBar.vertical: listViewScrollBar
}
AppControls2.ScrollBar {
id: listViewScrollBar
Layout.fillHeight: true
Layout.preferredWidth: 14
visual: root.containsMouse
}
}
}

View File

@ -28,7 +28,7 @@ Item {
clip: true
anchors.fill: parent
anchors.leftMargin: 4
function labelItemClicked() {
onLabelItemClicked: {
appList.visible = false;
selectionPage.viewShowStart();
}

View File

@ -5,6 +5,7 @@ Sidebar 1.0 Sidebar.qml
NormalUI 1.0 NormalUI.qml
FullScreenUI 1.0 FullScreenUI.qml
AppPageHeader 1.0 AppPageHeader.qml
AppListView 1.0 AppListView.qml
SearchInputBar 1.0 SearchInputBar.qml
PluginSelectMenu 1.0 PluginSelectMenu.qml
FullScreenHeader 1.0 FullScreenHeader.qml

View File

@ -15,6 +15,7 @@
<file>AppUI/FullScreenFooter.qml</file>
<file>AppUI/AppPageHeader.qml</file>
<file>AppUI/SearchInputBar.qml</file>
<file>AppUI/AppListView.qml</file>
<file>AppControls2/qmldir</file>
<file>AppControls2/App.qml</file>
<file>AppControls2/ScrollBar.qml</file>