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()
}
}

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

@ -35,11 +35,17 @@ TextArea{
}
selectByMouse: true
background: FluTextBoxBackground{ inputItem: control }
Keys.onEnterPressed: {
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()
}
Keys.onBackPressed: {
control.commit()
}
MouseArea{
anchors.fill: parent

29
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,9 +1006,7 @@ 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]
@ -1025,6 +1020,8 @@ Item {
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,12 +1030,12 @@ Item {
}else{
nav_swipe.push(obj)
}
}
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
}

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

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

229
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
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 4
return control .color
}
anchors{
right: vertical ? parent.right : undefined
bottom: horizontal ? parent.bottom : undefined
}
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
visible: control.size < 1.0
}
background: Rectangle{
radius: 5
color: {
if(expand && item_react.opacity){
if(FluTheme.dark){
return Qt.rgba(0,0,0,1)
states: [
State{
name:"hide"
when: contentItem.collapsed
PropertyChanges {
target: rect_bar
width: vertical ? 6 : parent.width
height: horizontal ? 6 : parent.height
}
return Qt.rgba(1,1,1,1)
}
return Qt.rgba(0,0,0,0)
,State{
name:"show"
when: !contentItem.expand
PropertyChanges {
target: rect_bar
width: vertical ? 2 : parent.width
height: horizontal ? 2 : parent.height
}
MouseArea{
id:mouse_item
hoverEnabled: true
anchors.fill: parent
onEntered: {
timer.restart()
}
onExited: {
timer.restart()
]
transitions:[
Transition {
from: "hide"
SequentialAnimation {
PauseAnimation { duration: 450 }
NumberAnimation {
target: rect_bar
properties: vertical ? "width" : "height"
duration: 167
easing.type: Easing.InCubic
to:2
}
}
}
Timer{
id:timer
interval: 800
onTriggered: {
expand = mouse_item.containsMouse || btn_top.hovered || btn_bottom.hovered || btn_left.hovered || btn_right.hovered
,Transition {
from: "show"
NumberAnimation {
target: rect_bar
properties: vertical ? "width" : "height"
duration: 167
easing.type: Easing.InCubic
to:6
}
}
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()
}
]
}
}

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

88
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,8 +59,21 @@ Rectangle {
}
Component{
id:com_edit
FluTextBox {
Item{
anchors.fill: parent
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
@ -51,6 +81,7 @@ Rectangle {
forceActiveFocus()
selectAll()
}
rightPadding: 24
onCommit: {
if(!readOnly){
display = text
@ -59,6 +90,27 @@ Rectangle {
}
}
}
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 = ""
}
}
}
}
Component{
id:com_text
FluText {
@ -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