mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2025-07-01 23:51:48 +08:00
update
This commit is contained in:
朱子楚\zhuzi
@ -9,14 +9,34 @@ FluContentPage {
|
||||
|
||||
title: qsTr("TreeView")
|
||||
|
||||
|
||||
|
||||
function treeData(){
|
||||
const dig = (path = '0', level = 4) => {
|
||||
const names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"]
|
||||
function getRandomName(){
|
||||
var randomIndex = Math.floor(Math.random() * names.length)
|
||||
return names[randomIndex]
|
||||
}
|
||||
const addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
|
||||
function getRandomAddresses(){
|
||||
var randomIndex = Math.floor(Math.random() * addresses.length)
|
||||
return addresses[randomIndex]
|
||||
}
|
||||
const avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"]
|
||||
function getRandomAvatar(){
|
||||
var randomIndex = Math.floor(Math.random() * avatars.length);
|
||||
return avatars[randomIndex];
|
||||
}
|
||||
const dig = (path = '0', level = 5) => {
|
||||
const list = [];
|
||||
for (let i = 0; i < 6; i += 1) {
|
||||
for (let i = 0; i < 5; i += 1) {
|
||||
const key = `${path}-${i}`;
|
||||
const treeNode = {
|
||||
title: key,
|
||||
key,
|
||||
_key: key,
|
||||
name: getRandomName(),
|
||||
avatar:tree_view.customItem(com_avatar,{avatar:getRandomAvatar()}),
|
||||
address: getRandomAddresses()
|
||||
};
|
||||
if (level > 0) {
|
||||
treeNode.children = dig(key, level - 1);
|
||||
@ -28,99 +48,202 @@ FluContentPage {
|
||||
return dig();
|
||||
}
|
||||
|
||||
Column{
|
||||
id: layout_column
|
||||
spacing: 12
|
||||
width: 300
|
||||
anchors{
|
||||
top:parent.top
|
||||
left: parent.left
|
||||
leftMargin: 10
|
||||
bottom:parent.bottom
|
||||
bottomMargin: 20
|
||||
}
|
||||
// Row{
|
||||
// id: layout_column
|
||||
// spacing: 12
|
||||
// width: 340
|
||||
// anchors{
|
||||
// top:parent.top
|
||||
// left: parent.left
|
||||
// leftMargin: 10
|
||||
// bottom:parent.bottom
|
||||
// bottomMargin: 20
|
||||
// }
|
||||
// RowLayout{
|
||||
// spacing: 10
|
||||
// FluText{
|
||||
// text: "cellHeight:"
|
||||
// Layout.alignment: Qt.AlignVCenter
|
||||
// }
|
||||
// FluSlider{
|
||||
// id: slider_cell_height
|
||||
// value: 30
|
||||
// from: 30
|
||||
// to:100
|
||||
// }
|
||||
// }
|
||||
// RowLayout{
|
||||
// spacing: 10
|
||||
// FluText{
|
||||
// text: "depthPadding:"
|
||||
// Layout.alignment: Qt.AlignVCenter
|
||||
// }
|
||||
// FluSlider{
|
||||
// id: slider_depth_padding
|
||||
// value: 15
|
||||
// from: 15
|
||||
// to:100
|
||||
// }
|
||||
// }
|
||||
// FluToggleSwitch{
|
||||
// id: switch_showline
|
||||
// text:"showLine"
|
||||
// checked: false
|
||||
// }
|
||||
// FluToggleSwitch{
|
||||
// id: switch_checkable
|
||||
// text:"checkable"
|
||||
// checked: false
|
||||
// }
|
||||
// FluButton{
|
||||
// text: "all expand"
|
||||
// onClicked: {
|
||||
// tree_view.allExpand()
|
||||
// }
|
||||
// }
|
||||
// FluButton{
|
||||
// text: "all collapse"
|
||||
// onClicked: {
|
||||
// tree_view.allCollapse()
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
FluText{
|
||||
text: qsTr("Total %1 data, %2 data currently displayed").arg(tree_view.count()).arg(tree_view.visibleCount())
|
||||
}
|
||||
|
||||
FluText{
|
||||
text: qsTr("A total of %1 data items are selected").arg(tree_view.selectionModel().length)
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
FluText{
|
||||
text: "cellHeight:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluSlider{
|
||||
id: slider_cell_height
|
||||
value: 30
|
||||
from: 30
|
||||
to:100
|
||||
}
|
||||
}
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
FluText{
|
||||
text: "depthPadding:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluSlider{
|
||||
id: slider_depth_padding
|
||||
value: 30
|
||||
from: 30
|
||||
to:100
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id: switch_showline
|
||||
text:"showLine"
|
||||
checked: false
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id: switch_draggable
|
||||
text:"draggable"
|
||||
checked: false
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id: switch_checkable
|
||||
text:"checkable"
|
||||
checked: false
|
||||
}
|
||||
FluButton{
|
||||
text: "all expand"
|
||||
onClicked: {
|
||||
tree_view.allExpand()
|
||||
}
|
||||
}
|
||||
FluButton{
|
||||
text: "all collapse"
|
||||
onClicked: {
|
||||
tree_view.allCollapse()
|
||||
Component{
|
||||
id:com_avatar
|
||||
Item{
|
||||
FluClip{
|
||||
anchors.centerIn: parent
|
||||
width: height
|
||||
height: parent.height/3*2
|
||||
radius: [height/2,height/2,height/2,height/2]
|
||||
Image{
|
||||
anchors.fill: parent
|
||||
source: {
|
||||
if(options && options.avatar){
|
||||
return options.avatar
|
||||
}
|
||||
return ""
|
||||
}
|
||||
sourceSize: Qt.size(80,80)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
FluFrame{
|
||||
id:layout_controls
|
||||
anchors{
|
||||
left: layout_column.right
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
top: parent.top
|
||||
topMargin: 10
|
||||
}
|
||||
height: 80
|
||||
clip: true
|
||||
Row{
|
||||
spacing: 12
|
||||
anchors{
|
||||
left: parent.left
|
||||
leftMargin: 10
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
Column{
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
FluText{
|
||||
text: "cellHeight:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluSlider{
|
||||
id: slider_cell_height
|
||||
value: 38
|
||||
from: 38
|
||||
to:100
|
||||
}
|
||||
}
|
||||
RowLayout{
|
||||
spacing: 10
|
||||
FluText{
|
||||
text: "depthPadding:"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluSlider{
|
||||
id: slider_depth_padding
|
||||
value: 15
|
||||
from: 15
|
||||
to:100
|
||||
}
|
||||
}
|
||||
}
|
||||
Column{
|
||||
spacing: 8
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluToggleSwitch{
|
||||
id: switch_showline
|
||||
text:"showLine"
|
||||
checked: false
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id: switch_checkable
|
||||
text:"checkable"
|
||||
checked: false
|
||||
}
|
||||
}
|
||||
Column{
|
||||
spacing: 8
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluButton{
|
||||
text: "all expand"
|
||||
onClicked: {
|
||||
tree_view.allExpand()
|
||||
}
|
||||
}
|
||||
FluButton{
|
||||
text: "all collapse"
|
||||
onClicked: {
|
||||
tree_view.allCollapse()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
FluFrame{
|
||||
anchors{
|
||||
left: parent.left
|
||||
top: layout_controls.bottom
|
||||
topMargin: 10
|
||||
bottom: parent.bottom
|
||||
right: parent.right
|
||||
rightMargin: 5
|
||||
topMargin: 5
|
||||
bottomMargin: 5
|
||||
}
|
||||
FluShadow{}
|
||||
FluTreeView{
|
||||
id:tree_view
|
||||
anchors.fill: parent
|
||||
cellHeight: slider_cell_height.value
|
||||
draggable:switch_draggable.checked
|
||||
showLine: switch_showline.checked
|
||||
checkable:switch_checkable.checked
|
||||
depthPadding: slider_depth_padding.value
|
||||
columnSource:[
|
||||
{
|
||||
title: qsTr("Title"),
|
||||
dataIndex: 'title',
|
||||
width: 300
|
||||
},{
|
||||
title: qsTr("Name"),
|
||||
dataIndex: 'name',
|
||||
width: 100
|
||||
},{
|
||||
title: qsTr("Avatar"),
|
||||
dataIndex: 'avatar',
|
||||
width: 100
|
||||
},{
|
||||
title: qsTr("Address"),
|
||||
dataIndex: 'address',
|
||||
width: 200
|
||||
},
|
||||
]
|
||||
Component.onCompleted: {
|
||||
var data = treeData()
|
||||
dataSource = data
|
||||
|
||||
Reference in New Issue
Block a user