211 lines
7.2 KiB
QML
211 lines
7.2 KiB
QML
import QtQuick
|
|
import QtQuick
|
|
import QtQuick.Layouts
|
|
import QtQuick.Controls
|
|
import FluentUI.Controls
|
|
import FluentUI.impl
|
|
|
|
Item{
|
|
id:control
|
|
FluentUI.theme: Theme.of(control)
|
|
property Component separator: comp_separator
|
|
property var items: []
|
|
property int spacing: 10
|
|
property int moreSpacing: 0
|
|
property font font: Typography.body
|
|
property int moreSize: 24
|
|
property string textRole: "title"
|
|
property var lastWidth: 0
|
|
signal clickItem(var model)
|
|
height: 30
|
|
onItemsChanged: {
|
|
d.cacheItems = []
|
|
list_model.clear()
|
|
list_model.append(items)
|
|
}
|
|
Component{
|
|
id: comp_separator
|
|
Icon{
|
|
source: FluentIcons.graph_ChevronRightMed
|
|
implicitHeight: 14
|
|
implicitWidth: 14
|
|
color: control.FluentUI.theme.res.textFillColorTertiary
|
|
}
|
|
}
|
|
ListModel{
|
|
id:list_model
|
|
}
|
|
QtObject{
|
|
id: d
|
|
property var cacheItems: []
|
|
onCacheItemsChanged: {
|
|
list_view.leftMargin = -cacheItems.reduce((sum, item) => sum + item.width, 0)
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
anchors.fill: parent
|
|
spacing: 0
|
|
IconButton{
|
|
id: btn_more
|
|
icon.name: FluentIcons.graph_More
|
|
icon.width: control.moreSize
|
|
icon.height: control.moreSize
|
|
Layout.preferredWidth: visible ? control.moreSize : 0
|
|
Layout.fillHeight: true
|
|
visible: d.cacheItems.length !== 0
|
|
background: Item{}
|
|
onClicked: {
|
|
loader_menu.sourceComponent = comp_menu
|
|
}
|
|
FluentUI.textColor: {
|
|
if(btn_more.hovered){
|
|
return control.FluentUI.theme.res.textFillColorPrimary
|
|
}
|
|
return control.FluentUI.theme.res.textFillColorTertiary
|
|
}
|
|
}
|
|
Item{
|
|
implicitWidth: visible ? control.moreSpacing : 0
|
|
Layout.fillHeight: true
|
|
visible: btn_more.visible
|
|
}
|
|
ListView{
|
|
id:list_view
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
orientation: ListView.Horizontal
|
|
model: list_model
|
|
clip: true
|
|
spacing: 0
|
|
interactive: false
|
|
boundsBehavior: ListView.StopAtBounds
|
|
cacheBuffer: 65535
|
|
delegate: Item{
|
|
height: item_layout.height
|
|
width: item_layout.width
|
|
property var dataModel: model
|
|
property var index: model.index
|
|
property bool hide: x-list_view.contentWidth+list_view.width < 0
|
|
property bool isLast: index === list_view.count-1
|
|
property color textColor: {
|
|
if(item_mouse.containsMouse){
|
|
return control.FluentUI.theme.res.textFillColorPrimary
|
|
}
|
|
return isLast ? control.FluentUI.theme.res.textFillColorPrimary : control.FluentUI.theme.res.textFillColorTertiary
|
|
}
|
|
visible: !hide
|
|
clip: true
|
|
onHideChanged: {
|
|
if(hide){
|
|
d.cacheItems.push(this)
|
|
}else{
|
|
var pos = d.cacheItems.indexOf(this)
|
|
if (pos > -1) {
|
|
d.cacheItems.splice(pos, 1)
|
|
}
|
|
}
|
|
d.cacheItems = d.cacheItems.sort(function(a, b){return a.index - b.index})
|
|
}
|
|
RowLayout{
|
|
id:item_layout
|
|
height: list_view.height
|
|
spacing: control.spacing
|
|
AutoLoader{
|
|
sourceComponent: control.separator
|
|
Layout.leftMargin: control.spacing
|
|
Layout.alignment: Qt.AlignVCenter
|
|
visible: 0 !== index
|
|
}
|
|
Label{
|
|
text: model[control.textRole]
|
|
font: control.font
|
|
Layout.alignment: Qt.AlignVCenter
|
|
color: textColor
|
|
MouseArea{
|
|
id:item_mouse
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onClicked: {
|
|
control.clickItem(model)
|
|
}
|
|
}
|
|
visible: !isLast
|
|
}
|
|
Label{
|
|
id: last_txt
|
|
text: model[control.textRole]
|
|
visible: false
|
|
}
|
|
|
|
ComboBox{
|
|
id: cb_com
|
|
visible: isLast
|
|
model: ["河津一号充换电站设计", "河津一号充换电站设计2", "河津一号充换电站设计3"]
|
|
Layout.preferredWidth: cb_com.displayText.length * 17.7
|
|
Layout.preferredHeight: 35
|
|
Layout.topMargin: -1
|
|
Layout.leftMargin: -2
|
|
background: {
|
|
color: "transparent"
|
|
implicitWidth: last_txt.width
|
|
// {
|
|
// console.log(cb_com.displayText)
|
|
// return cb_com.displayText.length
|
|
// }
|
|
|
|
implicitHeight: 35
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
AutoLoader{
|
|
id: loader_menu
|
|
}
|
|
Component{
|
|
id: comp_menu
|
|
Menu{
|
|
id: menu
|
|
Component.onCompleted: {
|
|
menu.popup()
|
|
}
|
|
onClosed:{
|
|
loader_menu.sourceComponent = undefined
|
|
}
|
|
FluentUI.dark: control.FluentUI.dark
|
|
FluentUI.primaryColor: control.FluentUI.primaryColor
|
|
Repeater{
|
|
model: d.cacheItems
|
|
delegate: MenuItem{
|
|
text: {
|
|
if(modelData.dataModel){
|
|
return modelData.dataModel.title
|
|
}
|
|
return ""
|
|
}
|
|
onClicked: {
|
|
menu.close()
|
|
control.clickItem(modelData.dataModel)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function remove(index,count){
|
|
for(var i=index;i<count+index;i++){
|
|
var pos = d.cacheItems.indexOf(list_view.itemAtIndex(i))
|
|
if (pos > -1) {
|
|
d.cacheItems.splice(pos, 1)
|
|
}
|
|
}
|
|
d.cacheItems.sort(function(a, b){return a.index - b.index})
|
|
list_model.remove(index,count)
|
|
}
|
|
function count(){
|
|
return list_model.count
|
|
}
|
|
}
|
|
|