amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-11-23 11:17:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
zhuzichu 2023-06-29 17:48:48 +08:00
parent 8a52f143d7
commit 9656b3dd95
10 changed files with 219 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
example/qml/page/T_TableView.qml
View File

@ -63,9 +63,10 @@ FluContentPage{
age:getRandomAge(),
address: getRandomAddresses(),
nickname: getRandomNickname(),
height:40,
minimumHeight:40,
maximumHeight:200,
longstring:"测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
height:46,
minimumHeight:46,
maximumHeight:300,
action:com_action
})
}
@ -136,6 +137,13 @@ FluContentPage{
minimumWidth:80,
maximumWidth:200
},
{
title: '长字符串',
dataIndex: 'longstring',
width:200,
minimumWidth:100,
maximumWidth:300
},
{
title: '操作',
dataIndex: 'action',

6
example/qml/window/MainWindow.qml
View File

@ -271,7 +271,9 @@ CustomWindow {
FluTheme.darkMode = FluDarkMode.Dark
}
}
if(FluTools.isWin()){
if(FluTools.isMacos()){
changeDark()
}else{
var target = window.contentItem
var pos = button.mapToItem(target,0,0)
var mouseX = pos.x
@ -288,8 +290,6 @@ CustomWindow {
anim_radius.enabled = true
canvas.radius = canvas.maxRadius
},canvas.canvasSize)
}else{
changeDark()
}
}

7
src/imports/FluentUI/Controls/FluComboBox.qml
View File

