271 lines
11 KiB
QML
271 lines
11 KiB
QML
|
// ===========================================
|
|||
|
|
// =============== 左右双栏布局 ===============
|
|||
|
|
// ===========================================
|
|||
|
|
|
|||
|
|
import QtQuick 2.15
|
|||
|
|
import QtQuick.Controls 2.15
|
|||
|
|
import QtQuick.Layouts 1.15
|
|||
|
|
|
|||
|
|
Item {
|
|||
|
|
|
|||
|
|
// ========================= 【可调参数】 =========================
|
|||
|
|
|
|||
|
|
property QtObject leftItem // 左元素
|
|||
|
|
property QtObject rightItem // 右元素
|
|||
|
|
property real hideWidth: 80 // 一个栏小于该值时隐藏
|
|||
|
|
property real initSplitterX: 0.5 // 分割线初始位置。>1时为像素，0~1为比例。
|
|||
|
|
property string saveKey: "" // 如果非空，则缓存 hideLR 参数。
|
|||
|
|
property real margins: size_.spacing // 边缘空白
|
|||
|
|
property bool isShowSplitView: false // 是否展示分栏按钮
|
|||
|
|
signal switchView() // 更改分栏布局信号
|
|||
|
|
|
|||
|
|
// 只读信息
|
|||
|
|
property int hideLR: 0 // 0为不隐藏，1为隐藏左边，2为隐藏右边
|
|||
|
|
|
|||
|
|
// ===============================================================
|
|||
|
|
id: doubleCC
|
|||
|
|
// 左右元素变化时，挂到容器下
|
|||
|
|
onLeftItemChanged: leftItem.parent = leftContainer
|
|||
|
|
onRightItemChanged: rightItem.parent = rightContainer
|
|||
|
|
|
|||
|
|
Item {
|
|||
|
|
id: doubleColumn
|
|||
|
|
anchors.fill: parent
|
|||
|
|
anchors.margins: parent.margins
|
|||
|
|
|
|||
|
|
property alias hideWidth: doubleCC.hideWidth
|
|||
|
|
property alias splitterX: splitter.x // 分割线当前位置
|
|||
|
|
property bool isInitialized: false // 当前是否初始化完毕
|
|||
|
|
Component.onCompleted: { // 初始化分割线位置
|
|||
|
|
if(parent.initSplitterX <= 0)
|
|||
|
|
parent.initSplitterX = 0.5 // 默认值0.5
|
|||
|
|
Qt.callLater(() => { // 延迟一个事件循环，再进行位置初始化
|
|||
|
|
isInitialized = true // 标记初始化完成
|
|||
|
|
let hideFlag = 0
|
|||
|
|
if(doubleCC.saveKey) { // 取hide缓存
|
|||
|
|
const layoutDict = qmlapp.globalConfigs.getValue("window.doubleLayout")
|
|||
|
|
const f = layoutDict[doubleCC.saveKey]
|
|||
|
|
if(Number.isInteger(f)) hideFlag = f // 合法检查
|
|||
|
|
}
|
|||
|
|
toLR(hideFlag)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
property int rightMax: width - splitter.width // 右边缘位置
|
|||
|
|
|
|||
|
|
function setHideLR(h) {
|
|||
|
|
if(doubleCC.hideLR === h) return
|
|||
|
|
doubleCC.hideLR = h
|
|||
|
|
// 缓存状态
|
|||
|
|
if(doubleCC.saveKey) {
|
|||
|
|
let layoutDict = qmlapp.globalConfigs.getValue("window.doubleLayout")
|
|||
|
|
layoutDict[doubleCC.saveKey] = doubleCC.hideLR
|
|||
|
|
qmlapp.globalConfigs.setValue("window.doubleLayout", layoutDict)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 检查左右隐藏
|
|||
|
|
function toHide(isWidthChanged = false){
|
|||
|
|
if(!isInitialized) return // 防止初始化完成之前自动触发
|
|||
|
|
if(isWidthChanged && doubleCC.hideLR === 2) { // 总体宽度改变时右吸附
|
|||
|
|
splitterX = width - splitter.width
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if(splitterX+splitter.width > (width - hideWidth)){ // 隐藏右边
|
|||
|
|
leftContainer.visible = true
|
|||
|
|
rightContainer.visible = false
|
|||
|
|
setHideLR(2)
|
|||
|
|
splitterX = width - splitter.width
|
|||
|
|
}
|
|||
|
|
else if(splitterX < hideWidth){ // 隐藏左边
|
|||
|
|
leftContainer.visible = false
|
|||
|
|
rightContainer.visible = true
|
|||
|
|
setHideLR(1)
|
|||
|
|
splitterX = 0
|
|||
|
|
}
|
|||
|
|
else{
|
|||
|
|
leftContainer.visible = true
|
|||
|
|
rightContainer.visible = true
|
|||
|
|
setHideLR(0)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
// 去到左右。flag: 0-初始 1-左 2-右 3-切换分栏信号
|
|||
|
|
function toLR(flag) {
|
|||
|
|
if(flag === 3) {
|
|||
|
|
switchView()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if(flag === 0)
|
|||
|
|
toInitPosition()
|
|||
|
|
else if(flag === 1)
|
|||
|
|
splitterX = hideWidth-1
|
|||
|
|
else if(flag === 2)
|
|||
|
|
splitterX = width-splitter.width-hideWidth+1
|
|||
|
|
toHide()
|
|||
|
|
}
|
|||
|
|
// 去到初始位置
|
|||
|
|
function toInitPosition() {
|
|||
|
|
if(parent.initSplitterX >= 0 && parent.initSplitterX <= 1)
|
|||
|
|
splitterX = width * parent.initSplitterX - size_.spacing * 2
|
|||
|
|
else
|
|||
|
|
splitterX = parent.initSplitterX
|
|||
|
|
}
|
|||
|
|
// 拖拽分割线，或者调整整体宽度，都会触发检查隐藏
|
|||
|
|
onSplitterXChanged: toHide()
|
|||
|
|
onWidthChanged: toHide(true)
|
|||
|
|
// 左容器
|
|||
|
|
Item{
|
|||
|
|
id: leftContainer
|
|||
|
|
anchors.right: splitter.left
|
|||
|
|
anchors.left: parent.left
|
|||
|
|
anchors.top: parent.top
|
|||
|
|
anchors.bottom: parent.bottom
|
|||
|
|
onVisibleChanged: {
|
|||
|
|
leftItem.parent = visible?leftContainer:hideContainer
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 中间拖动条
|
|||
|
|
Item{
|
|||
|
|
id: splitter
|
|||
|
|
anchors.top: parent.top
|
|||
|
|
anchors.bottom: parent.bottom
|
|||
|
|
anchors.topMargin: size_.spacing
|
|||
|
|
anchors.bottomMargin: size_.spacing
|
|||
|
|
width: size_.spacing
|
|||
|
|
x: 0 // 位置可变换
|
|||
|
|
z: 1
|
|||
|
|
property bool isVisible: splitterMouseArea.containsMouse || btnsMouseArea.containsMouse || splitterMouseArea.drag.active || doubleCC.hideLR!==0
|
|||
|
|
|
|||
|
|
// 分割线 拖拽、悬停
|
|||
|
|
MouseArea {
|
|||
|
|
id: splitterMouseArea
|
|||
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|||
|
|
anchors.top: parent.top
|
|||
|
|
anchors.bottom: btnsMouseArea.top
|
|||
|
|
// 平常宽度为分隔栏宽度，按下拖拽时宽度增加防止鼠标出界
|
|||
|
|
width: pressed ? doubleCC.width : parent.width
|
|||
|
|
hoverEnabled: true // 鼠标悬停时，分割线颜色变深
|
|||
|
|
cursorShape: Qt.SizeHorCursor // 鼠标指针为双箭头
|
|||
|
|
// 拖拽
|
|||
|
|
drag.target: splitter
|
|||
|
|
drag.axis: Drag.XAxis
|
|||
|
|
drag.minimumX: 0
|
|||
|
|
drag.maximumX: doubleColumn.rightMax
|
|||
|
|
drag.smoothed: false // 无阈值，一拖就动
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
// 分割线 视觉展示
|
|||
|
|
Rectangle {
|
|||
|
|
id: splitterShow
|
|||
|
|
visible: splitter.isVisible
|
|||
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|||
|
|
anchors.top: parent.top
|
|||
|
|
anchors.bottom: parent.bottom
|
|||
|
|
width: size_.spacing * 0.3
|
|||
|
|
radius: width
|
|||
|
|
color: splitterMouseArea.pressed ? theme.coverColor4 : theme.coverColor2
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 控制按钮 点击
|
|||
|
|
MouseArea {
|
|||
|
|
id: btnsMouseArea
|
|||
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|||
|
|
anchors.bottom: parent.bottom
|
|||
|
|
hoverEnabled: true
|
|||
|
|
cursorShape: Qt.PointingHandCursor
|
|||
|
|
width: containsMouse ? size_.line * 2 : parent.width
|
|||
|
|
height: size_.line * ((doubleCC.hideLR===0 ? 6 : 4) + (doubleCC.isShowSplitView ? 2 : 0))
|
|||
|
|
property int selectIndex: -1
|
|||
|
|
onExited: selectIndex = -1
|
|||
|
|
onPositionChanged: {
|
|||
|
|
if(doubleCC.hideLR===0) {
|
|||
|
|
if(mouse.y < size_.line * 2)
|
|||
|
|
selectIndex = 1
|
|||
|
|
else if(mouse.y < size_.line * 4)
|
|||
|
|
selectIndex = 2
|
|||
|
|
else if(mouse.y < size_.line * 6)
|
|||
|
|
selectIndex = 0
|
|||
|
|
else
|
|||
|
|
selectIndex = 3
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
if(mouse.y < size_.line * 2)
|
|||
|
|
selectIndex = doubleCC.hideLR===1 ? 2 : 1
|
|||
|
|
else if(mouse.y < size_.line * 4)
|
|||
|
|
selectIndex = 0
|
|||
|
|
else
|
|||
|
|
selectIndex = 3
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
onClicked: doubleColumn.toLR(selectIndex)
|
|||
|
|
|
|||
|
|
// 控制按钮 视觉
|
|||
|
|
Rectangle {
|
|||
|
|
color: theme.specialBgColor
|
|||
|
|
visible: (splitterMouseArea.containsMouse || btnsMouseArea.containsMouse) && !splitterMouseArea.drag.active
|
|||
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|||
|
|
anchors.top: parent.top
|
|||
|
|
anchors.bottom: parent.bottom
|
|||
|
|
width: size_.line * 2
|
|||
|
|
radius: size_.panelRadius
|
|||
|
|
|
|||
|
|
Column {
|
|||
|
|
width: parent.width
|
|||
|
|
Icon_ {
|
|||
|
|
visible: doubleCC.hideLR!==1
|
|||
|
|
width: parent.width
|
|||
|
|
height: width
|
|||
|
|
color: btnsMouseArea.selectIndex===1 ? theme.textColor:theme.specialTextColor
|
|||
|
|
icon: "arrow_to_left"
|
|||
|
|
}
|
|||
|
|
Icon_ {
|
|||
|
|
visible: doubleCC.hideLR!==2
|
|||
|
|
width: parent.width
|
|||
|
|
height: width
|
|||
|
|
color: btnsMouseArea.selectIndex===2 ? theme.textColor:theme.specialTextColor
|
|||
|
|
icon: "arrow_to_left"
|
|||
|
|
mirror: true
|
|||
|
|
}
|
|||
|
|
Icon_ {
|
|||
|
|
width: parent.width
|
|||
|
|
height: width
|
|||
|
|
color: btnsMouseArea.selectIndex===0 ? theme.textColor:theme.specialTextColor
|
|||
|
|
icon: "arrow_to_center"
|
|||
|
|
}
|
|||
|
|
// 转为上下分栏
|
|||
|
|
Icon_ {
|
|||
|
|
visible: doubleCC.isShowSplitView
|
|||
|
|
width: parent.width
|
|||
|
|
height: width
|
|||
|
|
color: btnsMouseArea.selectIndex===3 ? theme.textColor:theme.specialTextColor
|
|||
|
|
icon: "split_view"
|
|||
|
|
rotation: 90
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 右容器
|
|||
|
|
Item{
|
|||
|
|
id: rightContainer
|
|||
|
|
anchors.left: splitter.right
|
|||
|
|
anchors.right: parent.right
|
|||
|
|
anchors.top: parent.top
|
|||
|
|
anchors.bottom: parent.bottom
|
|||
|
|
onVisibleChanged: {
|
|||
|
|
rightItem.parent = visible?rightContainer:hideContainer
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 隐藏容器
|
|||
|
|
Item {
|
|||
|
|
id: hideContainer
|
|||
|
|
visible: false
|
|||
|
|
width: Math.max(doubleCC.width, 400)
|
|||
|
|
anchors.top: parent.top
|
|||
|
|
anchors.bottom: parent.bottom
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|