272 lines
11 KiB
QML
272 lines
11 KiB
QML
|
// ===========================================
|
|||
|
|
// =============== 上下双栏布局 ===============
|
|||
|
|
// ===========================================
|
|||
|
|
|
|||
|
|
import QtQuick 2.15
|
|||
|
|
import QtQuick.Controls 2.15
|
|||
|
|
import QtQuick.Layouts 1.15
|
|||
|
|
|
|||
|
|
Item {
|
|||
|
|
|
|||
|
|
// ========================= 【可调参数】 =========================
|
|||
|
|
|
|||
|
|
property QtObject topItem // 上元素
|
|||
|
|
property QtObject bottomItem // 下元素
|
|||
|
|
property real hideHeight: 40 // 一个栏小于该值时隐藏
|
|||
|
|
property real initSplitterY: 0.5 // 分割线初始位置。>1时为像素，0~1为比例。
|
|||
|
|
property string saveKey: "" // 如果非空，则缓存 hideTB 参数。
|
|||
|
|
property real margins: size_.spacing // 边缘空白
|
|||
|
|
property bool isShowSplitView: true // 是否展示分栏按钮
|
|||
|
|
signal switchView() // 更改分栏布局信号
|
|||
|
|
|
|||
|
|
// 只读信息
|
|||
|
|
property int hideTB: 0 // 0为不隐藏，1为隐藏上边，2为隐藏下边
|
|||
|
|
|
|||
|
|
// ===============================================================
|
|||
|
|
id: doubleCC
|
|||
|
|
// 上下元素变化时，挂到容器下
|
|||
|
|
onTopItemChanged: topItem.parent = topContainer
|
|||
|
|
onBottomItemChanged: bottomItem.parent = bottomContainer
|
|||
|
|
|
|||
|
|
Item {
|
|||
|
|
id: doubleColumn
|
|||
|
|
anchors.fill: parent
|
|||
|
|
anchors.margins: parent.margins
|
|||
|
|
|
|||
|
|
property alias hideHeight: doubleCC.hideHeight
|
|||
|
|
property alias splitterY: splitter.y // 分割线当前位置
|
|||
|
|
property bool isInitialized: false // 当前是否初始化完毕
|
|||
|
|
Component.onCompleted: { // 初始化分割线位置
|
|||
|
|
if(parent.initSplitterY <= 0)
|
|||
|
|
parent.initSplitterY = 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 // 合法检查
|
|||
|
|
}
|
|||
|
|
toTB(hideFlag)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
property int bottomMax: height - splitter.height // 下边缘位置
|
|||
|
|
|
|||
|
|
function setHideTB(h) {
|
|||
|
|
if(doubleCC.hideTB === h) return
|
|||
|
|
doubleCC.hideTB = h
|
|||
|
|
// 缓存状态
|
|||
|
|
if(doubleCC.saveKey) {
|
|||
|
|
let layoutDict = qmlapp.globalConfigs.getValue("window.doubleLayout")
|
|||
|
|
layoutDict[doubleCC.saveKey] = doubleCC.hideTB
|
|||
|
|
qmlapp.globalConfigs.setValue("window.doubleLayout", layoutDict)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 检查上下隐藏
|
|||
|
|
function toHide(isHeightChanged = false){
|
|||
|
|
if(!isInitialized) return // 防止初始化完成之前自动触发
|
|||
|
|
if(isHeightChanged && doubleCC.hideTB === 2) { // 总体高改变时下吸附
|
|||
|
|
splitterY = height - splitter.height
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if(splitterY+splitter.height > (height - hideHeight)){ // 隐藏下边
|
|||
|
|
topContainer.visible = true
|
|||
|
|
bottomContainer.visible = false
|
|||
|
|
setHideTB(2)
|
|||
|
|
splitterY = height - splitter.height
|
|||
|
|
}
|
|||
|
|
else if(splitterY < hideHeight){ // 隐藏上边
|
|||
|
|
topContainer.visible = false
|
|||
|
|
bottomContainer.visible = true
|
|||
|
|
setHideTB(1)
|
|||
|
|
splitterY = 0
|
|||
|
|
}
|
|||
|
|
else{
|
|||
|
|
topContainer.visible = true
|
|||
|
|
bottomContainer.visible = true
|
|||
|
|
setHideTB(0)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
// 去到上下。flag: 0-初始 1-上 2-下 3-切换分栏信号
|
|||
|
|
function toTB(flag) {
|
|||
|
|
if(flag === 3) {
|
|||
|
|
switchView()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if(flag === 0)
|
|||
|
|
toInitPosition()
|
|||
|
|
else if(flag === 1)
|
|||
|
|
splitterY = hideHeight-1
|
|||
|
|
else if(flag === 2)
|
|||
|
|
splitterY = height-splitter.height-hideHeight+1
|
|||
|
|
toHide()
|
|||
|
|
}
|
|||
|
|
// 去到初始位置
|
|||
|
|
function toInitPosition() {
|
|||
|
|
if(parent.initSplitterY >= 0 && parent.initSplitterY <= 1)
|
|||
|
|
splitterY = height * parent.initSplitterY
|
|||
|
|
else
|
|||
|
|
splitterY = parent.initSplitterY
|
|||
|
|
}
|
|||
|
|
// 拖拽分割线，或者调整整体宽度，都会触发检查隐藏
|
|||
|
|
onSplitterYChanged: toHide()
|
|||
|
|
onHeightChanged: toHide(true)
|
|||
|
|
|
|||
|
|
// 上容器
|
|||
|
|
Item{
|
|||
|
|
id: topContainer
|
|||
|
|
anchors.bottom: splitter.top
|
|||
|
|
anchors.top: parent.top
|
|||
|
|
anchors.left: parent.left
|
|||
|
|
anchors.right: parent.right
|
|||
|
|
onVisibleChanged: {
|
|||
|
|
topItem.parent = visible?topContainer:hideContainer
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 中间拖动条
|
|||
|
|
Item{
|
|||
|
|
id: splitter
|
|||
|
|
anchors.left: parent.left
|
|||
|
|
anchors.right: parent.right
|
|||
|
|
anchors.leftMargin: size_.spacing
|
|||
|
|
anchors.rightMargin: size_.spacing
|
|||
|
|
height: size_.spacing
|
|||
|
|
y: 0 // 位置可变换
|
|||
|
|
z: 1
|
|||
|
|
property bool isVisible: splitterMouseArea.containsMouse || btnsMouseArea.containsMouse || splitterMouseArea.drag.active || doubleCC.hideTB!==0
|
|||
|
|
|
|||
|
|
// 分割线 拖拽、悬停
|
|||
|
|
MouseArea {
|
|||
|
|
id: splitterMouseArea
|
|||
|
|
anchors.verticalCenter: parent.verticalCenter
|
|||
|
|
anchors.left: parent.left
|
|||
|
|
anchors.right: parent.right
|
|||
|
|
// 平常高为分隔栏高度，按下拖拽时高度增加防止鼠标出界
|
|||
|
|
height: pressed ? doubleCC.height : parent.height
|
|||
|
|
hoverEnabled: true // 鼠标悬停时，分割线颜色变深
|
|||
|
|
cursorShape: Qt.SizeVerCursor // 鼠标指针为双箭头
|
|||
|
|
// 拖拽
|
|||
|
|
drag.target: splitter
|
|||
|
|
drag.axis: Drag.YAxis
|
|||
|
|
drag.minimumY: 0
|
|||
|
|
drag.maximumY: doubleColumn.bottomMax
|
|||
|
|
drag.smoothed: false // 无阈值，一拖就动
|
|||
|
|
}
|
|||
|
|
// 分割线 视觉展示
|
|||
|
|
Rectangle {
|
|||
|
|
id: splitterShow
|
|||
|
|
anchors.verticalCenter: parent.verticalCenter
|
|||
|
|
anchors.left: parent.left
|
|||
|
|
anchors.right: parent.right
|
|||
|
|
height: size_.spacing * 0.3
|
|||
|
|
radius: height
|
|||
|
|
visible: splitterMouseArea.containsMouse || splitterMouseArea.drag.active || doubleCC.hideTB!==0
|
|||
|
|
color: splitterMouseArea.pressed ? theme.coverColor4 : theme.coverColor2
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 控制按钮 点击
|
|||
|
|
MouseArea {
|
|||
|
|
id: btnsMouseArea
|
|||
|
|
anchors.verticalCenter: parent.verticalCenter
|
|||
|
|
anchors.right: parent.right
|
|||
|
|
hoverEnabled: true
|
|||
|
|
cursorShape: Qt.PointingHandCursor
|
|||
|
|
height: containsMouse ? size_.line * 2 : parent.height
|
|||
|
|
width: size_.line * ((doubleCC.hideTB===0 ? 6 : 4) + (doubleCC.isShowSplitView ? 2 : 0))
|
|||
|
|
property int selectIndex: -1
|
|||
|
|
onExited: selectIndex = -1
|
|||
|
|
onPositionChanged: {
|
|||
|
|
if(doubleCC.hideTB===0) {
|
|||
|
|
if(mouse.x < size_.line * 2)
|
|||
|
|
selectIndex = 1
|
|||
|
|
else if(mouse.x < size_.line * 4)
|
|||
|
|
selectIndex = 2
|
|||
|
|
else if(mouse.x < size_.line * 6)
|
|||
|
|
selectIndex = 0
|
|||
|
|
else
|
|||
|
|
selectIndex = 3
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
if(mouse.x < size_.line * 2)
|
|||
|
|
selectIndex = doubleCC.hideTB===1 ? 2 : 1
|
|||
|
|
else if(mouse.x < size_.line * 4)
|
|||
|
|
selectIndex = 0
|
|||
|
|
else
|
|||
|
|
selectIndex = 3
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
onClicked: doubleColumn.toTB(selectIndex)
|
|||
|
|
|
|||
|
|
// 控制按钮 视觉
|
|||
|
|
Rectangle {
|
|||
|
|
color: theme.specialBgColor
|
|||
|
|
visible: (splitterMouseArea.containsMouse || btnsMouseArea.containsMouse) && !splitterMouseArea.drag.active
|
|||
|
|
anchors.verticalCenter: parent.verticalCenter
|
|||
|
|
anchors.left: parent.left
|
|||
|
|
anchors.right: parent.right
|
|||
|
|
height: size_.line * 2
|
|||
|
|
radius: size_.panelRadius
|
|||
|
|
|
|||
|
|
Row {
|
|||
|
|
height: parent.height
|
|||
|
|
Icon_ {
|
|||
|
|
visible: doubleCC.hideTB!==1
|
|||
|
|
width: parent.height
|
|||
|
|
height: width
|
|||
|
|
color: btnsMouseArea.selectIndex===1 ? theme.textColor:theme.specialTextColor
|
|||
|
|
icon: "arrow_to_left"
|
|||
|
|
rotation: 90
|
|||
|
|
}
|
|||
|
|
Icon_ {
|
|||
|
|
visible: doubleCC.hideTB!==2
|
|||
|
|
width: parent.height
|
|||
|
|
height: width
|
|||
|
|
color: btnsMouseArea.selectIndex===2 ? theme.textColor:theme.specialTextColor
|
|||
|
|
icon: "arrow_to_left"
|
|||
|
|
rotation: 270
|
|||
|
|
}
|
|||
|
|
Icon_ {
|
|||
|
|
width: parent.height
|
|||
|
|
height: width
|
|||
|
|
color: btnsMouseArea.selectIndex===0 ? theme.textColor:theme.specialTextColor
|
|||
|
|
icon: "arrow_to_center"
|
|||
|
|
rotation: 90
|
|||
|
|
}
|
|||
|
|
// 转为左右分栏
|
|||
|
|
Icon_ {
|
|||
|
|
visible: doubleCC.isShowSplitView
|
|||
|
|
width: parent.height
|
|||
|
|
height: width
|
|||
|
|
color: btnsMouseArea.selectIndex===3 ? theme.textColor:theme.specialTextColor
|
|||
|
|
icon: "split_view"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 下容器
|
|||
|
|
Item{
|
|||
|
|
id: bottomContainer
|
|||
|
|
anchors.top: splitter.bottom
|
|||
|
|
anchors.left: parent.left
|
|||
|
|
anchors.right: parent.right
|
|||
|
|
anchors.bottom: parent.bottom
|
|||
|
|
onVisibleChanged: {
|
|||
|
|
bottomItem.parent = visible?bottomContainer:hideContainer
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 隐藏容器
|
|||
|
|
Item {
|
|||
|
|
id: hideContainer
|
|||
|
|
visible: false
|
|||
|
|
height: Math.max(doubleCC.height, 400)
|
|||
|
|
anchors.left: parent.left
|
|||
|
|
anchors.right: parent.right
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|