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

update

Browse Source
This commit is contained in:
zhuzihcu 2023-06-14 19:29:23 +08:00
parent d926a84f72
commit 94f8047508
9 changed files with 310 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
example/qml/global/ItemsOriginal.qml
View File

@ -252,6 +252,12 @@ FluObject{
navigationView.push("qrc:/example/qml/page/T_TableView.qml")
}
}
FluPaneItem{
title:"TableView2"
onTap:{
navigationView.push("qrc:/example/qml/page/T_TableView2.qml")
}
}
FluPaneItem{
title:"MultiWindow"
onTap:{

4
example/qml/page/T_ComboBox.qml
View File

@ -28,10 +28,6 @@ FluScrollablePage{
ListElement { text: "Apple" }
ListElement { text: "Coconut" }
}
onAccepted: {
if (find(editText) === -1)
model_1.append({text: editText})
}
}
}
}

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

@ -14,12 +14,14 @@ FluScrollablePage{
{
title: '姓名',
dataIndex: 'name',
width:100
width:100,
},
{
title: '年龄',
dataIndex: 'age',
width:100
dataIndex: 'item_age',
width:100,
minimumWidth:100
},
{
title: '住址',
@ -41,17 +43,30 @@ FluScrollablePage{
loadData(1,10)
}
FluTableView{
id:table_view
Layout.fillWidth: true
Layout.topMargin: 20
pageCurrent:1
pageCount:10
itemCount: 1000
onRequestPage:
(page,count)=> {
loadData(page,count)
Component{
id:com_age
Item{
id:item_age
property var ageArr: [100,300,500,1000]
height: 60
FluComboBox{
width: 80
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: 10
}
model: ListModel {
ListElement { text: 100 }
ListElement { text: 300 }
ListElement { text: 500 }
ListElement { text: 1000 }
}
Component.onCompleted: {
currentIndex=ageArr.findIndex((element) => element === dataModel.age)
}
}
}
}
Component{
@ -65,7 +80,7 @@ FluScrollablePage{
text:"编辑"
horizontalPadding: 6
onClicked:{
showSuccess(JSON.stringify(dataObject))
showError(JSON.stringify(dataObject))
}
}
FluFilledButton{
@ -79,6 +94,20 @@ FluScrollablePage{
}
}
FluTableView{
id:table_view
Layout.fillWidth: true
Layout.topMargin: 20
pageCurrent:1
pageCount:10
itemCount: 1000
onRequestPage:
(page,count)=> {
loadData(page,count)
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: 10
@ -131,13 +160,34 @@ FluScrollablePage{
}
function loadData(page,count){
var numbers = [100, 300, 500, 1000];
function getRandomAge() {
var randomIndex = Math.floor(Math.random() * numbers.length);
return numbers[randomIndex];
}
var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
function getRandomName(){
var randomIndex = Math.floor(Math.random() * names.length);
return names[randomIndex];
}
var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
function getRandomNickname(){
var randomIndex = Math.floor(Math.random() * nicknames.length);
return nicknames[randomIndex];
}
var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
function getRandomAddresses(){
var randomIndex = Math.floor(Math.random() * addresses.length);
return addresses[randomIndex];
}
const dataSource = []
for(var i=0;i<count;i++){
dataSource.push({
name: "孙悟空%1".arg(((page-1)*count+i)),
age: 500,
address: "钟灵毓秀的花果山,如神仙仙境的水帘洞",
nickname: "齐天大圣",
name: getRandomName(),
item_age: com_age,
age:getRandomAge(),
address: getRandomAddresses(),
nickname: getRandomNickname(),
action:com_action
})
}

80
example/qml/page/T_TableView2.qml Normal file
View File

@ -0,0 +1,80 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "qrc:///example/qml/component"
FluContentPage{
title:"TableView"
Component.onCompleted: {
loadData(1,10)
}
function loadData(page,count){
var numbers = [100, 300, 500, 1000];
function getRandomAge() {
var randomIndex = Math.floor(Math.random() * numbers.length);
return numbers[randomIndex];
}
var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
function getRandomName(){
var randomIndex = Math.floor(Math.random() * names.length);
return names[randomIndex];
}
var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
function getRandomNickname(){
var randomIndex = Math.floor(Math.random() * nicknames.length);
return nicknames[randomIndex];
}
var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
function getRandomAddresses(){
var randomIndex = Math.floor(Math.random() * addresses.length);
return addresses[randomIndex];
}
const dataSource = []
for(var i=0;i<count;i++){
dataSource.push({
name: getRandomName(),
age:getRandomAge(),
address: getRandomAddresses(),
nickname: getRandomNickname()
})
}
table_view.dataSource = dataSource
}
FluTableView2{
id:table_view
anchors.fill: parent
anchors.topMargin: 20
columnSource:[
{
title: '姓名',
dataIndex: 'name',
width:100,
},
{
title: '年龄',
dataIndex: 'age',
width:100,
minimumWidth:100
},
{
title: '住址',
dataIndex: 'address',
width:200
},
{
title: '别名',
dataIndex: 'nickname',
width:100
}
]
}
}

3
src/imports/FluentUI/Controls/FluCopyableText.qml
View File

@ -17,6 +17,9 @@ TextEdit {
bottomPadding: 0
selectionColor: FluTheme.primaryColor.lightest
font:FluTextStyle.Body
onSelectedTextChanged: {
control.forceActiveFocus()
}
TapHandler {
acceptedButtons: Qt.RightButton
onTapped: control.echoMode !== TextInput.Password && menu.popup()

49
src/imports/FluentUI/Controls/FluScrollIndicator.qml Normal file
View File

@ -0,0 +1,49 @@
import QtQuick
import QtQuick.Controls.impl
import QtQuick.Templates as T
T.ScrollIndicator {
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)
padding: 2
contentItem: Rectangle {
implicitWidth: 2
implicitHeight: 2
color: control.palette.mid
visible: control.size < 1.0
opacity: 0.0
states: State {
name: "active"
when: control.active
PropertyChanges {
target: control
contentItem.opacity: 0.75
}
}
transitions: [
Transition {
from: "active"
SequentialAnimation {
PauseAnimation {
duration: 450
}
NumberAnimation {
target: control.contentItem
duration: 200
property: "opacity"
to: 0.0
}
}
}
]
}
}

5
src/imports/FluentUI/Controls/FluTableModelColumn.qml Normal file
View File

@ -0,0 +1,5 @@
import Qt.labs.qmlmodels
TableModelColumn{
}

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

@ -102,7 +102,11 @@ Item {
onPositionChanged:
(mouse)=>{
var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
item_column.width = Math.max(item_column.width+delta.x,item_column_text.implicitWidth+28)
var minimumWidth = item_column_text.implicitWidth+28
if(model.minimumWidth){
minimumWidth = model.minimumWidth
}
item_column.width = Math.max(item_column.width+delta.x,minimumWidth)
}
}
}
@ -136,7 +140,7 @@ Item {
interactive: false
header: header_columns
footer: Item{
height: pageVisible ? 50 : 0
height: pageVisible ? 54 : 0
clip: true
width: layout_table.width
FluPagination{
@ -189,19 +193,6 @@ Item {
anchors.right: parent.right
anchors.bottom: parent.bottom
}
// Row{
// id: table_row_back
// spacing: 0
// anchors.fill: parent
// Repeater{
// model: model_values
// delegate:Rectangle{
// width: layout_table.headerItem.widthByColumnIndex(index)
// height: item_control.height
// color:"red"
// }
// }
// }
Row{
id: table_row
spacing: 0
@ -210,8 +201,16 @@ Item {
id:repeater_rows
model: model_values
delegate:FluControl{
id:item_row_control
width: layout_table.headerItem.widthByColumnIndex(index)
height: item_control.height
focusPolicy:Qt.TabFocus | Qt.ClickFocus
background: Item{
FluFocusRectangle{
visible: item_row_control.activeFocus
radius:8
}
}
Loader{
id:item_column_loader
property var model : modelData
@ -243,6 +242,7 @@ Item {
}
}
}
Component{
id:com_text
Item{

84
src/imports/FluentUI/Controls/FluTableView2.qml Normal file
View File

@ -0,0 +1,84 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import QtQuick.Layouts
import Qt.labs.qmlmodels
import FluentUI
TableView {
property var columnSource
property var dataSource
id:control
ListModel{
id:model_columns
}
columnWidthProvider: function (column) {
return 100
}
rowHeightProvider: function (column) {
return 60
}
topMargin: columnsHeader.implicitHeight
model: table_model
ScrollBar.horizontal: FluScrollBar{}
ScrollBar.vertical: FluScrollBar{}
clip: true
boundsBehavior:Flickable.StopAtBounds
delegate: Rectangle {
color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
FluText {
text: display
anchors.fill: parent
anchors.margins: 10
verticalAlignment: Text.AlignVCenter
}
}
onColumnSourceChanged: {
if(columnSource.length!==0){
var com_column = Qt.createComponent("FluTableModelColumn.qml")
if (com_column.status === Component.Ready) {
var columns= []
columnSource.forEach(function(item){
var column = com_column.createObject(table_model,{display:item.dataIndex});
columns.push(column)
})
table_model.columns = columns
}
}
}
onDataSourceChanged: {
table_model.clear()
dataSource.forEach(function(item){
table_model.appendRow(item)
})
}
TableModel {
id:table_model
}
Row {
id: columnsHeader
y: control.contentY
z: 2
Repeater {
model: columnSource
Rectangle{
height: 35
width: control.columnWidthProvider(index)
color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
FluText {
text: modelData.title
font: FluTextStyle.BodyStrong
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: 10
}
}
}
}
}
}