256 lines
9.1 KiB
QML
256 lines
9.1 KiB
QML
// =========================================
|
||
// =============== 水平标签栏 ===============
|
||
// =========================================
|
||
|
||
import QtQuick 2.15
|
||
import QtQuick.Controls 2.15
|
||
import QtQuick.Layouts 1.15
|
||
|
||
import "../Widgets"
|
||
|
||
RowLayout {
|
||
id: hTabBarLayout
|
||
anchors.fill: parent
|
||
spacing: 0
|
||
|
||
// 标签栏控制（左，置顶按钮）
|
||
Item {
|
||
width: size_.hTabBarHeight
|
||
Layout.fillHeight: true
|
||
// 图钉按钮
|
||
Button {
|
||
checkable: true
|
||
checked: mainWindowRoot.isMainWindowTop
|
||
onCheckedChanged: { // 双向绑定锁定标记
|
||
mainWindowRoot.isMainWindowTop = checked
|
||
qmlapp.globalConfigs.setValue("window.isMainWindowTop", checked, true)
|
||
}
|
||
anchors.fill: parent
|
||
anchors.margins: 4
|
||
|
||
contentItem: Icon_ {
|
||
icon: "pin"
|
||
anchors.fill: parent
|
||
color: parent.checked ? theme.bgColor : theme.textColor
|
||
}
|
||
|
||
background: Rectangle {
|
||
anchors.fill: parent
|
||
radius: size_.btnRadius
|
||
color: parent.checked ? theme.coverColor4 : (
|
||
parent.hovered ? theme.coverColor2 : "#00000000"
|
||
)
|
||
}
|
||
|
||
ToolTip_ {
|
||
visible: parent.hovered
|
||
text: qsTr("窗口置顶")
|
||
}
|
||
}
|
||
}
|
||
|
||
// 标签栏本体（中）
|
||
Rectangle {
|
||
id: hTabBarMain
|
||
Layout.fillWidth: true
|
||
Layout.fillHeight: true
|
||
color: "#00000000"
|
||
|
||
property int tabWidth: 200 // 标签当前宽度
|
||
|
||
// 方法：重设标签按钮宽度
|
||
function resetTabBtnWidth() {
|
||
let w = hTabBarMain.width
|
||
if(!qmlapp.tab.barIsLock) w -= tabBarControl.width // 无锁定时，减去+按钮宽度
|
||
w = w / barManager.model.count
|
||
tabWidth = Math.min(w, size_.line * 8)
|
||
}
|
||
onWidthChanged: resetTabBtnWidth() // 监听标签栏总宽度变化
|
||
// 监听改变锁定，重设宽度
|
||
property bool isLock: qmlapp.tab.barIsLock
|
||
onIsLockChanged: {
|
||
hTabBarMain.resetTabBtnWidth()
|
||
}
|
||
|
||
MouseArea { // 点击标签栏空余位置，都是添加新标签
|
||
anchors.fill: parent
|
||
onClicked: {
|
||
if(!qmlapp.tab.barIsLock)
|
||
qmlapp.tab.addNavi() // 添加导航页
|
||
}
|
||
}
|
||
|
||
// Rectangle { // 标签按钮下方的阴影
|
||
// anchors.bottom: parent.bottom
|
||
// width: parent.width
|
||
// height: size_.hTabBarHeight * 0.5
|
||
// gradient: Gradient {
|
||
// GradientStop { position: 0.0; color: "#00000000" }
|
||
// GradientStop { position: 1.0; color: theme.coverColor2 }
|
||
// }
|
||
// }
|
||
|
||
Rectangle { // 拖拽时的位置指示器
|
||
id: dragIndicator
|
||
visible: false
|
||
width: parent.tabWidth
|
||
height: size_.hTabBarHeight
|
||
gradient: Gradient { // 水平渐变
|
||
orientation: Gradient.Horizontal
|
||
GradientStop { position: 1.0; color: "#00000000" }
|
||
GradientStop { position: 0.0; color: theme.coverColor3 }
|
||
}
|
||
}
|
||
|
||
// 水平标签栏行布局
|
||
Row {
|
||
id: hTabBarMainRow
|
||
spacing: -1 // 给负的间隔，是为了让选中标签能覆盖左右两边标签的竖线
|
||
|
||
// ===== 标签按钮组 =====
|
||
BarManager {
|
||
id: barManager
|
||
// 标签元素模板
|
||
delegate: TabButton_ {
|
||
title: title_ // 标题
|
||
checked: checked_ // 初始时是否选中
|
||
index: index_ // 初始位置
|
||
width: hTabBarMain.tabWidth
|
||
}
|
||
|
||
// 事件：创建新标签时（与父类的槽同时生效）
|
||
onItemAdded: {
|
||
// 链接表现相关的槽函数
|
||
item.dragStart.connect(dragStart)
|
||
item.dragFinish.connect(dragFinish)
|
||
item.dragMoving.connect(dragMoving)
|
||
}
|
||
|
||
// 事件：按钮数量变化
|
||
onCountChanged: hTabBarMain.resetTabBtnWidth()
|
||
|
||
// ========================= 【拖拽相关】 =========================
|
||
|
||
property var intervalList: [] // 记录按钮位置区间的列表
|
||
property var originalPosList: [] // 记录按钮初始位置的列表
|
||
property int originalX // 记录本轮拖拽前，被拖拽按钮原本的位置
|
||
function dragStart(index){ // 方法：开始拖拽
|
||
// 重新记录当前所有按钮的位置
|
||
originalX = itemAt(index).x
|
||
intervalList = [-Infinity] // 下限：负无穷
|
||
originalPosList = [itemAt(0).x]
|
||
for(let i=1, c=model.count; i < c; i++){ // 按钮位置区间
|
||
const it = itemAt(i)
|
||
intervalList.push(it.x)
|
||
originalPosList.push(it.x)
|
||
}
|
||
intervalList.push(Infinity) // 上限：负无穷
|
||
dragIndicator.visible = true
|
||
|
||
}
|
||
function btnDragIndex(index){ // 函数：返回当前index应该所处的序号
|
||
const dragItem = itemAt(index)
|
||
const x = dragItem.x + Math.round(dragItem.width/2) // 被拖动按钮的中心位置
|
||
let go = 0 // 应该拖放到的位置
|
||
for(const c=intervalList.length-1; go < c; go++){
|
||
if(x >= intervalList[go] && x <= intervalList[go+1]){
|
||
break;
|
||
}
|
||
}
|
||
return go;
|
||
}
|
||
function dragMoving(index, x){ // 方法：拖拽移动
|
||
let go = btnDragIndex(index) // 应该拖放到的序号
|
||
dragIndicator.x = originalPosList[go]
|
||
}
|
||
function dragFinish(index){ // 方法：结束拖拽
|
||
dragIndicator.visible = false
|
||
let go = btnDragIndex(index) // 应该拖放到的序号
|
||
if(index !== go){ // 需要移动
|
||
// model.move(index, go, 1)
|
||
qmlapp.tab.moveTabPage(index, go)
|
||
} else { // 无需移动，则回到原位
|
||
itemAt(index).x = originalX
|
||
}
|
||
resetIndex()
|
||
}
|
||
}
|
||
|
||
// 元素：控制按钮
|
||
Rectangle{
|
||
id: tabBarControl
|
||
color: "#00000000"
|
||
width: size_.hTabBarHeight
|
||
height: size_.hTabBarHeight
|
||
visible: !qmlapp.tab.barIsLock
|
||
|
||
// 添加“+”按钮
|
||
IconButton {
|
||
anchors.fill: parent
|
||
anchors.margins: 4
|
||
icon_: "add"
|
||
color: theme.textColor
|
||
onClicked: {
|
||
qmlapp.tab.addNavi() // 添加导航页
|
||
}
|
||
}
|
||
}
|
||
|
||
// 动画
|
||
add: Transition { // 添加子项
|
||
enabled: qmlapp.enabledEffect
|
||
NumberAnimation {
|
||
properties: "opacity, scale" // 透明度和大小从小到大
|
||
from: 0; to: 1.0
|
||
easing.type: Easing.OutBack // 缓动：超出反弹
|
||
duration: 300
|
||
}
|
||
}
|
||
move: Transition { // 移动子项
|
||
enabled: qmlapp.enabledEffect
|
||
NumberAnimation {
|
||
properties: "x,y"
|
||
easing.type: Easing.OutBack
|
||
duration: 300
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 标签栏控制（右，锁定按钮）
|
||
Item{
|
||
width: size_.hTabBarHeight
|
||
Layout.fillHeight: true
|
||
|
||
// 锁定“🔒︎”按钮
|
||
Button {
|
||
checkable: true
|
||
checked: qmlapp.tab.barIsLock
|
||
onCheckedChanged: { // 双向绑定锁定标记
|
||
qmlapp.tab.barIsLock = checked
|
||
qmlapp.globalConfigs.setValue("window.barIsLock", checked, true)
|
||
}
|
||
anchors.fill: parent
|
||
anchors.margins: 4
|
||
|
||
contentItem: Icon_ {
|
||
icon: "lock"
|
||
anchors.fill: parent
|
||
color: parent.checked ? theme.bgColor : theme.textColor
|
||
}
|
||
|
||
background: Rectangle {
|
||
anchors.fill: parent
|
||
radius: size_.btnRadius
|
||
color: parent.checked ? theme.coverColor4 : (
|
||
parent.hovered ? theme.coverColor2 : "#00000000"
|
||
)
|
||
}
|
||
|
||
ToolTip_ {
|
||
visible: parent.hovered
|
||
text: qsTr("锁定标签栏")
|
||
}
|
||
}
|
||
}
|
||
} |