From d89aaec062089457741be117accf261c0b0431ab Mon Sep 17 00:00:00 2001 From: zhuzihcu Date: Thu, 6 Apr 2023 17:32:21 +0800 Subject: [PATCH] update --- example/T_Badge.qml | 16 ++ example/T_Buttons.qml | 64 ++++---- example/T_CalendarPicker.qml | 14 ++ example/T_Carousel.qml | 12 ++ example/T_CheckBox.qml | 2 +- example/T_ColorPicker.qml | 14 ++ example/T_DatePicker.qml | 22 +-- example/T_Dialog.qml | 43 +++++- example/T_Expander.qml | 124 +++++++++++----- example/T_FlipView.qml | 48 +++++- example/T_InfoBar.qml | 69 ++++++--- example/T_MediaPlayer.qml | 17 ++- example/T_Menu.qml | 69 +++++++-- example/T_MultiWindow.qml | 41 ++++- example/T_Pivot.qml | 35 ++++- example/T_Progress.qml | 74 +++++++--- example/T_Rectangle.qml | 230 +++++++++++++++++------------ example/T_Slider.qml | 6 +- example/T_TabView.qml | 26 +++- example/T_TextBox.qml | 129 +++++++++++++--- example/T_Theme.qml | 107 +++++++++----- example/T_TimePicker.qml | 18 ++- example/T_ToggleSwitch.qml | 26 +++- example/T_Tooltip.qml | 31 +++- example/T_TreeView.qml | 189 +++++++++++++----------- example/T_Typography.qml | 45 +++--- example/component/CodeExpander.qml | 7 +- example/global/ItemsOriginal.qml | 28 +--- 28 files changed, 1044 insertions(+), 462 deletions(-) diff --git a/example/T_Badge.qml b/example/T_Badge.qml index c881231..a8ddb8b 100644 --- a/example/T_Badge.qml +++ b/example/T_Badge.qml @@ -3,6 +3,7 @@ import QtQuick.Layouts import QtQuick.Window import QtQuick.Controls import FluentUI +import "./component" FluScrollablePage{ @@ -11,6 +12,7 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 + spacing: 0 FluArea{ Layout.fillWidth: true @@ -99,5 +101,19 @@ FluScrollablePage{ } } } + CodeExpander{ + Layout.fillWidth: true + code:'Rectangle{ + width: 40 + height: 40 + radius: 8 + color: Qt.rgba(191/255,191/255,191/255,1) + FluBadge{ + count: 100 + isDot: false + color: Qt.rgba(82/255,196/255,26/255,1) + } +}' + } } diff --git a/example/T_Buttons.qml b/example/T_Buttons.qml index 8ee7b86..a875fa7 100644 --- a/example/T_Buttons.qml +++ b/example/T_Buttons.qml @@ -52,10 +52,10 @@ FluScrollablePage{ CodeExpander{ Layout.fillWidth: true code:'FluTextButton{ - text:"Text Button" - onClicked: { + text:"Text Button" + onClicked: { - } + } }' } @@ -93,10 +93,10 @@ FluScrollablePage{ CodeExpander{ Layout.fillWidth: true code:'FluButton{ - text:"Standard Button" - onClicked: { + text:"Standard Button" + onClicked: { - } + } }' } @@ -134,10 +134,10 @@ FluScrollablePage{ CodeExpander{ Layout.fillWidth: true code:'FluFilledButton{ - text:"Filled Button" - onClicked: { + text:"Filled Button" + onClicked: { - } + } }' } @@ -176,10 +176,10 @@ FluScrollablePage{ CodeExpander{ Layout.fillWidth: true code:'FluIconButton{ - iconSource:FluentIcons.ChromeCloseContrast - onClicked: { + iconSource:FluentIcons.ChromeCloseContrast + onClicked: { - } + } }' } @@ -226,21 +226,21 @@ FluScrollablePage{ CodeExpander{ Layout.fillWidth: true code:'FluDropDownButton{ - text:"DropDownButton" - items:[ - FluMenuItem{ - text:"Menu_1" - }, - FluMenuItem{ - text:"Menu_2" - }, - FluMenuItem{ - text:"Menu_3" - }, - FluMenuItem{ - text:"Menu_4" - } - ] + text:"DropDownButton" + items:[ + FluMenuItem{ + text:"Menu_1" + }, + FluMenuItem{ + text:"Menu_2" + }, + FluMenuItem{ + text:"Menu_3" + }, + FluMenuItem{ + text:"Menu_4" + } + ] }' } @@ -287,11 +287,11 @@ FluScrollablePage{ CodeExpander{ Layout.fillWidth: true code:'FluRadioButton{ - selected:true - text:"Text Button" - onClicked: { + selected:true + text:"Text Button" + onClicked: { - } + } }' } @@ -325,7 +325,7 @@ FluScrollablePage{ CodeExpander{ Layout.fillWidth: true code:'FluCheckBox{ - text:"Check Box" + text:"Check Box" }' } } diff --git a/example/T_CalendarPicker.qml b/example/T_CalendarPicker.qml index 7ee1c9e..176f3ed 100644 --- a/example/T_CalendarPicker.qml +++ b/example/T_CalendarPicker.qml @@ -3,6 +3,7 @@ import QtQuick.Controls import QtQuick.Layouts import QtQuick.Window import FluentUI +import "./component" FluScrollablePage{ @@ -10,6 +11,7 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 + spacing: 0 FluArea{ Layout.fillWidth: true @@ -19,6 +21,12 @@ FluScrollablePage{ FluCalendarView{ } } + CodeExpander{ + Layout.fillWidth: true + code:'FluCalendarView{ + +}' + } FluArea{ Layout.fillWidth: true @@ -34,5 +42,11 @@ FluScrollablePage{ } } } + CodeExpander{ + Layout.fillWidth: true + code:'FluCalendarPicker{ + +}' + } } diff --git a/example/T_Carousel.qml b/example/T_Carousel.qml index e678644..ab12fa9 100644 --- a/example/T_Carousel.qml +++ b/example/T_Carousel.qml @@ -3,6 +3,7 @@ import QtQuick.Layouts import QtQuick.Window import QtQuick.Controls import FluentUI +import "./component" FluScrollablePage{ @@ -10,6 +11,7 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 + spacing: 0 FluArea{ Layout.fillWidth: true @@ -35,4 +37,14 @@ FluScrollablePage{ } } } + CodeExpander{ + Layout.fillWidth: true + code:'FluCarousel{ + width: 400 + height: 300 + Component.onCompleted: { + setData([{url:"qrc:/res/image/banner_1.jpg"},{url:"qrc:/res/image/banner_2.jpg"},{url:"qrc:/res/image/banner_3.jpg"}]) + } +}' + } } diff --git a/example/T_CheckBox.qml b/example/T_CheckBox.qml index 184eda1..27317d1 100644 --- a/example/T_CheckBox.qml +++ b/example/T_CheckBox.qml @@ -31,7 +31,7 @@ FluScrollablePage{ CodeExpander{ Layout.fillWidth: true code:'FluCheckBox{ - text:"Text" + text:"Text" }' } diff --git a/example/T_ColorPicker.qml b/example/T_ColorPicker.qml index e947517..a1928c6 100644 --- a/example/T_ColorPicker.qml +++ b/example/T_ColorPicker.qml @@ -3,6 +3,7 @@ import QtQuick.Controls import QtQuick.Layouts import QtQuick.Window import FluentUI +import "./component" FluScrollablePage{ @@ -10,6 +11,7 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 + spacing: 0 FluArea{ Layout.fillWidth: true @@ -37,6 +39,12 @@ FluScrollablePage{ } } } + CodeExpander{ + Layout.fillWidth: true + code:'FluColorView{ + +}' + } FluArea{ Layout.fillWidth: true @@ -54,6 +62,12 @@ FluScrollablePage{ } } } + CodeExpander{ + Layout.fillWidth: true + code:'FluColorPicker{ + +}' + } } diff --git a/example/T_DatePicker.qml b/example/T_DatePicker.qml index bc9b977..91dc5bb 100644 --- a/example/T_DatePicker.qml +++ b/example/T_DatePicker.qml @@ -3,6 +3,7 @@ import QtQuick.Controls import QtQuick.Layouts import QtQuick.Window import FluentUI +import "./component" FluScrollablePage{ @@ -10,44 +11,42 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 + spacing: 0 FluArea{ Layout.fillWidth: true Layout.topMargin: 20 height: 80 paddings: 10 - ColumnLayout{ - anchors{ verticalCenter: parent.verticalCenter left: parent.left } - FluText{ text:"showYear=true" } - FluDatePicker{ } - } } + CodeExpander{ + Layout.fillWidth: true + code:'FluDatePicker{ +}' + } FluArea{ Layout.fillWidth: true Layout.topMargin: 20 height: 80 paddings: 10 - ColumnLayout{ - anchors{ verticalCenter: parent.verticalCenter left: parent.left } - FluText{ text:"showYear=false" } @@ -56,8 +55,13 @@ FluScrollablePage{ showYear:false } - } } + CodeExpander{ + Layout.fillWidth: true + code:'FluDatePicker{ + showYear:false +}' + } } diff --git a/example/T_Dialog.qml b/example/T_Dialog.qml index d3f1f27..deffd0e 100644 --- a/example/T_Dialog.qml +++ b/example/T_Dialog.qml @@ -3,6 +3,7 @@ import QtQuick.Layouts import QtQuick.Window import QtQuick.Controls import FluentUI +import "./component" FluScrollablePage{ @@ -10,6 +11,40 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 + spacing: 0 + + FluArea{ + Layout.fillWidth: true + height: 68 + paddings: 10 + Layout.topMargin: 20 + FluButton{ + anchors.verticalCenter: parent.verticalCenter + Layout.topMargin: 20 + text:"Show Dialog" + onClicked: { + dialog.open() + } + } + } + CodeExpander{ + Layout.fillWidth: true + code:'FluContentDialog{ + id:dialog + title:"友情提示" + message:"确定要退出程序么？" + negativeText:"取消" + onNegativeClicked:{ + showSuccess("点击取消按钮") + } + positiveText:"确定" + onPositiveClicked:{ + showSuccess("点击确定按钮") + } +} +dialog.open() +' + } FluContentDialog{ id:dialog @@ -25,11 +60,5 @@ FluScrollablePage{ } } - FluButton{ - Layout.topMargin: 20 - text:"Show Dialog" - onClicked: { - dialog.open() - } - } + } diff --git a/example/T_Expander.qml b/example/T_Expander.qml index fd12310..d2ccdf9 100644 --- a/example/T_Expander.qml +++ b/example/T_Expander.qml @@ -3,6 +3,7 @@ import QtQuick.Controls import QtQuick.Layouts import QtQuick.Window import FluentUI +import "./component" FluScrollablePage{ @@ -10,56 +11,99 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 + spacing: 0 - FluExpander{ - headerText:"打开一个单选框" + FluArea{ + Layout.fillWidth: true + height: layout_column.height+40 + paddings: 10 Layout.topMargin: 20 - Item{ - anchors.fill: parent - ColumnLayout{ - spacing: 8 - anchors{ - top: parent.top - left: parent.left - topMargin: 15 - leftMargin: 15 - } - Repeater{ - id:repeater - property int selecIndex : 0 - model: 3 - delegate: FluRadioButton{ - selected : repeater.selecIndex===index - text:"Radio Button_"+index - onClicked:{ - repeater.selecIndex = index + Column{ + id:layout_column + spacing: 15 + anchors{ + verticalCenter: parent.verticalCenter + left:parent.left + } + + FluExpander{ + headerText:"打开一个单选框" + Layout.topMargin: 20 + Item{ + anchors.fill: parent + ColumnLayout{ + spacing: 8 + anchors{ + top: parent.top + left: parent.left + topMargin: 15 + leftMargin: 15 + } + Repeater{ + id:repeater + property int selecIndex : 0 + model: 3 + delegate: FluRadioButton{ + selected : repeater.selecIndex===index + text:"Radio Button_"+index + onClicked:{ + repeater.selecIndex = index + } + } } } } } + + FluExpander{ + Layout.topMargin: 20 + headerText:"打开一个滑动文本框" + Item{ + anchors.fill: parent + Flickable{ + id:scrollview + width: parent.width + height: parent.height + contentWidth: width + contentHeight: text_info.height + ScrollBar.vertical: FluScrollBar {} + FluText{ + id:text_info + width: scrollview.width + wrapMode: Text.WrapAnywhere + padding: 14 + text:"先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。今当远离，临表涕零，不知所言。" + } + } + } + } + } } - FluExpander{ - Layout.topMargin: 20 - headerText:"打开一个滑动文本框" - Item{ - anchors.fill: parent - Flickable{ - id:scrollview - width: parent.width - height: parent.height - contentWidth: width - contentHeight: text_info.height - ScrollBar.vertical: FluScrollBar {} - FluText{ - id:text_info - width: scrollview.width - wrapMode: Text.WrapAnywhere - padding: 14 - text:"先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。今当远离，临表涕零，不知所言。" - } + CodeExpander{ + Layout.fillWidth: true + code:'FluExpander{ + headerText:"打开一个单选框" + Item{ + anchors.fill: parent + Flickable{ + width: parent.width + height: parent.height + contentWidth: width + contentHeight: text_info.height + ScrollBar.vertical: FluScrollBar {} + FluText{ + id:text_info + width: scrollview.width + wrapMode: Text.WrapAnywhere + padding: 14 + text:"先帝创业未半而中道崩殂，今天下三分......"" } } } +}' + } + + } diff --git a/example/T_FlipView.qml b/example/T_FlipView.qml index 27da14e..c81b579 100644 --- a/example/T_FlipView.qml +++ b/example/T_FlipView.qml @@ -3,6 +3,7 @@ import QtQuick.Controls import QtQuick.Layouts import QtQuick.Window import FluentUI +import "./component" FluScrollablePage{ @@ -10,7 +11,7 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 - + spacing: 0 FluArea{ Layout.fillWidth: true @@ -26,7 +27,6 @@ FluScrollablePage{ Image{ source: "qrc:/res/image/banner_1.jpg" asynchronous: true - sourceSize: Qt.size(400,300) fillMode:Image.PreserveAspectCrop } Image{ @@ -42,6 +42,27 @@ FluScrollablePage{ } } } + CodeExpander{ + Layout.fillWidth: true + code:'FluFlipView{ + Image{ + source: "qrc:/res/image/banner_1.jpg" + asynchronous: true + fillMode:Image.PreserveAspectCrop + } + Image{ + source: "qrc:/res/image/banner_1.jpg" + asynchronous: true + fillMode:Image.PreserveAspectCrop + } + Image{ + source: "qrc:/res/image/banner_1.jpg" + asynchronous: true + fillMode:Image.PreserveAspectCrop + } +} +' + } FluArea{ Layout.fillWidth: true @@ -74,5 +95,26 @@ FluScrollablePage{ } } } - + CodeExpander{ + Layout.fillWidth: true + code:'FluFlipView{ + vertical:true + Image{ + source: "qrc:/res/image/banner_1.jpg" + asynchronous: true + fillMode:Image.PreserveAspectCrop + } + Image{ + source: "qrc:/res/image/banner_1.jpg" + asynchronous: true + fillMode:Image.PreserveAspectCrop + } + Image{ + source: "qrc:/res/image/banner_1.jpg" + asynchronous: true + fillMode:Image.PreserveAspectCrop + } +} +' + } } diff --git a/example/T_InfoBar.qml b/example/T_InfoBar.qml index 0645305..11f2f91 100644 --- a/example/T_InfoBar.qml +++ b/example/T_InfoBar.qml @@ -3,6 +3,7 @@ import QtQuick.Layouts import QtQuick.Window import QtQuick.Controls import FluentUI +import "./component" FluScrollablePage{ @@ -10,33 +11,53 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 + spacing: 0 - FluButton{ - text:"Info" + FluArea{ + Layout.fillWidth: true Layout.topMargin: 20 - onClicked: { - showInfo("这是一个Info样式的InfoBar") + height: 200 + paddings: 10 + ColumnLayout{ + spacing: 14 + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + } + FluButton{ + text:"Info" + onClicked: { + showInfo("这是一个Info样式的InfoBar") + } + } + FluButton{ + text:"Warning" + onClicked: { + showWarning("这是一个Warning样式的InfoBar") + } + } + FluButton{ + text:"Error" + onClicked: { + showError("这是一个Error样式的InfoBar") + } + } + FluButton{ + text:"Success" + onClicked: { + showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar") + } + } } } - FluButton{ - text:"Warning" - Layout.topMargin: 20 - onClicked: { - showWarning("这是一个Warning样式的InfoBar") - } - } - FluButton{ - text:"Error" - Layout.topMargin: 20 - onClicked: { - showError("这是一个Error样式的InfoBar") - } - } - FluButton{ - text:"Success" - Layout.topMargin: 20 - onClicked: { - showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar") - } + CodeExpander{ + Layout.fillWidth: true + code:' showInfo("这是一个Info样式的InfoBar") + + showWarning("这是一个Warning样式的InfoBar") + + showError("这是一个Error样式的InfoBar") + + showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")' } } diff --git a/example/T_MediaPlayer.qml b/example/T_MediaPlayer.qml index 0315ec9..bd6f743 100644 --- a/example/T_MediaPlayer.qml +++ b/example/T_MediaPlayer.qml @@ -3,6 +3,7 @@ import QtQuick.Controls import QtQuick.Layouts import QtQuick.Window import FluentUI +import "./component" FluScrollablePage{ @@ -10,6 +11,7 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 + spacing: 0 onVisibleChanged: { if(visible){ @@ -18,7 +20,6 @@ FluScrollablePage{ player.pause() } } - FluArea{ Layout.fillWidth: true height: 320 @@ -35,13 +36,19 @@ FluScrollablePage{ } } } - + CodeExpander{ + Layout.fillWidth: true + code:'FluMediaPlayer{ + id:player + source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" +} +' + } FluArea{ Layout.fillWidth: true height: 68 Layout.topMargin: 20 paddings: 10 - FluButton{ text:"跳转到视频播放器窗口" anchors.verticalCenter: parent.verticalCenter @@ -49,8 +56,10 @@ FluScrollablePage{ FluApp.navigate("/media",{source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"}) } } - } + + + } diff --git a/example/T_Menu.qml b/example/T_Menu.qml index cb19734..7527d3c 100644 --- a/example/T_Menu.qml +++ b/example/T_Menu.qml @@ -3,6 +3,7 @@ import QtQuick.Layouts import QtQuick.Window import QtQuick.Controls import FluentUI +import "./component" FluScrollablePage{ @@ -10,30 +11,66 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 + spacing: 0 - FluButton{ - text:"左击菜单" + FluArea{ + Layout.fillWidth: true + height: 100 + paddings: 10 Layout.topMargin: 20 - onClicked:{ - menu.popup() + Column{ + id:layout_column + spacing: 15 + anchors{ + verticalCenter: parent.verticalCenter + left:parent.left + } + + FluButton{ + text:"左击菜单" + Layout.topMargin: 20 + onClicked:{ + menu.popup() + } + } + + FluButton{ + text:"右击菜单" + Layout.topMargin: 20 + onClicked: { + showSuccess("请按鼠标右击") + } + MouseArea{ + anchors.fill: parent + acceptedButtons: Qt.RightButton + onClicked: { + menu.popup() + } + } + } } } - - FluButton{ - text:"右击菜单" - Layout.topMargin: 20 + CodeExpander{ + Layout.fillWidth: true + code:'FluMenu{ + id:menu + FluMenuItem:{ + text:"删除" onClicked: { - showSuccess("请按鼠标右击") + showError("删除") } - MouseArea{ - anchors.fill: parent - acceptedButtons: Qt.RightButton - onClicked: { - menu.popup() - } + } + FluMenuItem:{ + text:"修改" + onClicked: { + showInfo"修改") } } +} +menu.popup() +' + } FluMenu{ id:menu @@ -46,7 +83,7 @@ FluScrollablePage{ FluMenuItem{ text:"修改" onClicked: { - showError("修改") + showInfo("修改") } } } diff --git a/example/T_MultiWindow.qml b/example/T_MultiWindow.qml index 01a1765..7bee76b 100644 --- a/example/T_MultiWindow.qml +++ b/example/T_MultiWindow.qml @@ -3,17 +3,18 @@ import QtQuick.Layouts import QtQuick.Window import QtQuick.Controls import FluentUI +import "./component" FluScrollablePage{ + property string password: "" + property var loginPageRegister: registerForPageResult("/login") + title:"MultiWindow" leftPadding:10 rightPadding:10 bottomPadding:20 - - property string password: "" - - property var loginPageRegister: registerForPageResult("/login") + spacing: 0 Connections{ target: loginPageRegister @@ -28,7 +29,6 @@ FluScrollablePage{ height: 100 paddings: 10 Layout.topMargin: 20 - Column{ spacing: 15 anchors{ @@ -46,6 +46,16 @@ FluScrollablePage{ } } } + CodeExpander{ + Layout.fillWidth: true + code:'FluButton{ + text:"点击跳转" + onClicked: { + FluApp.navigate("/about") + } +} +' + } FluArea{ Layout.fillWidth: true @@ -68,11 +78,30 @@ FluScrollablePage{ loginPageRegister.launch({username:"zhuzichu"}) } } - FluText{ text:"登录窗口返回过来的密码->"+password } } } + CodeExpander{ + Layout.fillWidth: true + code:'property var loginPageRegister: registerForPageResult("/login") + +Connections{ + target: loginPageRegister + function onResult(data) + { + password = data.password + } +} + +FluButton{ + text:"点击跳转" + onClicked: { + loginPageRegister.launch({username:"zhuzichu"}) + } +} +' + } } diff --git a/example/T_Pivot.qml b/example/T_Pivot.qml index 7e5534f..d8546ff 100644 --- a/example/T_Pivot.qml +++ b/example/T_Pivot.qml @@ -3,6 +3,7 @@ import QtQuick.Controls import QtQuick.Layouts import QtQuick.Window import FluentUI +import "./component" FluScrollablePage{ @@ -10,7 +11,7 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 - + spacing: 0 FluArea{ Layout.fillWidth: true @@ -46,6 +47,36 @@ FluScrollablePage{ } } } - + CodeExpander{ + Layout.fillWidth: true + code:'FluPivot{ + anchors.fill: parent + FluPivotItem:{ + text:"All" + contentItem: FluText{ + text:"All emails go here." + } + } + FluPivotItem:{ + text:"Unread" + contentItem: FluText{ + text:"Unread emails go here." + } + } + FluPivotItem:{ + text:"Flagged" + contentItem: FluText{ + text:"Flagged emails go here." + } + } + FluPivotItem:{ + text:"Urgent" + contentItem: FluText{ + text:"Urgent emails go here." + } + } +} +' + } } diff --git a/example/T_Progress.qml b/example/T_Progress.qml index 506b95f..b688856 100644 --- a/example/T_Progress.qml +++ b/example/T_Progress.qml @@ -3,6 +3,7 @@ import QtQuick.Layouts import QtQuick.Window import QtQuick.Controls import FluentUI +import "./component" FluScrollablePage{ @@ -10,30 +11,59 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 + spacing: 0 - FluProgressBar{ + FluArea{ + Layout.fillWidth: true Layout.topMargin: 20 - } - FluProgressRing{ - Layout.topMargin: 10 - } - FluProgressBar{ - id:progress_bar - Layout.topMargin: 20 - indeterminate: false - } - FluProgressRing{ - id:progress_ring - Layout.topMargin: 10 - indeterminate: false - } - FluSlider{ - Layout.topMargin: 30 - value:50 - onValueChanged:{ - progress_bar.progress = value/100 - progress_ring.progress = value/100 + height: 260 + paddings: 10 + ColumnLayout{ + spacing: 20 + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + } + FluProgressBar{ + } + FluProgressRing{ + } + FluProgressBar{ + id:progress_bar + indeterminate: false + } + FluProgressRing{ + id:progress_ring + indeterminate: false + } + FluSlider{ + value:50 + onValueChanged:{ + progress_bar.progress = value/100 + progress_ring.progress = value/100 + } + } } - Layout.bottomMargin: 30 } + CodeExpander{ + Layout.fillWidth: true + code:'FluProgressBar{ + +} + +FluProgressRing{ + +} + +FluProgressBar{ + indeterminate: false +} + +FluProgressRing{ + indeterminate: false +}' + } + + + } diff --git a/example/T_Rectangle.qml b/example/T_Rectangle.qml index eebab12..38793de 100644 --- a/example/T_Rectangle.qml +++ b/example/T_Rectangle.qml @@ -3,6 +3,7 @@ import QtQuick.Layouts import QtQuick.Controls import QtQuick.Window import FluentUI +import "./component" FluScrollablePage{ @@ -10,108 +11,141 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 + spacing: 0 - RowLayout{ + FluArea{ + Layout.fillWidth: true Layout.topMargin: 20 - FluRectangle{ - width: 50 - height: 50 - color:"#0078d4" - radius:[0,0,0,0] - } - FluRectangle{ - width: 50 - height: 50 - color:"#744da9" - radius:[15,15,15,15] - } - FluRectangle{ - width: 50 - height: 50 - color:"#ffeb3b" - radius:[15,0,0,0] - } - FluRectangle{ - width: 50 - height: 50 - color:"#f7630c" - radius:[0,15,0,0] - } - FluRectangle{ - width: 50 - height: 50 - color:"#e71123" - radius:[0,0,15,0] - } - FluRectangle{ - width: 50 - height: 50 - color:"#b4009e" - radius:[0,0,0,15] + height: 480 + paddings: 10 + + Column{ + spacing: 15 + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + } + + RowLayout{ + Layout.topMargin: 20 + FluRectangle{ + width: 50 + height: 50 + color:"#0078d4" + radius:[0,0,0,0] + } + FluRectangle{ + width: 50 + height: 50 + color:"#744da9" + radius:[15,15,15,15] + } + FluRectangle{ + width: 50 + height: 50 + color:"#ffeb3b" + radius:[15,0,0,0] + } + FluRectangle{ + width: 50 + height: 50 + color:"#f7630c" + radius:[0,15,0,0] + } + FluRectangle{ + width: 50 + height: 50 + color:"#e71123" + radius:[0,0,15,0] + } + FluRectangle{ + width: 50 + height: 50 + color:"#b4009e" + radius:[0,0,0,15] + } + } + FluText{ + text:"配合图片使用" + fontStyle: FluText.SubTitle + Layout.topMargin: 20 + } + RowLayout{ + spacing: 14 + FluRectangle{ + width: 50 + height: 50 + radius:[25,0,25,25] + Image { + asynchronous: true + anchors.fill: parent + source: "qrc:/res/svg/avatar_1.svg" + sourceSize: Qt.size(width,height) + } + } + FluRectangle{ + width: 50 + height: 50 + radius:[10,10,10,10] + Image { + asynchronous: true + anchors.fill: parent + sourceSize: Qt.size(width,height) + source: "qrc:/res/svg/avatar_2.svg" + } + } + FluRectangle{ + width: 50 + height: 50 + radius:[25,25,25,25] + Image { + asynchronous: true + anchors.fill: parent + sourceSize: Qt.size(width,height) + source: "qrc:/res/svg/avatar_3.svg" + } + } + FluRectangle{ + width: 50 + height: 50 + radius:[0,25,25,25] + Image { + asynchronous: true + anchors.fill: parent + sourceSize: Qt.size(width,height) + source: "qrc:/res/svg/avatar_4.svg" + } + } + } + FluRectangle{ + width: 1080/5 + height: 1439/5 + radius:[25,25,25,25] + Image { + asynchronous: true + source: "qrc:/res/image/image_huoyin.webp" + anchors.fill: parent + sourceSize: Qt.size(width,height) + } + Layout.topMargin: 10 + } + } } - FluText{ - text:"配合图片使用" - fontStyle: FluText.SubTitle - Layout.topMargin: 20 + CodeExpander{ + Layout.fillWidth: true + code:'FluRectangle{ + radius: [25,25,25,25] + width: 50 + height: 50 + Image{ + asynchronous: true + anchors.fill: parent + source: "qrc:/res/svg/avatar_4.svg" + sourceSize: Qt.size(width,height) } - RowLayout{ - spacing: 14 - FluRectangle{ - width: 50 - height: 50 - radius:[25,0,25,25] - Image { - asynchronous: true - anchors.fill: parent - source: "qrc:/res/svg/avatar_1.svg" - sourceSize: Qt.size(width,height) - } - } - FluRectangle{ - width: 50 - height: 50 - radius:[10,10,10,10] - Image { - asynchronous: true - anchors.fill: parent - sourceSize: Qt.size(width,height) - source: "qrc:/res/svg/avatar_2.svg" - } - } - FluRectangle{ - width: 50 - height: 50 - radius:[25,25,25,25] - Image { - asynchronous: true - anchors.fill: parent - sourceSize: Qt.size(width,height) - source: "qrc:/res/svg/avatar_3.svg" - } - } - FluRectangle{ - width: 50 - height: 50 - radius:[0,25,25,25] - Image { - asynchronous: true - anchors.fill: parent - sourceSize: Qt.size(width,height) - source: "qrc:/res/svg/avatar_4.svg" - } - } - } - FluRectangle{ - width: 1080/5 - height: 1439/5 - radius:[25,25,25,25] - Image { - asynchronous: true - source: "qrc:/res/image/image_huoyin.webp" - anchors.fill: parent - sourceSize: Qt.size(width,height) - } - Layout.topMargin: 10 +}' } + + } diff --git a/example/T_Slider.qml b/example/T_Slider.qml index 31f22fc..03323ad 100644 --- a/example/T_Slider.qml +++ b/example/T_Slider.qml @@ -26,7 +26,7 @@ FluScrollablePage{ CodeExpander{ Layout.fillWidth: true code:'FluSlider{ - value:50 + value:50 }' } @@ -47,8 +47,8 @@ FluScrollablePage{ CodeExpander{ Layout.fillWidth: true code:'FluSlider{ - vertical:true - value:50 + vertical:true + value:50 }' } diff --git a/example/T_TabView.qml b/example/T_TabView.qml index 58e37e8..57b845c 100644 --- a/example/T_TabView.qml +++ b/example/T_TabView.qml @@ -3,6 +3,7 @@ import QtQuick.Controls import QtQuick.Layouts import QtQuick.Window import FluentUI +import "./component" FluScrollablePage{ @@ -10,6 +11,7 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 + spacing: 0 property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green] @@ -99,7 +101,7 @@ FluScrollablePage{ FluArea{ Layout.fillWidth: true - Layout.topMargin: 5 + Layout.topMargin: 15 height: 400 paddings: 10 FluTabView{ @@ -109,5 +111,27 @@ FluScrollablePage{ } } } + CodeExpander{ + Layout.fillWidth: true + code:'FluTabView{ + anchors.fill: parent + Component.onCompleted: { + newTab() + newTab() + newTab() + } + Component{ + id:com_page + Rectangle{ + anchors.fill: parent + color: argument + } + } + function newTab(){ + tab_view.appendTab("qrc:/res/image/favicon.ico","Document 1",com_page,argument) + } +} +' + } } diff --git a/example/T_TextBox.qml b/example/T_TextBox.qml index e9606d5..66f5573 100644 --- a/example/T_TextBox.qml +++ b/example/T_TextBox.qml @@ -3,6 +3,7 @@ import QtQuick.Controls import QtQuick.Layouts import QtQuick.Window import FluentUI +import "./component" FluScrollablePage{ @@ -10,32 +11,122 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 + spacing: 0 - FluTextBox{ + FluArea{ + Layout.fillWidth: true + height: 68 + paddings: 10 Layout.topMargin: 20 - placeholderText: "单行输入框" - Layout.preferredWidth: 300 - disabled:toggle_switch.selected + + FluTextBox{ + Layout.topMargin: 20 + placeholderText: "单行输入框" + Layout.preferredWidth: 300 + disabled:text_box_switch.selected + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + } + } + + Row{ + spacing: 5 + anchors{ + verticalCenter: parent.verticalCenter + right: parent.right + } + FluToggleSwitch{ + id:text_box_switch + Layout.alignment: Qt.AlignRight + text:"Disabled" + } + } } - FluMultilineTextBox{ - Layout.topMargin: 20 - Layout.preferredWidth: 300 - placeholderText: "多行输入框" - disabled:toggle_switch.selected - } - FluAutoSuggestBox{ - Layout.topMargin: 20 - items:generateRandomNames(100) - placeholderText: "AutoSuggestBox" - Layout.preferredWidth: 300 - disabled:toggle_switch.selected + CodeExpander{ + Layout.fillWidth: true + code:'FluTextBox{ + placeholderText:"单行输入框" +}' } - FluToggleSwitch{ - id:toggle_switch - text:"Disabled" + + FluArea{ + Layout.fillWidth: true + height: 68 + paddings: 10 Layout.topMargin: 20 + + FluMultilineTextBox{ + Layout.topMargin: 20 + placeholderText: "多行输入框" + Layout.preferredWidth: 300 + disabled:text_box_multi_switch.selected + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + } + } + + Row{ + spacing: 5 + anchors{ + verticalCenter: parent.verticalCenter + right: parent.right + } + FluToggleSwitch{ + id:text_box_multi_switch + Layout.alignment: Qt.AlignRight + text:"Disabled" + } + } } + CodeExpander{ + Layout.fillWidth: true + code:'FluMultilineTextBox{ + placeholderText:"多行输入框" +}' + } + + + FluArea{ + Layout.fillWidth: true + height: 68 + paddings: 10 + Layout.topMargin: 20 + + FluAutoSuggestBox{ + Layout.topMargin: 20 + placeholderText: "AutoSuggestBox" + Layout.preferredWidth: 300 + items:generateRandomNames(100) + disabled:text_box_suggest_switch.selected + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + } + } + + Row{ + spacing: 5 + anchors{ + verticalCenter: parent.verticalCenter + right: parent.right + } + FluToggleSwitch{ + id:text_box_suggest_switch + Layout.alignment: Qt.AlignRight + text:"Disabled" + } + } + } + CodeExpander{ + Layout.fillWidth: true + code:'FluAutoSuggestBox{ + placeholderText:"AutoSuggestBox" +}' + } + function generateRandomNames(numNames) { const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; diff --git a/example/T_Theme.qml b/example/T_Theme.qml index a450677..b85f6b5 100644 --- a/example/T_Theme.qml +++ b/example/T_Theme.qml @@ -3,6 +3,7 @@ import QtQuick.Layouts import QtQuick.Window import QtQuick.Controls import FluentUI +import "./component" FluScrollablePage{ @@ -10,52 +11,78 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 + spacing: 0 - RowLayout{ + FluArea{ + Layout.fillWidth: true Layout.topMargin: 20 - Repeater{ - model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green] - delegate: FluRectangle{ - width: 42 - height: 42 - radius: [4,4,4,4] - color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal - FluIcon { - anchors.centerIn: parent - iconSource: FluentIcons.AcceptMedium - iconSize: 15 - visible: modelData === FluTheme.primaryColor - color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) - } - MouseArea{ - id:mouse_item - anchors.fill: parent - hoverEnabled: true - onClicked: { - FluTheme.primaryColor = modelData + height: 210 + paddings: 10 + ColumnLayout{ + spacing:0 + anchors{ + left: parent.left + } + RowLayout{ + Layout.topMargin: 10 + Repeater{ + model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green] + delegate: FluRectangle{ + width: 42 + height: 42 + radius: [4,4,4,4] + color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal + FluIcon { + anchors.centerIn: parent + iconSource: FluentIcons.AcceptMedium + iconSize: 15 + visible: modelData === FluTheme.primaryColor + color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) + } + MouseArea{ + id:mouse_item + anchors.fill: parent + hoverEnabled: true + onClicked: { + FluTheme.primaryColor = modelData + } + } } } } + FluText{ + text:"夜间模式" + Layout.topMargin: 20 + } + FluToggleSwitch{ + Layout.topMargin: 5 + selected: FluTheme.dark + clickFunc:function(){ + FluTheme.dark = !FluTheme.dark + } + } + FluText{ + text:"native文本渲染" + Layout.topMargin: 20 + } + FluToggleSwitch{ + Layout.topMargin: 5 + selected: FluTheme.nativeText + clickFunc:function(){ + FluTheme.nativeText = !FluTheme.nativeText + } + } } } - FluText{ - text:"夜间模式" - Layout.topMargin: 20 - } - FluToggleSwitch{ - selected: FluTheme.dark - clickFunc:function(){ - FluTheme.dark = !FluTheme.dark - } - } - FluText{ - text:"native文本渲染" - Layout.topMargin: 20 - } - FluToggleSwitch{ - selected: FluTheme.nativeText - clickFunc:function(){ - FluTheme.nativeText = !FluTheme.nativeText - } + CodeExpander{ + Layout.fillWidth: true + code:'FluTheme.primaryColor = FluColors.Orange + +FluTheme.dark = true + +FluTheme.nativeText = true +' } + + } diff --git a/example/T_TimePicker.qml b/example/T_TimePicker.qml index 6847c44..d1bd671 100644 --- a/example/T_TimePicker.qml +++ b/example/T_TimePicker.qml @@ -3,6 +3,7 @@ import QtQuick.Controls import QtQuick.Layouts import QtQuick.Window import FluentUI +import "./component" FluScrollablePage{ @@ -10,6 +11,7 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 + spacing: 0 FluArea{ Layout.fillWidth: true @@ -33,7 +35,12 @@ FluScrollablePage{ } } + CodeExpander{ + Layout.fillWidth: true + code:'FluTimePicker{ +}' + } FluArea{ Layout.fillWidth: true @@ -49,15 +56,20 @@ FluScrollablePage{ } FluText{ - text:"hourFormat=FluTimePicker.HH" + text:"hourFormat=FluTimePicker.H" } FluTimePicker{ - hourFormat:FluTimePicker.HH + hourFormat:FluTimePicker.HH } } } - + CodeExpander{ + Layout.fillWidth: true + code:'FluTimePicker{ + hourFormat:FluTimePicker.HH +}' + } } diff --git a/example/T_ToggleSwitch.qml b/example/T_ToggleSwitch.qml index 3a73ef4..c6a057e 100644 --- a/example/T_ToggleSwitch.qml +++ b/example/T_ToggleSwitch.qml @@ -3,6 +3,7 @@ import QtQuick.Layouts import QtQuick.Window import QtQuick.Controls import FluentUI +import "./component" FluScrollablePage{ @@ -10,12 +11,29 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 + spacing: 0 - FluToggleSwitch{ + FluArea{ + Layout.fillWidth: true + height: 68 + paddings: 10 Layout.topMargin: 20 + Row{ + spacing: 30 + anchors.verticalCenter: parent.verticalCenter + FluToggleSwitch{ + } + FluToggleSwitch{ + text:"Text" + } + } } - FluToggleSwitch{ - Layout.topMargin: 20 - text:"Text" + CodeExpander{ + Layout.fillWidth: true + code:'FluToggleSwitch{ + text:"Text" +}' } + + } diff --git a/example/T_Tooltip.qml b/example/T_Tooltip.qml index ba0705b..6c3d32a 100644 --- a/example/T_Tooltip.qml +++ b/example/T_Tooltip.qml @@ -3,6 +3,7 @@ import QtQuick.Controls import QtQuick.Layouts import QtQuick.Window import FluentUI +import "./component" FluScrollablePage{ @@ -10,13 +11,13 @@ FluScrollablePage{ leftPadding:10 rightPadding:10 bottomPadding:20 + spacing: 0 FluText{ Layout.topMargin: 20 text:"鼠标悬停不动，弹出Tooltip" } - FluArea{ Layout.fillWidth: true Layout.topMargin: 20 @@ -42,6 +43,18 @@ FluScrollablePage{ } } } + CodeExpander{ + Layout.fillWidth: true + code:'FluIconButton{ + iconSource:FluentIcons.ChromeCloseContrast + iconSize: 15 + text:"删除" + onClicked:{ + showSuccess("点击IconButton") + } +} +' + } FluArea{ Layout.fillWidth: true @@ -72,6 +85,22 @@ FluScrollablePage{ } } } + CodeExpander{ + Layout.fillWidth: true + code:'FluButton{ + id:button_1 + text:"删除" + FluTooltip{ + visible: button_1.hovered + text:button_1.text + delay: 1000 + } + onClicked:{ + showSuccess("点击一个Button") + } +} +' + } } diff --git a/example/T_TreeView.qml b/example/T_TreeView.qml index a5a3518..c2ed337 100644 --- a/example/T_TreeView.qml +++ b/example/T_TreeView.qml @@ -3,13 +3,15 @@ import QtQuick.Layouts import QtQuick.Window import QtQuick.Controls import FluentUI +import "./component" -FluContentPage { +FluScrollablePage { title:"TreeView" leftPadding:10 rightPadding:10 bottomPadding:20 + spacing: 0 function randomName() { var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"] @@ -50,95 +52,110 @@ FluContentPage { return [tree_view.createItem(randomCompany(), true, subtrees)].concat(createOrg(numLevels - 1, numSubtrees, numEmployees)) } - - FluTreeView{ - id:tree_view - width:240 - anchors{ - top:parent.top - left:parent.left - bottom:parent.bottom - } - onItemClicked: - (model)=>{ - showSuccess(model.text) + FluArea{ + id:layout_actions + Layout.fillWidth: true + Layout.topMargin: 20 + height: 50 + paddings: 10 + RowLayout{ + spacing: 14 + FluDropDownButton{ + id:btn_selection_model + Layout.preferredWidth: 140 + text:"None" + items:[ + FluMenuItem{ + text:"None" + onClicked: { + btn_selection_model.text = text + tree_view.selectionMode = FluTabView.Equal + } + }, + FluMenuItem{ + text:"Single" + onClicked: { + btn_selection_model.text = text + tree_view.selectionMode = FluTabView.SizeToContent + } + }, + FluMenuItem{ + text:"Muiltple" + onClicked: { + btn_selection_model.text = text + tree_view.selectionMode = FluTabView.Compact + } + } + ] + } + FluFilledButton{ + text:"获取选中的数据" + onClicked: { + if(tree_view.selectionMode === FluTreeView.None){ + showError("当前非选择模式,没有选中的数据") + } + if(tree_view.selectionMode === FluTreeView.Single){ + if(!tree_view.signleData()){ + showError("没有选中数据") + return + } + showSuccess(tree_view.signleData().text) + } + if(tree_view.selectionMode === FluTreeView.Multiple){ + if(tree_view.multipData().length===0){ + showError("没有选中数据") + return + } + var info = [] + tree_view.multipData().map((value)=>info.push(value.text)) + showSuccess(info.join(",")) + } + } } - - Component.onCompleted: { - var org = createOrg(3, 3, 3) - updateData(org) - } + } + FluArea{ + Layout.fillWidth: true + Layout.topMargin: 10 + paddings: 10 + height: 400 + FluTreeView{ + id:tree_view + width:240 + anchors{ + top:parent.top + left:parent.left + bottom:parent.bottom + } + onItemClicked: + (model)=>{ + showSuccess(model.text) + } + Component.onCompleted: { + var org = createOrg(3, 3, 3) + createItem() + updateData(org) + } + } } - - ColumnLayout{ - anchors{ - left: tree_view.right - right: parent.right - top: parent.top - } - - FluText{ - text:{ - if(tree_view.selectionMode === FluTreeView.None){ - return "selectionMode->FluTreeView.None" - } - if(tree_view.selectionMode === FluTreeView.Single){ - return "selectionMode->FluTreeView.Single" - } - if(tree_view.selectionMode === FluTreeView.Multiple){ - return "selectionMode->FluTreeView.Multiple" - } - } - } - - FluButton{ - text:"None" - onClicked: { - tree_view.selectionMode = FluTreeView.None - } - } - - FluButton{ - text:"Single" - onClicked: { - tree_view.selectionMode = FluTreeView.Single - } - } - - FluButton{ - text:"Multiple" - onClicked: { - tree_view.selectionMode = FluTreeView.Multiple - } - } - - FluFilledButton{ - text:"获取选中的数据" - onClicked: { - if(tree_view.selectionMode === FluTreeView.None){ - showError("当前非选择模式,没有选中的数据") - } - if(tree_view.selectionMode === FluTreeView.Single){ - if(!tree_view.signleData()){ - showError("没有选中数据") - return - } - showSuccess(tree_view.signleData().text) - } - if(tree_view.selectionMode === FluTreeView.Multiple){ - if(tree_view.multipData().length===0){ - showError("没有选中数据") - return - } - var info = [] - tree_view.multipData().map((value)=>info.push(value.text)) - showSuccess(info.join(",")) - } - } - } - + CodeExpander{ + Layout.fillWidth: true + code:'FluTreeView{ + id:tree_view + width:240 + height:600 + Component.onCompleted: { + var datas = [] + datas.push(createItem("Node1",false)) + datas.push(createItem("Node2",false)) + datas.push(createItem("Node2",true,[createItem("Node2-1",false),createItem("Node2-2",false)])) + updateData(datas) } } +' + } + + +} diff --git a/example/T_Typography.qml b/example/T_Typography.qml index 478ede1..2ecfc62 100644 --- a/example/T_Typography.qml +++ b/example/T_Typography.qml @@ -15,15 +15,19 @@ FluContentPage { slider.seek(0) } - ScrollView{ - clip: true - width: parent.width - contentWidth: parent.width + FluArea{ + anchors{ + top:parent.top + left: parent.left + right: parent.right + bottom: parent.bottom + topMargin: 20 + } + paddings: 10 ColumnLayout{ spacing: 0 FluText{ text:"Display" - Layout.topMargin: 20 padding: 0 pixelSize: textSize fontStyle: FluText.Display @@ -65,21 +69,26 @@ FluContentPage { fontStyle: FluText.Caption } } + + FluSlider{ + id:slider + vertical:true + anchors{ + right: parent.right + rightMargin: 45 + top: parent.top + topMargin: 30 + } + onValueChanged:{ + textSize = value/100*6+FluTheme.textSize + } + } + } - FluSlider{ - id:slider - vertical:true - anchors{ - right: parent.right - rightMargin: 45 - top: parent.top - topMargin: 30 - } - onValueChanged:{ - textSize = value/100*6+FluTheme.textSize - } - } + + + } diff --git a/example/component/CodeExpander.qml b/example/component/CodeExpander.qml index a086c1d..c2605d0 100644 --- a/example/component/CodeExpander.qml +++ b/example/component/CodeExpander.qml @@ -16,8 +16,13 @@ FluExpander{ width:parent.width readOnly:true text:code + focus:false + KeyNavigation.priority: KeyNavigation.BeforeItem background:Rectangle{ - color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97) + radius: 4 + color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1) + border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) + border.width: 1 } } diff --git a/example/global/ItemsOriginal.qml b/example/global/ItemsOriginal.qml index d414a3e..9a1b0fe 100644 --- a/example/global/ItemsOriginal.qml +++ b/example/global/ItemsOriginal.qml @@ -3,7 +3,6 @@ import QtQuick import FluentUI - FluObject{ property var navigationView @@ -19,7 +18,6 @@ FluObject{ FluPaneItemExpander{ title:"Basic input" icon:FluentIcons.CheckboxComposite - FluPaneItem{ title:"Buttons" image:"qrc:/res/image/control/Button.png" @@ -38,7 +36,6 @@ FluObject{ navigationView.push("qrc:/T_Slider.qml") } } - FluPaneItem{ title:"CheckBox" image:"qrc:/res/image/control/Checkbox.png" @@ -48,7 +45,6 @@ FluObject{ navigationView.push("qrc:/T_CheckBox.qml") } } - FluPaneItem{ title:"ToggleSwitch" onTap:{ @@ -92,11 +88,9 @@ FluObject{ } } - FluPaneItemExpander{ title:"Surface" icon:FluentIcons.SurfaceHub - FluPaneItem{ title:"InfoBar" image:"qrc:/res/image/control/InfoBar.png" @@ -106,42 +100,36 @@ FluObject{ navigationView.push("qrc:/T_InfoBar.qml") } } - FluPaneItem{ title:"Progress" onTap:{ navigationView.push("qrc:/T_Progress.qml") } } - FluPaneItem{ title:"Badge" onTap:{ navigationView.push("qrc:/T_Badge.qml") } } - FluPaneItem{ title:"Rectangle" onTap:{ navigationView.push("qrc:/T_Rectangle.qml") } } - FluPaneItem{ title:"Carousel" onTap:{ navigationView.push("qrc:/T_Carousel.qml") } } - FluPaneItem{ title:"Expander" onTap:{ navigationView.push("qrc:/T_Expander.qml") } } - } FluPaneItemExpander{ @@ -153,14 +141,12 @@ FluObject{ navigationView.push("qrc:/T_Dialog.qml") } } - FluPaneItem{ title:"Tooltip" onTap:{ navigationView.push("qrc:/T_Tooltip.qml") } } - FluPaneItem{ title:"Menu" onTap:{ @@ -172,7 +158,6 @@ FluObject{ FluPaneItemExpander{ title:"Navigation" icon:FluentIcons.AllApps - FluPaneItem{ title:"Pivot" image:"qrc:/res/image/control/Pivot.png" @@ -226,19 +211,18 @@ FluObject{ navigationView.push("qrc:/T_Theme.qml") } } - - FluPaneItem{ - title:"Awesome" - onTap:{ - navigationView.push("qrc:/T_Awesome.qml") - } - } FluPaneItem{ title:"Typography" onTap:{ navigationView.push("qrc:/T_Typography.qml") } } + FluPaneItem{ + title:"Awesome" + onTap:{ + navigationView.push("qrc:/T_Awesome.qml") + } + } } FluPaneItemExpander{