@ -67,10 +67,9 @@ ComboBox {
Component.onCompleted: {
forceActiveFocus()
}
Keys.onEnterPressed: {
control.commit()
}
Keys.onReturnPressed: {
Keys.onEnterPressed: (event)=> handleCommit(event)
Keys.onReturnPressed:(event)=> handleCommit(event)
function handleCommit(event){
control.commit()
}
}

16
src/imports/FluentUI/Controls/FluMultilineTextBox.qml
View File

@ -35,11 +35,17 @@ TextArea{
}
selectByMouse: true
background: FluTextBoxBackground{ inputItem: control }
Keys.onEnterPressed: {
control.commit()
}
Keys.onBackPressed: {
control.commit()
Keys.onEnterPressed: (event)=> d.handleCommit(event)
Keys.onReturnPressed:(event)=> d.handleCommit(event)
QtObject{
id:d
function handleCommit(event){
if(event.modifiers & Qt.ControlModifier){
insert(control.cursorPosition, "\n")
return
}
control.commit()
}
}
MouseArea{
anchors.fill: parent

55
src/imports/FluentUI/Controls/FluNavigationView.qml
View File

@ -958,6 +958,13 @@ Item {
control_popup.open()
}
}
Component{
id:com_placeholder
Item{
property int pageMode: FluNavigationView.SingleInstance
property string url
}
}
function collapseAll(){
for(var i=0;i<nav_list.model.length;i++){
var item = nav_list.model[i]
@ -976,18 +983,8 @@ Item {
function getItems(){
return nav_list.model
}
Component{
id:com_placeholder
Item{
property int pageMode: FluNavigationView.SingleInstance
property string url
}
}
function push(url,argument={}){
let page = nav_swipe.find(function(item) {
var page = nav_swipe.find(function(item) {
return item.url === url;
})
if(page){
@ -1009,22 +1006,22 @@ Item {
default:
}
}
var comp = Qt.createComponent(url)
if (comp.status === Component.Ready) {
//先判断nav_swipe2中是否有当前url数据
var pageIndex = -1
for(var i=0;i<nav_swipe2.children.length;i++){
var item = nav_swipe2.children[i]
if(item.url === url){
pageIndex = i
break
}
var pageIndex = -1
for(var i=0;i<nav_swipe2.children.length;i++){
var item = nav_swipe2.children[i]
if(item.url === url){
pageIndex = i
break
}
var options = Object.assign(argument,{url:url})
if(pageIndex!==-1){
nav_swipe2.currentIndex = pageIndex
nav_swipe.push(com_placeholder,options)
}else{
}
var options = Object.assign(argument,{url:url})
if(pageIndex!==-1){
nav_swipe2.currentIndex = pageIndex
nav_swipe.push(com_placeholder,options)
}else{
var comp = Qt.createComponent(url)
if (comp.status === Component.Ready) {
var obj = comp.createObject(nav_swipe,options)
if(obj.pageMode === FluNavigationView.SingleInstance){
nav_swipe.push(com_placeholder,options)
@ -1033,11 +1030,11 @@ Item {
}else{
nav_swipe.push(obj)
}
}else{
console.error(comp.errorString())
}
d.stackItems.push(nav_list.model[nav_list.currentIndex])
}else{
console.error(comp.errorString())
}
d.stackItems.push(nav_list.model[nav_list.currentIndex])
}
function getCurrentIndex(){
return nav_list.currentIndex

12
src/imports/FluentUI/Controls/FluPasswordBox.qml
View File

@ -51,11 +51,13 @@ TextField{
}
}
}
Keys.onEnterPressed: {
control.commit()
}
Keys.onBackPressed: {
control.commit()
Keys.onEnterPressed: (event)=> d.handleCommit(event)
Keys.onReturnPressed:(event)=> d.handleCommit(event)
QtObject{
id:d
function handleCommit(event){
control.commit()
}
}
FluIconButton{
id:btn_reveal

249
src/imports/FluentUI/Controls/FluScrollBar.qml
View File

@ -1,189 +1,88 @@
import QtQuick
import QtQuick.Controls.Basic
import QtQuick.Controls.impl
import QtQuick.Templates as T
import FluentUI
ScrollBar {
property color handleNormalColor: Qt.rgba(134/255,134/255,134/255,1)
property color handleHoverColor: Qt.lighter(handleNormalColor)
property color handlePressColor: Qt.darker(handleNormalColor)
property bool expand: false
T.ScrollBar {
id: control
property color color : FluTheme.dark ? Qt.rgba(159/255,159/255,159/255,1) : Qt.rgba(138/255,138/255,138/255,1)
property color pressedColor: FluTheme.dark ? Qt.darker(color,1.2) : Qt.lighter(color,1.2)
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)
visible: control.policy !== ScrollBar.AlwaysOff
minimumSize: 0.3
topPadding:{
if(vertical){
if(expand)
return 15
return 2
}else{
if(expand){
return 2
}
return 4
}
}
bottomPadding:{
if(vertical){
if(expand)
return 15
return 2
}else{
if(expand){
return 2
}
return 4
}
}
leftPadding:{
if(vertical){
if(expand){
return 2
}
return 4
}else{
if(expand)
return 15
return 2
}
}
rightPadding:{
if(vertical){
if(expand){
return 2
}
return 4
}else{
if(expand)
return 15
return 2
}
}
Behavior on topPadding {
NumberAnimation{
duration: 150
}
}
Behavior on bottomPadding {
NumberAnimation{
duration: 150
}
}
Behavior on leftPadding {
NumberAnimation{
duration: 150
}
}
Behavior on rightPadding {
NumberAnimation{
duration: 150
}
}
contentItem: Rectangle {
id:item_react
implicitWidth: expand ? 8 : 2
implicitHeight: expand ? 8 : 2
radius: width / 2
color: control.pressed?handlePressColor:control.hovered?handleHoverColor:handleNormalColor
opacity:(control.policy === ScrollBar.AlwaysOn || control.size < 1.0)?1.0:0.0
}
background: Rectangle{
radius: 5
color: {
if(expand && item_react.opacity){
if(FluTheme.dark){
return Qt.rgba(0,0,0,1)
padding: 2
visible: control.policy !== T.ScrollBar.AlwaysOff
minimumSize: Math.max(orientation === Qt.Horizontal ? height / width : width / height,0.3)
contentItem: Item {
property bool collapsed: (control.policy === T.ScrollBar.AlwaysOn || (control.active && control.size < 1.0))
implicitWidth: control.interactive ? 6 : 2
implicitHeight: control.interactive ? 6 : 2
Rectangle{
id:rect_bar
width: vertical ? 2 : parent.width
height: horizontal ? 2 : parent.height
color:{
if(control.pressed){
return control.pressedColor
}
return Qt.rgba(1,1,1,1)
return control .color
}
return Qt.rgba(0,0,0,0)
}
MouseArea{
id:mouse_item
hoverEnabled: true
anchors.fill: parent
onEntered: {
timer.restart()
anchors{
right: vertical ? parent.right : undefined
bottom: horizontal ? parent.bottom : undefined
}
onExited: {
timer.restart()
radius: width / 2
visible: control.size < 1.0
}
states: [
State{
name:"hide"
when: contentItem.collapsed
PropertyChanges {
target: rect_bar
width: vertical ? 6 : parent.width
height: horizontal ? 6 : parent.height
}
}
}
}
Timer{
id:timer
interval: 800
onTriggered: {
expand = mouse_item.containsMouse || btn_top.hovered || btn_bottom.hovered || btn_left.hovered || btn_right.hovered
}
}
Behavior on implicitWidth {
NumberAnimation{
duration: 150
}
}
FluIconButton{
id:btn_top
iconSource: FluentIcons.CaretSolidUp
anchors.horizontalCenter: parent.horizontalCenter
width:10
height:10
z:100
iconColor: hovered ? FluColors.Black : FluColors.Grey120
iconSize: 8
anchors.top: parent.top
anchors.topMargin: 4
visible:vertical && expand && item_react.opacity
onClicked:{
decrease()
}
}
FluIconButton{
id:btn_bottom
iconSource: FluentIcons.CaretSolidDown
visible:vertical && expand && item_react.opacity
width:10
height:10
iconSize: 8
iconColor: hovered ? FluColors.Black : FluColors.Grey120
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 4
onClicked:{
increase()
}
}
FluIconButton{
id:btn_left
iconSource: FluentIcons.CaretSolidLeft
visible:!vertical && expand && item_react.opacity
width:10
height:10
iconSize: 8
iconColor: hovered ? FluColors.Black : FluColors.Grey120
anchors.leftMargin: 4
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
onClicked:{
decrease()
}
}
FluIconButton{
id:btn_right
iconSource: FluentIcons.CaretSolidRight
visible:!vertical && expand && item_react.opacity
width:10
height:10
iconSize: 8
iconColor: hovered ? FluColors.Black : FluColors.Grey120
anchors.rightMargin: 4
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
onClicked:{
increase()
}
,State{
name:"show"
when: !contentItem.expand
PropertyChanges {
target: rect_bar
width: vertical ? 2 : parent.width
height: horizontal ? 2 : parent.height
}
}
]
transitions:[
Transition {
from: "hide"
SequentialAnimation {
PauseAnimation { duration: 450 }
NumberAnimation {
target: rect_bar
properties: vertical ? "width" : "height"
duration: 167
easing.type: Easing.InCubic
to:2
}
}
}
,Transition {
from: "show"
NumberAnimation {
target: rect_bar
properties: vertical ? "width" : "height"
duration: 167
easing.type: Easing.InCubic
to:6
}
}
]
}
}

2
src/imports/FluentUI/Controls/FluScrollablePage.qml
View File

@ -41,6 +41,8 @@ FluPage {
contentWidth: parent.width
contentHeight: container.height
ScrollBar.vertical: FluScrollBar {
anchors.right: flickview.right
anchors.rightMargin: 2
}
anchors{
top: text_title.bottom

110
src/imports/FluentUI/Controls/FluTableView.qml
View File

@ -30,6 +30,23 @@ Rectangle {
QtObject{
id:d
property var header_rows:[]
function obtEditDelegate(column,row){
var display = table_model.data(table_model.index(row,column),"display")
var cellItem = table_view.itemAtCell(column, row)
var cellPosition = cellItem.mapToItem(scroll_table, 0, 0)
item_loader.column = column
item_loader.row = row
item_loader.x = table_view.contentX + cellPosition.x
item_loader.y = table_view.contentY + cellPosition.y
item_loader.width = table_view.columnWidthProvider(column)
item_loader.height = table_view.rowHeightProvider(row)
item_loader.display = display
var obj =columnSource[column].editDelegate
if(obj){
return obj
}
return com_edit
}
}
onDataSourceChanged: {
table_model.clear()
@ -42,20 +59,55 @@ Rectangle {
}
Component{
id:com_edit
FluTextBox {
Item{
anchors.fill: parent
text: display
readOnly: true === columnSource[column].readOnly
verticalAlignment: TextInput.AlignVCenter
Component.onCompleted: {
forceActiveFocus()
selectAll()
}
onCommit: {
if(!readOnly){
display = text
ScrollView{
id:item_scroll
clip: true
anchors.fill: parent
ScrollBar.vertical: FluScrollBar{
parent: item_scroll
x: item_scroll.mirrored ? 0 : item_scroll.width - width
y: item_scroll.topPadding
height: item_scroll.availableHeight
active: item_scroll.ScrollBar.horizontal.active
}
FluMultilineTextBox {
id:text_box
text: display
readOnly: true === columnSource[column].readOnly
verticalAlignment: TextInput.AlignVCenter
Component.onCompleted: {
forceActiveFocus()
selectAll()
}
rightPadding: 24
onCommit: {
if(!readOnly){
display = text
}
tableView.closeEditor()
}
}
}
FluIconButton{
iconSource:FluentIcons.ChromeClose
iconSize: 10
width: 20
height: 20
visible: {
if(text_box.readOnly)
return false
return text_box.text !== ""
}
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: 5
}
onClicked:{
text_box.text = ""
}
tableView.closeEditor()
}
}
}
@ -144,7 +196,7 @@ Rectangle {
return
}
selection_model.setCurrentIndex(table_model.index(row,column), ItemSelectionModel.Current)
item_loader.sourceComponent = obtEditDelegate(column,row)
item_loader.sourceComponent = d.obtEditDelegate(column,row)
var index = table_model.index(row,column)
}
onTapped: {
@ -178,29 +230,12 @@ Rectangle {
property int row
property var tableView: control
onDisplayChanged: {
table_model.setData(table_model.index(row,column),"display",display)
var obj = table_model.getRow(row)
obj[columnSource[column].dataIndex] = display
table_model.setRow(row,obj)
}
}
}
function obtEditDelegate(column,row){
var display = table_model.data(table_model.index(row,column),"display")
var cellItem = table_view.itemAtCell(column, row)
var cellPosition = cellItem.mapToItem(scroll_table, 0, 0)
item_loader.column = column
item_loader.row = row
item_loader.x = table_view.contentX + cellPosition.x
item_loader.y = table_view.contentY + cellPosition.y
item_loader.width = table_view.columnWidthProvider(column)
item_loader.height = table_view.rowHeightProvider(row)
item_loader.display = display
var obj =columnSource[column].editDelegate
if(obj){
return obj
}
return com_edit
}
Component{
id:com_handle
FluControl {
@ -332,7 +367,6 @@ Rectangle {
}
delegate: Rectangle{
readonly property real cellPadding: 8
readonly property var obj : table_model.getRow(row)
implicitWidth: Math.max(header_vertical.width, row_text.implicitWidth + (cellPadding * 2))
implicitHeight: row_text.implicitHeight + (cellPadding * 2)
color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
@ -358,7 +392,10 @@ Rectangle {
acceptedButtons: Qt.LeftButton
cursorShape: Qt.SplitVCursor
preventStealing: true
visible: !(obj.height === obj.minimumHeight && obj.width === obj.maximumHeight)
visible: {
var obj = table_model.getRow(row)
return !(obj.height === obj.minimumHeight && obj.width === obj.maximumHeight)
}
propagateComposedEvents: true
onPressed :
(mouse)=>{
@ -370,11 +407,12 @@ Rectangle {
}
onPositionChanged:
(mouse)=>{
var obj = table_model.getRow(row)
var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
var minimumHeight = obj.minimumHeight
var maximumHeight = obj.maximumHeight
if(!minimumHeight){
minimumHeight = 40
minimumHeight = 46
}
if(!maximumHeight){
maximumHeight = 65535

15
src/imports/FluentUI/Controls/FluTextBox.qml
View File

@ -33,12 +33,6 @@ TextField{
}
return placeholderNormalColor
}
Keys.onEnterPressed: {
control.commit()
}
Keys.onReturnPressed: {
control.commit()
}
selectByMouse: true
rightPadding: icon_end.visible ? 50 : 30
background: FluTextBoxBackground{
@ -56,6 +50,14 @@ TextField{
}
}
}
Keys.onEnterPressed: (event)=> d.handleCommit(event)
Keys.onReturnPressed:(event)=> d.handleCommit(event)
QtObject{
id:d
function handleCommit(event){
control.commit()
}
}
MouseArea{
anchors.fill: parent
cursorShape: Qt.IBeamCursor
@ -67,7 +69,6 @@ TextField{
iconSize: 10
width: 20
height: 20
opacity: 0.5
visible: {
if(control.readOnly)
return false