mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2025-07-03 00:25:25 +08:00
update
This commit is contained in:
zhuzichu
26
example/qml/App.qml
Normal file
26
example/qml/App.qml
Normal file
@ -0,0 +1,26 @@
|
||||
import QtQuick
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import FluentUI
|
||||
|
||||
Window {
|
||||
id:app
|
||||
Component.onCompleted: {
|
||||
FluApp.init(app)
|
||||
FluTheme.frameless = ("windows" === Qt.platform.os)
|
||||
FluTheme.darkMode = FluDarkMode.System
|
||||
FluApp.routes = {
|
||||
"/":"qrc:/qml/window/MainWindow.qml",
|
||||
"/about":"qrc:/qml/window/AboutWindow.qml",
|
||||
"/login":"qrc:/qml/window/LoginWindow.qml",
|
||||
"/chat":"qrc:/qml/window/ChatWindow.qml",
|
||||
"/media":"qrc:/qml/window/MediaWindow.qml",
|
||||
"/singleTaskWindow":"qrc:/qml/window/SingleTaskWindow.qml",
|
||||
"/standardWindow":"qrc:/qml/window/StandardWindow.qml",
|
||||
"/singleInstanceWindow":"qrc:/qml/window/SingleInstanceWindow.qml"
|
||||
}
|
||||
FluApp.initialRoute = "/"
|
||||
FluApp.run()
|
||||
}
|
||||
}
|
||||
131
example/qml/component/CodeExpander.qml
Normal file
131
example/qml/component/CodeExpander.qml
Normal file
@ -0,0 +1,131 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
|
||||
FluExpander{
|
||||
|
||||
property string code: ""
|
||||
|
||||
headerText: "Source"
|
||||
contentHeight:content.height
|
||||
|
||||
FluMultilineTextBox{
|
||||
id:content
|
||||
width:parent.width
|
||||
readOnly:true
|
||||
text:highlightQmlCode(code)
|
||||
focus:false
|
||||
textFormat: FluMultilineTextBox.RichText
|
||||
KeyNavigation.priority: KeyNavigation.BeforeItem
|
||||
background:Rectangle{
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
FluIconButton{
|
||||
iconSource:FluentIcons.Copy
|
||||
anchors{
|
||||
right: parent.right
|
||||
top: parent.top
|
||||
rightMargin: 5
|
||||
topMargin: 5
|
||||
}
|
||||
onClicked:{
|
||||
FluApp.clipText(content.text)
|
||||
showSuccess("复制成功")
|
||||
}
|
||||
}
|
||||
|
||||
function htmlEncode(e){
|
||||
var i,s;
|
||||
for(i in s={
|
||||
"&":/&/g,//""//":/"/g,"'":/'/g,
|
||||
"<":/</g,">":/>/g,"<br/>":/\n/g,
|
||||
" ":/ /g," ":/\t/g
|
||||
})e=e.replace(s[i],i);
|
||||
return e;
|
||||
}
|
||||
|
||||
function highlightQmlCode(code) {
|
||||
// 定义 QML 关键字列表
|
||||
var qmlKeywords = [
|
||||
"FluTextButton",
|
||||
"FluAppBar",
|
||||
"FluAutoSuggestBox",
|
||||
"FluBadge",
|
||||
"FluButton",
|
||||
"FluCalendarPicker",
|
||||
"FluCalendarView",
|
||||
"FluCarousel",
|
||||
"FluCheckBox",
|
||||
"FluColorPicker",
|
||||
"FluColorView",
|
||||
"FluComboBox",
|
||||
"FluContentDialog",
|
||||
"FluContentPage",
|
||||
"FluDatePicker",
|
||||
"FluDivider",
|
||||
"FluDropDownButton",
|
||||
"FluExpander",
|
||||
"FluFilledButton",
|
||||
"FluFlipView",
|
||||
"FluFocusRectangle",
|
||||
"FluIcon",
|
||||
"FluIconButton",
|
||||
"FluInfoBar",
|
||||
"FluItem",
|
||||
"FluMediaPlayer",
|
||||
"FluMenu",
|
||||
"FluMenuItem",
|
||||
"FluMultilineTextBox",
|
||||
"FluNavigationView",
|
||||
"FluObject",
|
||||
"FluPaneItem",
|
||||
"FluPaneItemExpander",
|
||||
"FluPaneItemHeader",
|
||||
"FluPaneItemSeparator",
|
||||
"FluPivot",
|
||||
"FluPivotItem",
|
||||
"FluProgressBar",
|
||||
"FluProgressRing",
|
||||
"FluRadioButton",
|
||||
"FluRectangle",
|
||||
"FluScrollablePage",
|
||||
"FluScrollBar",
|
||||
"FluShadow",
|
||||
"FluSlider",
|
||||
"FluTabView",
|
||||
"FluText",
|
||||
"FluTextArea",
|
||||
"FluTextBox",
|
||||
"FluTextBoxBackground",
|
||||
"FluTextBoxMenu",
|
||||
"FluTextButton",
|
||||
"FluTextFiled",
|
||||
"FluTimePicker",
|
||||
"FluToggleSwitch",
|
||||
"FluTooltip",
|
||||
"FluTreeView",
|
||||
"FluWindow",
|
||||
"FluWindowResize",
|
||||
"FluToggleButton",
|
||||
"FluTableView",
|
||||
"FluColors",
|
||||
"FluTheme",
|
||||
"FluStatusView",
|
||||
"FluRatingControl",
|
||||
"FluPasswordBox"
|
||||
];
|
||||
code = code.replace(/\n/g, "<br>");
|
||||
code = code.replace(/ /g, " ");
|
||||
return code.replace(RegExp("\\b(" + qmlKeywords.join("|") + ")\\b", "g"), "<span style='color: #c23a80'>$1</span>");
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
26
example/qml/global/ItemsFooter.qml
Normal file
26
example/qml/global/ItemsFooter.qml
Normal file
@ -0,0 +1,26 @@
|
||||
pragma Singleton
|
||||
|
||||
import QtQuick
|
||||
import FluentUI
|
||||
|
||||
FluObject{
|
||||
id:footer_items
|
||||
|
||||
property var navigationView
|
||||
|
||||
FluPaneItemSeparator{}
|
||||
FluPaneItem{
|
||||
title:lang.about
|
||||
icon:FluentIcons.Contact
|
||||
tapFunc:function(){
|
||||
FluApp.navigate("/about")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:lang.settings
|
||||
icon:FluentIcons.Settings
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_Settings.qml")
|
||||
}
|
||||
}
|
||||
}
|
||||
320
example/qml/global/ItemsOriginal.qml
Normal file
320
example/qml/global/ItemsOriginal.qml
Normal file
@ -0,0 +1,320 @@
|
||||
pragma Singleton
|
||||
|
||||
import QtQuick
|
||||
import FluentUI
|
||||
|
||||
FluObject{
|
||||
|
||||
property var navigationView
|
||||
|
||||
FluPaneItem{
|
||||
title:lang.home
|
||||
// icon:FluentIcons.Home
|
||||
cusIcon: Image{
|
||||
anchors.centerIn: parent
|
||||
source: FluTheme.dark ? "qrc:/res/svg/home_dark.svg" : "qrc:/res/svg/home.svg"
|
||||
sourceSize: Qt.size(30,30)
|
||||
width: 18
|
||||
height: 18
|
||||
}
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_Home.qml")
|
||||
}
|
||||
}
|
||||
|
||||
FluPaneItemExpander{
|
||||
title:lang.basic_input
|
||||
icon:FluentIcons.CheckboxComposite
|
||||
FluPaneItem{
|
||||
title:"Buttons"
|
||||
image:"qrc:/res/image/control/Button.png"
|
||||
recentlyUpdated:true
|
||||
desc:"A control that responds to user input and raisesa Click event."
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_Buttons.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"Slider"
|
||||
image:"qrc:/res/image/control/Slider.png"
|
||||
recentlyUpdated:true
|
||||
desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_Slider.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"CheckBox"
|
||||
image:"qrc:/res/image/control/Checkbox.png"
|
||||
recentlyUpdated:true
|
||||
desc:"A control that a user can select or clear."
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_CheckBox.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"ToggleSwitch"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_ToggleSwitch.qml")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluPaneItemExpander{
|
||||
title:lang.form
|
||||
icon:FluentIcons.GridView
|
||||
FluPaneItem{
|
||||
title:"TextBox"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_TextBox.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"TimePicker"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_TimePicker.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"DatePicker"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_DatePicker.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"CalendarPicker"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_CalendarPicker.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"ColorPicker"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_ColorPicker.qml")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluPaneItemExpander{
|
||||
title:lang.surface
|
||||
icon:FluentIcons.SurfaceHub
|
||||
FluPaneItem{
|
||||
title:"InfoBar"
|
||||
image:"qrc:/res/image/control/InfoBar.png"
|
||||
recentlyUpdated:true
|
||||
desc:"An inline message to display app-wide statuschange information."
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_InfoBar.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"Progress"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_Progress.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"RatingControl"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_RatingControl.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"Badge"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_Badge.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"Rectangle"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_Rectangle.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"StatusView"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_StatusView.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"Carousel"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_Carousel.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"Expander"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_Expander.qml")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluPaneItemExpander{
|
||||
title:lang.popus
|
||||
icon:FluentIcons.ButtonMenu
|
||||
FluPaneItem{
|
||||
title:"Dialog"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_Dialog.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"Tooltip"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_Tooltip.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"Menu"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_Menu.qml")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluPaneItemExpander{
|
||||
title:lang.navigation
|
||||
icon:FluentIcons.AllApps
|
||||
FluPaneItem{
|
||||
title:"Pivot"
|
||||
image:"qrc:/res/image/control/Pivot.png"
|
||||
recentlyAdded:true
|
||||
order:3
|
||||
desc:"Presents information from different sources in atabbed view."
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_Pivot.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"TabView"
|
||||
image:"qrc:/res/image/control/TabView.png"
|
||||
recentlyAdded:true
|
||||
order:1
|
||||
desc:"A control that displays a collection of tabs thatcan be used to display several documents."
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_TabView.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"TreeView"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_TreeView.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"TableView"
|
||||
image:"qrc:/res/image/control/DataGrid.png"
|
||||
recentlyAdded:true
|
||||
order:4
|
||||
desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_TableView.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"MultiWindow"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_MultiWindow.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"FlipView"
|
||||
image:"qrc:/res/image/control/FlipView.png"
|
||||
recentlyAdded:true
|
||||
order:2
|
||||
desc:"Presents a collection of items that the user canflip through, one item at a time."
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_FlipView.qml")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluPaneItemExpander{
|
||||
title:lang.theming
|
||||
icon:FluentIcons.Brightness
|
||||
FluPaneItem{
|
||||
title:"Theme"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_Theme.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"Typography"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_Typography.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"Awesome"
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_Awesome.qml")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluPaneItemExpander{
|
||||
title:lang.media
|
||||
icon:FluentIcons.Media
|
||||
FluPaneItem{
|
||||
title:"MediaPlayer"
|
||||
image:"qrc:/res/image/control/MediaPlayerElement.png"
|
||||
recentlyAdded:true
|
||||
order:0
|
||||
desc:"A control to display video and image content."
|
||||
onTap:{
|
||||
navigationView.push("qrc:/qml/page/T_MediaPlayer.qml")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getRecentlyAddedData(){
|
||||
var arr = []
|
||||
for(var i=0;i<children.length;i++){
|
||||
var item = children[i]
|
||||
if(item instanceof FluPaneItem && item.recentlyAdded){
|
||||
arr.push(item)
|
||||
}
|
||||
if(item instanceof FluPaneItemExpander){
|
||||
for(var j=0;j<item.children.length;j++){
|
||||
var itemChild = item.children[j]
|
||||
if(itemChild instanceof FluPaneItem && itemChild.recentlyAdded){
|
||||
arr.push(itemChild)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
arr.sort(function(o1,o2){ return o2.order-o1.order })
|
||||
return arr
|
||||
}
|
||||
|
||||
function getRecentlyUpdatedData(){
|
||||
var arr = []
|
||||
var items = navigationView.getItems();
|
||||
for(var i=0;i<items.length;i++){
|
||||
var item = items[i]
|
||||
if(item instanceof FluPaneItem && item.recentlyUpdated){
|
||||
arr.push(item)
|
||||
}
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
function getSearchData(){
|
||||
var arr = []
|
||||
var items = navigationView.getItems();
|
||||
for(var i=0;i<items.length;i++){
|
||||
var item = items[i]
|
||||
if(item instanceof FluPaneItem){
|
||||
arr.push({title:item.title,key:item.key})
|
||||
}
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
function startPageByItem(data){
|
||||
navigationView.startPageByItem(data)
|
||||
}
|
||||
|
||||
}
|
||||
9
example/qml/global/MainEvent.qml
Normal file
9
example/qml/global/MainEvent.qml
Normal file
@ -0,0 +1,9 @@
|
||||
pragma Singleton
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
|
||||
QtObject {
|
||||
property int displayMode : FluNavigationView.Auto
|
||||
}
|
||||
3
example/qml/global/qmldir
Normal file
3
example/qml/global/qmldir
Normal file
@ -0,0 +1,3 @@
|
||||
singleton ItemsOriginal 1.0 ItemsOriginal.qml
|
||||
singleton ItemsFooter 1.0 ItemsFooter.qml
|
||||
singleton MainEvent 1.0 MainEvent.qml
|
||||
74
example/qml/page/T_Awesome.qml
Normal file
74
example/qml/page/T_Awesome.qml
Normal file
@ -0,0 +1,74 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
|
||||
FluContentPage {
|
||||
|
||||
title:"Awesome"
|
||||
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
|
||||
FluTextBox{
|
||||
id:text_box
|
||||
placeholderText: "请输入关键字"
|
||||
anchors{
|
||||
topMargin: 20
|
||||
top:parent.top
|
||||
}
|
||||
}
|
||||
|
||||
FluFilledButton{
|
||||
text:"搜索"
|
||||
anchors{
|
||||
left: text_box.right
|
||||
verticalCenter: text_box.verticalCenter
|
||||
leftMargin: 14
|
||||
}
|
||||
onClicked: {
|
||||
grid_view.model = FluApp.awesomelist(text_box.text)
|
||||
}
|
||||
}
|
||||
GridView{
|
||||
id:grid_view
|
||||
cellWidth: 80
|
||||
cellHeight: 80
|
||||
clip: true
|
||||
model:FluApp.awesomelist()
|
||||
ScrollBar.vertical: FluScrollBar {}
|
||||
anchors{
|
||||
topMargin: 10
|
||||
top:text_box.bottom
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
bottom: parent.bottom
|
||||
}
|
||||
delegate: Item {
|
||||
width: 68
|
||||
height: 80
|
||||
FluIconButton{
|
||||
id:item_icon
|
||||
iconSource:modelData.icon
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
onClicked: {
|
||||
var text ="FluentIcons."+modelData.name;
|
||||
FluApp.clipText(text)
|
||||
showSuccess("您复制了 "+text)
|
||||
}
|
||||
}
|
||||
FluText {
|
||||
id:item_name
|
||||
font.pixelSize: 10
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.top: item_icon.bottom
|
||||
width:parent.width
|
||||
wrapMode: Text.WrapAnywhere
|
||||
text: modelData.name
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
120
example/qml/page/T_Badge.qml
Normal file
120
example/qml/page/T_Badge.qml
Normal file
@ -0,0 +1,120 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Badge"
|
||||
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 106
|
||||
paddings: 10
|
||||
|
||||
Column{
|
||||
spacing: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数"
|
||||
}
|
||||
|
||||
Row{
|
||||
spacing: 20
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
count:0
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
count:5
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
count:50
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
count:100
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
isDot:true
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
count:99
|
||||
color: Qt.rgba(250/255,173/255,20/255,1)
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
count:99
|
||||
color: Qt.rgba(82/255,196/255,26/255,1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
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)
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
381
example/qml/page/T_Buttons.qml
Normal file
381
example/qml/page/T_Buttons.qml
Normal file
@ -0,0 +1,381 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Controls.Basic
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
title:"Buttons"
|
||||
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluText{
|
||||
Layout.topMargin: 20
|
||||
text:"支持Tab键切换焦点，空格键执行点击事件"
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
FluTextButton{
|
||||
disabled:text_button_switch.selected
|
||||
text:"Text Button"
|
||||
onClicked: {
|
||||
showInfo("点击Text Button")
|
||||
}
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
|
||||
Row{
|
||||
spacing: 5
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:text_button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluTextButton{
|
||||
text:"Text Button"
|
||||
onClicked: {
|
||||
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
FluButton{
|
||||
disabled:button_switch.selected
|
||||
text:"Standard Button"
|
||||
onClicked: {
|
||||
showInfo("点击StandardButton")
|
||||
}
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
|
||||
Row{
|
||||
spacing: 5
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluButton{
|
||||
text:"Standard Button"
|
||||
onClicked: {
|
||||
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
Layout.topMargin: 20
|
||||
paddings: 10
|
||||
|
||||
FluFilledButton{
|
||||
disabled:filled_button_switch.selected
|
||||
text:"Filled Button"
|
||||
onClicked: {
|
||||
showWarning("点击FilledButton")
|
||||
}
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
|
||||
Row{
|
||||
spacing: 5
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:filled_button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluFilledButton{
|
||||
text:"Filled Button"
|
||||
onClicked: {
|
||||
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
Layout.topMargin: 20
|
||||
paddings: 10
|
||||
|
||||
FluToggleButton{
|
||||
disabled:toggle_button_switch.selected
|
||||
text:"Toggle Button"
|
||||
onClicked: {
|
||||
selected = !selected
|
||||
}
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
|
||||
Row{
|
||||
spacing: 5
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:toggle_button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluToggleButton{
|
||||
text:"Toggle Button"
|
||||
onClicked: {
|
||||
selected = !selected
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluIconButton{
|
||||
iconSource:FluentIcons.ChromeCloseContrast
|
||||
disabled:icon_button_switch.selected
|
||||
iconSize: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
onClicked:{
|
||||
showSuccess("点击IconButton")
|
||||
}
|
||||
}
|
||||
|
||||
Row{
|
||||
spacing: 5
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:icon_button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluIconButton{
|
||||
iconSource:FluentIcons.ChromeCloseContrast
|
||||
onClicked: {
|
||||
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluDropDownButton{
|
||||
disabled:drop_down_button_switch.selected
|
||||
text:"DropDownButton"
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
items:[
|
||||
FluMenuItem{
|
||||
text:"Menu_1"
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"Menu_2"
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"Menu_3"
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"Menu_4"
|
||||
}
|
||||
]
|
||||
}
|
||||
Row{
|
||||
spacing: 5
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:drop_down_button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluDropDownButton{
|
||||
text:"DropDownButton"
|
||||
items:[
|
||||
FluMenuItem{
|
||||
text:"Menu_1"
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"Menu_2"
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"Menu_3"
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"Menu_4"
|
||||
}
|
||||
]
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 100
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
ColumnLayout{
|
||||
spacing: 8
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
Repeater{
|
||||
id:repeater
|
||||
property int selecIndex : 0
|
||||
model: 3
|
||||
delegate: FluRadioButton{
|
||||
selected : repeater.selecIndex===index
|
||||
disabled:radio_button_switch.selected
|
||||
text:"Radio Button_"+index
|
||||
onClicked:{
|
||||
repeater.selecIndex = index
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Row{
|
||||
spacing: 5
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:radio_button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluRadioButton{
|
||||
selected:true
|
||||
text:"Text Button"
|
||||
onClicked: {
|
||||
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluCheckBox{
|
||||
disabled:check_box_switch.selected
|
||||
text:"Check Box"
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
Row{
|
||||
spacing: 5
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:check_box_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluCheckBox{
|
||||
text:"Check Box"
|
||||
}'
|
||||
}
|
||||
}
|
||||
54
example/qml/page/T_CalendarPicker.qml
Normal file
54
example/qml/page/T_CalendarPicker.qml
Normal file
@ -0,0 +1,54 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"CalendarPicker"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 350
|
||||
paddings: 10
|
||||
FluCalendarView{
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluCalendarView{
|
||||
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 80
|
||||
paddings: 10
|
||||
ColumnLayout{
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluCalendarPicker{
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluCalendarPicker{
|
||||
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
51
example/qml/page/T_Carousel.qml
Normal file
51
example/qml/page/T_Carousel.qml
Normal file
@ -0,0 +1,51 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Carousel"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 370
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
Column{
|
||||
spacing: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
|
||||
}
|
||||
FluCarousel{
|
||||
id:carousel
|
||||
Layout.topMargin: 20
|
||||
Layout.leftMargin: 5
|
||||
Component.onCompleted: {
|
||||
carousel.setData([{url:"qrc:/res/image/banner_1.jpg"},{url:"qrc:/res/image/banner_2.jpg"},{url:"qrc:/res/image/banner_3.jpg"}])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
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"}])
|
||||
}
|
||||
}'
|
||||
}
|
||||
}
|
||||
39
example/qml/page/T_CheckBox.qml
Normal file
39
example/qml/page/T_CheckBox.qml
Normal file
@ -0,0 +1,39 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"CheckBox"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
Row{
|
||||
spacing: 30
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluCheckBox{
|
||||
}
|
||||
FluCheckBox{
|
||||
text:"Text"
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluCheckBox{
|
||||
text:"Text"
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
75
example/qml/page/T_ColorPicker.qml
Normal file
75
example/qml/page/T_ColorPicker.qml
Normal file
@ -0,0 +1,75 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"ColorPicker"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 280
|
||||
Layout.topMargin: 20
|
||||
paddings: 10
|
||||
ColumnLayout{
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"此颜色组件是Github上的开源项目"
|
||||
}
|
||||
FluTextButton{
|
||||
leftPadding: 0
|
||||
rightPadding: 0
|
||||
text:"https://github.com/rshest/qml-colorpicker"
|
||||
onClicked: {
|
||||
Qt.openUrlExternally(text)
|
||||
}
|
||||
}
|
||||
FluColorView{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluColorView{
|
||||
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 60
|
||||
paddings: 10
|
||||
|
||||
RowLayout{
|
||||
FluText{
|
||||
text:"点击选择颜色->"
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluColorPicker{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluColorPicker{
|
||||
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
69
example/qml/page/T_DatePicker.qml
Normal file
69
example/qml/page/T_DatePicker.qml
Normal file
@ -0,0 +1,69 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"TimePicker"
|
||||
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
|
||||
Layout.topMargin: -1
|
||||
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"
|
||||
}
|
||||
|
||||
FluDatePicker{
|
||||
showYear:false
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluDatePicker{
|
||||
showYear:false
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
122
example/qml/page/T_Dialog.qml
Normal file
122
example/qml/page/T_Dialog.qml
Normal file
@ -0,0 +1,122 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Dialog"
|
||||
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 Double Button Dialog"
|
||||
onClicked: {
|
||||
double_btn_dialog.open()
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluContentDialog{
|
||||
id:dialog
|
||||
title:"友情提示"
|
||||
message:"确定要退出程序么？"
|
||||
negativeText:"取消"
|
||||
buttonFlags: FluContentDialog.NegativeButton | FluContentDialog.PositiveButton
|
||||
onNegativeClicked:{
|
||||
showSuccess("点击取消按钮")
|
||||
}
|
||||
positiveText:"确定"
|
||||
onPositiveClicked:{
|
||||
showSuccess("点击确定按钮")
|
||||
}
|
||||
}
|
||||
dialog.open()'
|
||||
}
|
||||
|
||||
FluContentDialog{
|
||||
id:double_btn_dialog
|
||||
title:"友情提示"
|
||||
message:"确定要退出程序么？"
|
||||
buttonFlags: FluContentDialog.NegativeButton | FluContentDialog.PositiveButton
|
||||
negativeText:"取消"
|
||||
onNegativeClicked:{
|
||||
showSuccess("点击取消按钮")
|
||||
}
|
||||
positiveText:"确定"
|
||||
onPositiveClicked:{
|
||||
showSuccess("点击确定按钮")
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluButton{
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
Layout.topMargin: 20
|
||||
text:"Show Triple Button Dialog"
|
||||
onClicked: {
|
||||
triple_btn_dialog.open()
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluContentDialog{
|
||||
id:dialog
|
||||
title:"友情提示"
|
||||
message:"确定要退出程序么？"
|
||||
negativeText:"取消"
|
||||
buttonFlags: FluContentDialog.NeutralButton | FluContentDialog.NegativeButton | FluContentDialog.PositiveButton
|
||||
negativeText:"取消"
|
||||
onNegativeClicked:{
|
||||
showSuccess("点击取消按钮")
|
||||
}
|
||||
positiveText:"确定"
|
||||
onPositiveClicked:{
|
||||
showSuccess("点击确定按钮")
|
||||
}
|
||||
neutralText:"最小化"
|
||||
onNeutralClicked:{
|
||||
showSuccess("点击最小化按钮")
|
||||
}
|
||||
}
|
||||
dialog.open()'
|
||||
}
|
||||
|
||||
FluContentDialog{
|
||||
id:triple_btn_dialog
|
||||
title:"友情提示"
|
||||
message:"确定要退出程序么？"
|
||||
buttonFlags: FluContentDialog.NeutralButton | FluContentDialog.NegativeButton | FluContentDialog.PositiveButton
|
||||
negativeText:"取消"
|
||||
onNegativeClicked:{
|
||||
showSuccess("点击取消按钮")
|
||||
}
|
||||
positiveText:"确定"
|
||||
onPositiveClicked:{
|
||||
showSuccess("点击确定按钮")
|
||||
}
|
||||
neutralText:"最小化"
|
||||
onNeutralClicked:{
|
||||
showSuccess("点击最小化按钮")
|
||||
}
|
||||
}
|
||||
}
|
||||
109
example/qml/page/T_Expander.qml
Normal file
109
example/qml/page/T_Expander.qml
Normal file
@ -0,0 +1,109 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Expander"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: layout_column.height+20
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
Column{
|
||||
id:layout_column
|
||||
spacing: 15
|
||||
anchors{
|
||||
top:parent.top
|
||||
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:"先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。今当远离，临表涕零，不知所言。"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
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:"先帝创业未半而中道崩殂，今天下三分......""
|
||||
}
|
||||
}
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
122
example/qml/page/T_FlipView.qml
Normal file
122
example/qml/page/T_FlipView.qml
Normal file
@ -0,0 +1,122 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"FlipView"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 340
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
ColumnLayout{
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluText{
|
||||
text:"水平方向的FlipView"
|
||||
}
|
||||
FluFlipView{
|
||||
Image{
|
||||
source: "qrc:/res/image/banner_1.jpg"
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
Image{
|
||||
source: "qrc:/res/image/banner_2.jpg"
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
Image{
|
||||
source: "qrc:/res/image/banner_3.jpg"
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
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
|
||||
height: 340
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
ColumnLayout{
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluText{
|
||||
text:"垂直方向的FlipView"
|
||||
}
|
||||
FluFlipView{
|
||||
vertical:true
|
||||
Image{
|
||||
source: "qrc:/res/image/banner_1.jpg"
|
||||
asynchronous: true
|
||||
sourceSize: Qt.size(400,300)
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
Image{
|
||||
source: "qrc:/res/image/banner_2.jpg"
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
Image{
|
||||
source: "qrc:/res/image/banner_3.jpg"
|
||||
asynchronous: true
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
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
|
||||
}
|
||||
}
|
||||
'
|
||||
}
|
||||
}
|
||||
271
example/qml/page/T_Home.qml
Normal file
271
example/qml/page/T_Home.qml
Normal file
@ -0,0 +1,271 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import "qrc:///qml/global/"
|
||||
import FluentUI
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
|
||||
leftPadding:10
|
||||
rightPadding:0
|
||||
bottomPadding:20
|
||||
|
||||
ListModel{
|
||||
id:model_header
|
||||
ListElement{
|
||||
icon:"qrc:/res/image/ic_home_github.png"
|
||||
title:"FluentUI GitHub"
|
||||
desc:"The latest FluentUI controls and styles for your applications."
|
||||
url:"https://github.com/zhuzichu520/FluentUI"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Item{
|
||||
Layout.fillWidth: true
|
||||
height: 320
|
||||
Image {
|
||||
fillMode:Image.PreserveAspectCrop
|
||||
anchors.fill: parent
|
||||
verticalAlignment: Qt.AlignTop
|
||||
source: "qrc:/res/image/bg_home_header.png"
|
||||
}
|
||||
Rectangle{
|
||||
anchors.fill: parent
|
||||
gradient: Gradient{
|
||||
GradientStop { position: 0.8; color: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(1,1,1,0) }
|
||||
GradientStop { position: 1.0; color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) }
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"FluentUI Gallery"
|
||||
fontStyle: FluText.TitleLarge
|
||||
anchors{
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
topMargin: 20
|
||||
leftMargin: 20
|
||||
}
|
||||
}
|
||||
|
||||
ListView{
|
||||
anchors{
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
bottom: parent.bottom
|
||||
}
|
||||
orientation: ListView.Horizontal
|
||||
height: 240
|
||||
model: model_header
|
||||
header: Item{height: 10;width: 10}
|
||||
footer: Item{height: 10;width: 10}
|
||||
ScrollBar.horizontal: FluScrollBar{
|
||||
id: scrollbar_header
|
||||
}
|
||||
clip: false
|
||||
delegate:Item{
|
||||
width: 220
|
||||
height: 240
|
||||
FluArea{
|
||||
radius: 8
|
||||
width: 200
|
||||
height: 220
|
||||
anchors.centerIn: parent
|
||||
Rectangle{
|
||||
anchors.fill: parent
|
||||
radius: 8
|
||||
color:{
|
||||
if(FluTheme.dark){
|
||||
if(item_mouse.containsMouse){
|
||||
return Qt.rgba(1,1,1,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0)
|
||||
}else{
|
||||
if(item_mouse.containsMouse){
|
||||
return Qt.rgba(0,0,0,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout{
|
||||
Image {
|
||||
Layout.topMargin: 20
|
||||
Layout.leftMargin: 20
|
||||
Layout.preferredWidth: 50
|
||||
Layout.preferredHeight: 50
|
||||
source: model.icon
|
||||
}
|
||||
FluText{
|
||||
text: model.title
|
||||
fontStyle: FluText.Body
|
||||
Layout.topMargin: 20
|
||||
Layout.leftMargin: 20
|
||||
}
|
||||
FluText{
|
||||
text: model.desc
|
||||
Layout.topMargin: 5
|
||||
Layout.preferredWidth: 160
|
||||
Layout.leftMargin: 20
|
||||
color: FluColors.Grey120
|
||||
font.pixelSize: 12
|
||||
wrapMode: Text.WrapAnywhere
|
||||
}
|
||||
}
|
||||
FluIcon{
|
||||
iconSource: FluentIcons.OpenInNewWindow
|
||||
iconSize: 15
|
||||
anchors{
|
||||
bottom: parent.bottom
|
||||
right: parent.right
|
||||
rightMargin: 10
|
||||
bottomMargin: 10
|
||||
}
|
||||
}
|
||||
MouseArea{
|
||||
id:item_mouse
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onWheel: (wheel)=>{
|
||||
if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
|
||||
else scrollbar_header.increase()
|
||||
}
|
||||
onClicked: {
|
||||
Qt.openUrlExternally(model.url)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component{
|
||||
id:com_item
|
||||
Item{
|
||||
width: 320
|
||||
height: 120
|
||||
FluArea{
|
||||
radius: 8
|
||||
width: 300
|
||||
height: 100
|
||||
anchors.centerIn: parent
|
||||
Rectangle{
|
||||
anchors.fill: parent
|
||||
radius: 8
|
||||
color:{
|
||||
if(FluTheme.dark){
|
||||
if(item_mouse.containsMouse){
|
||||
return Qt.rgba(1,1,1,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0)
|
||||
}else{
|
||||
if(item_mouse.containsMouse){
|
||||
return Qt.rgba(0,0,0,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0)
|
||||
}
|
||||
}
|
||||
}
|
||||
Image{
|
||||
id:item_icon
|
||||
height: 40
|
||||
width: 40
|
||||
source: modelData.image
|
||||
anchors{
|
||||
left: parent.left
|
||||
leftMargin: 20
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
FluText{
|
||||
id:item_title
|
||||
text:modelData.title
|
||||
fontStyle: FluText.BodyStrong
|
||||
anchors{
|
||||
left: item_icon.right
|
||||
leftMargin: 20
|
||||
top: item_icon.top
|
||||
}
|
||||
}
|
||||
|
||||
FluText{
|
||||
id:item_desc
|
||||
text:modelData.desc
|
||||
color:FluColors.Grey120
|
||||
wrapMode: Text.WrapAnywhere
|
||||
elide: Text.ElideRight
|
||||
fontStyle: FluText.Caption
|
||||
maximumLineCount: 2
|
||||
anchors{
|
||||
left: item_title.left
|
||||
right: parent.right
|
||||
rightMargin: 20
|
||||
top: item_title.bottom
|
||||
topMargin: 5
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle{
|
||||
height: 12
|
||||
width: 12
|
||||
radius: 6
|
||||
color: FluTheme.primaryColor.dark
|
||||
anchors{
|
||||
right: parent.right
|
||||
top: parent.top
|
||||
rightMargin: 14
|
||||
topMargin: 14
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea{
|
||||
id:item_mouse
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onClicked: {
|
||||
ItemsOriginal.startPageByItem(modelData)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluText{
|
||||
text: "Recently added samples"
|
||||
fontStyle: FluText.Title
|
||||
Layout.topMargin: 20
|
||||
Layout.leftMargin: 20
|
||||
}
|
||||
|
||||
GridView{
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: contentHeight
|
||||
cellHeight: 120
|
||||
cellWidth: 320
|
||||
model:ItemsOriginal.getRecentlyAddedData()
|
||||
interactive: false
|
||||
delegate: com_item
|
||||
}
|
||||
|
||||
FluText{
|
||||
text: "Recently updated samples"
|
||||
fontStyle: FluText.Title
|
||||
Layout.topMargin: 20
|
||||
Layout.leftMargin: 20
|
||||
}
|
||||
|
||||
GridView{
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: contentHeight
|
||||
cellHeight: 120
|
||||
cellWidth: 320
|
||||
interactive: false
|
||||
model: ItemsOriginal.getRecentlyUpdatedData()
|
||||
delegate: com_item
|
||||
}
|
||||
|
||||
}
|
||||
64
example/qml/page/T_InfoBar.qml
Normal file
64
example/qml/page/T_InfoBar.qml
Normal file
@ -0,0 +1,64 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"InfoBar"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
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")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'showInfo("这是一个Info样式的InfoBar")
|
||||
|
||||
showWarning("这是一个Warning样式的InfoBar")
|
||||
|
||||
showError("这是一个Error样式的InfoBar")
|
||||
|
||||
showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")'
|
||||
}
|
||||
}
|
||||
66
example/qml/page/T_MediaPlayer.qml
Normal file
66
example/qml/page/T_MediaPlayer.qml
Normal file
@ -0,0 +1,66 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"MediaPlayer"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
onVisibleChanged: {
|
||||
if(visible){
|
||||
player.play()
|
||||
}else{
|
||||
player.pause()
|
||||
}
|
||||
}
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 320
|
||||
Layout.topMargin: 20
|
||||
paddings: 10
|
||||
ColumnLayout{
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:parent.left
|
||||
}
|
||||
FluMediaPlayer{
|
||||
id:player
|
||||
source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
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
|
||||
onClicked:{
|
||||
FluApp.navigate("/media",{source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
92
example/qml/page/T_Menu.qml
Normal file
92
example/qml/page/T_Menu.qml
Normal file
@ -0,0 +1,92 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Menu"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 100
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
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()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluMenu{
|
||||
id:menu
|
||||
FluMenuItem:{
|
||||
text:"删除"
|
||||
onClicked: {
|
||||
showError("删除")
|
||||
}
|
||||
}
|
||||
FluMenuItem:{
|
||||
text:"修改"
|
||||
onClicked: {
|
||||
showInfo"修改")
|
||||
}
|
||||
}
|
||||
}
|
||||
menu.popup()
|
||||
'
|
||||
}
|
||||
|
||||
FluMenu{
|
||||
id:menu
|
||||
FluMenuItem{
|
||||
text:"删除"
|
||||
onClicked: {
|
||||
showError("删除")
|
||||
}
|
||||
}
|
||||
FluMenuItem{
|
||||
text:"修改"
|
||||
onClicked: {
|
||||
showInfo("修改")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
190
example/qml/page/T_MultiWindow.qml
Normal file
190
example/qml/page/T_MultiWindow.qml
Normal file
@ -0,0 +1,190 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
property string password: ""
|
||||
property var loginPageRegister: registerForWindowResult("/login")
|
||||
|
||||
title:"MultiWindow"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
Connections{
|
||||
target: loginPageRegister
|
||||
function onResult(data)
|
||||
{
|
||||
password = data.password
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 86
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
Column{
|
||||
spacing: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"<font color='red'>Standard</font>模式窗口，每次都会创建新窗口"
|
||||
}
|
||||
FluButton{
|
||||
text:"点击创建窗口"
|
||||
onClicked: {
|
||||
FluApp.navigate("/standardWindow")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 86
|
||||
paddings: 10
|
||||
Layout.topMargin: 10
|
||||
Column{
|
||||
spacing: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"<font color='red'>SingleTask</font>模式窗口，如果窗口存在，这激活该窗口"
|
||||
textFormat: Text.RichText
|
||||
}
|
||||
FluButton{
|
||||
text:"点击创建窗口"
|
||||
onClicked: {
|
||||
FluApp.navigate("/singleTaskWindow")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 86
|
||||
paddings: 10
|
||||
Layout.topMargin: 10
|
||||
Column{
|
||||
spacing: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"<font color='red'>SingleInstance</font>模式窗口，如果窗口存在，则销毁窗口，然后新建窗口"
|
||||
}
|
||||
FluButton{
|
||||
text:"点击创建窗口"
|
||||
onClicked: {
|
||||
FluApp.navigate("/singleInstanceWindow")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluWindow{
|
||||
//launchMode: FluWindow.Standard
|
||||
//launchMode: FluWindow.SingleTask
|
||||
launchMode: FluWindow.SingleInstance
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 100
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
Column{
|
||||
spacing: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"页面跳转，不携带任何参数"
|
||||
}
|
||||
FluButton{
|
||||
text:"点击跳转"
|
||||
onClicked: {
|
||||
FluApp.navigate("/about")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluButton{
|
||||
text:"点击跳转"
|
||||
onClicked: {
|
||||
FluApp.navigate("/about")
|
||||
}
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 130
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
Column{
|
||||
spacing: 15
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"页面跳转，并携带参数用户名：zhuzichu"
|
||||
}
|
||||
FluButton{
|
||||
text:"点击跳转到登录"
|
||||
onClicked: {
|
||||
loginPageRegister.launch({username:"zhuzichu"})
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"登录窗口返回过来的密码->"+password
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'property var loginPageRegister: registerForWindowResult("/login")
|
||||
|
||||
Connections{
|
||||
target: loginPageRegister
|
||||
function onResult(data)
|
||||
{
|
||||
password = data.password
|
||||
}
|
||||
}
|
||||
|
||||
FluButton{
|
||||
text:"点击跳转"
|
||||
onClicked: {
|
||||
loginPageRegister.launch({username:"zhuzichu"})
|
||||
}
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
}
|
||||
84
example/qml/page/T_Pivot.qml
Normal file
84
example/qml/page/T_Pivot.qml
Normal file
@ -0,0 +1,84 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Pivot"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 400
|
||||
paddings: 10
|
||||
|
||||
FluPivot{
|
||||
anchors.fill: parent
|
||||
currentIndex: 2
|
||||
FluPivotItem{
|
||||
title:"All"
|
||||
contentItem:FluText{
|
||||
text:"All emails go here."
|
||||
}
|
||||
}
|
||||
FluPivotItem{
|
||||
title:"Unread"
|
||||
contentItem:FluText{
|
||||
text:"Unread emails go here."
|
||||
}
|
||||
}
|
||||
FluPivotItem{
|
||||
title:"Flagged"
|
||||
contentItem:FluText{
|
||||
text:"Flagged emails go here."
|
||||
}
|
||||
}
|
||||
FluPivotItem{
|
||||
title:"Urgent"
|
||||
contentItem:FluText{
|
||||
text:"Urgent emails go here."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
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."
|
||||
}
|
||||
}
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
}
|
||||
70
example/qml/page/T_Progress.qml
Normal file
70
example/qml/page/T_Progress.qml
Normal file
@ -0,0 +1,70 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Progress"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluProgressBar{
|
||||
|
||||
}
|
||||
|
||||
FluProgressRing{
|
||||
|
||||
}
|
||||
|
||||
FluProgressBar{
|
||||
indeterminate: false
|
||||
}
|
||||
|
||||
FluProgressRing{
|
||||
indeterminate: false
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
44
example/qml/page/T_RatingControl.qml
Normal file
44
example/qml/page/T_RatingControl.qml
Normal file
@ -0,0 +1,44 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"RatingControl"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 100
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
Column{
|
||||
spacing: 10
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluRatingControl{
|
||||
|
||||
}
|
||||
FluRatingControl{
|
||||
number:10
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluRatingControl{
|
||||
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
152
example/qml/page/T_Rectangle.qml
Normal file
152
example/qml/page/T_Rectangle.qml
Normal file
@ -0,0 +1,152 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Rectangle"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
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
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
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)
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
117
example/qml/page/T_Settings.qml
Normal file
117
example/qml/page/T_Settings.qml
Normal file
@ -0,0 +1,117 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "qrc:///qml/global/"
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Settings"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 136
|
||||
paddings: 10
|
||||
|
||||
ColumnLayout{
|
||||
spacing: 10
|
||||
anchors{
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:lang.dark_mode
|
||||
fontStyle: FluText.BodyStrong
|
||||
Layout.bottomMargin: 4
|
||||
}
|
||||
Repeater{
|
||||
model: [{title:"System",mode:FluDarkMode.System},{title:"Light",mode:FluDarkMode.Light},{title:"Dark",mode:FluDarkMode.Dark}]
|
||||
delegate: FluRadioButton{
|
||||
selected : FluTheme.darkMode === modelData.mode
|
||||
text:modelData.title
|
||||
onClicked:{
|
||||
FluTheme.darkMode = modelData.mode
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 168
|
||||
paddings: 10
|
||||
|
||||
ColumnLayout{
|
||||
spacing: 10
|
||||
anchors{
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
}
|
||||
|
||||
FluText{
|
||||
text:lang.navigation_view_display_mode
|
||||
fontStyle: FluText.BodyStrong
|
||||
Layout.bottomMargin: 4
|
||||
}
|
||||
Repeater{
|
||||
model: [{title:"Open",mode:FluNavigationView.Open},{title:"Compact",mode:FluNavigationView.Compact},{title:"Minimal",mode:FluNavigationView.Minimal},{title:"Auto",mode:FluNavigationView.Auto}]
|
||||
delegate: FluRadioButton{
|
||||
selected : MainEvent.displayMode===modelData.mode
|
||||
text:modelData.title
|
||||
onClicked:{
|
||||
MainEvent.displayMode = modelData.mode
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 80
|
||||
paddings: 10
|
||||
|
||||
ColumnLayout{
|
||||
spacing: 10
|
||||
anchors{
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
}
|
||||
|
||||
FluText{
|
||||
text:lang.locale
|
||||
fontStyle: FluText.BodyStrong
|
||||
Layout.bottomMargin: 4
|
||||
}
|
||||
|
||||
Flow{
|
||||
spacing: 5
|
||||
Repeater{
|
||||
model: ["Zh","En"]
|
||||
delegate: FluRadioButton{
|
||||
selected : appInfo.lang.objectName === modelData
|
||||
text:modelData
|
||||
onClicked:{
|
||||
console.debug(modelData)
|
||||
appInfo.changeLang(modelData)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
58
example/qml/page/T_Slider.qml
Normal file
58
example/qml/page/T_Slider.qml
Normal file
@ -0,0 +1,58 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import "../component"
|
||||
import FluentUI
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Slider"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 100
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluSlider{
|
||||
value: 50
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluSlider{
|
||||
value:50
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 200
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
FluSlider{
|
||||
value: 50
|
||||
vertical:true
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 20
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluSlider{
|
||||
vertical:true
|
||||
value:50
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
92
example/qml/page/T_StatusView.qml
Normal file
92
example/qml/page/T_StatusView.qml
Normal file
@ -0,0 +1,92 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"StatusView"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluArea{
|
||||
id:layout_actions
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 50
|
||||
paddings: 10
|
||||
RowLayout{
|
||||
spacing: 14
|
||||
FluDropDownButton{
|
||||
id:btn_status_mode
|
||||
Layout.preferredWidth: 140
|
||||
text:"Loading"
|
||||
items:[
|
||||
FluMenuItem{
|
||||
text:"Loading"
|
||||
onClicked: {
|
||||
btn_status_mode.text = text
|
||||
status_view.statusMode = FluStatusView.Loading
|
||||
}
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"Empty"
|
||||
onClicked: {
|
||||
btn_status_mode.text = text
|
||||
status_view.statusMode = FluStatusView.Empty
|
||||
}
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"Error"
|
||||
onClicked: {
|
||||
btn_status_mode.text = text
|
||||
status_view.statusMode = FluStatusView.Error
|
||||
}
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"Success"
|
||||
onClicked: {
|
||||
btn_status_mode.text = text
|
||||
status_view.statusMode = FluStatusView.Success
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 10
|
||||
height: 380
|
||||
paddings: 10
|
||||
FluStatusView{
|
||||
id:status_view
|
||||
anchors.fill: parent
|
||||
onErrorClicked:{
|
||||
showError("点击重新加载")
|
||||
}
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color:FluTheme.primaryColor.dark
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluStatusView{
|
||||
anchors.fill: parent
|
||||
statusMode: FluStatusView.Loading
|
||||
Rectangle{
|
||||
anchors.fill: parent
|
||||
color:FluTheme.primaryColor.dark
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
138
example/qml/page/T_TabView.qml
Normal file
138
example/qml/page/T_TabView.qml
Normal file
@ -0,0 +1,138 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"TabView"
|
||||
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]
|
||||
|
||||
Component{
|
||||
id:com_page
|
||||
Rectangle{
|
||||
anchors.fill: parent
|
||||
color: argument
|
||||
}
|
||||
}
|
||||
|
||||
function newTab(){
|
||||
tab_view.appendTab("qrc:/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark)
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
newTab()
|
||||
newTab()
|
||||
newTab()
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 50
|
||||
paddings: 10
|
||||
RowLayout{
|
||||
spacing: 14
|
||||
FluDropDownButton{
|
||||
id:btn_tab_width_behavior
|
||||
Layout.preferredWidth: 140
|
||||
text:"Equal"
|
||||
items:[
|
||||
FluMenuItem{
|
||||
text:"Equal"
|
||||
onClicked: {
|
||||
btn_tab_width_behavior.text = text
|
||||
tab_view.tabWidthBehavior = FluTabView.Equal
|
||||
}
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"SizeToContent"
|
||||
onClicked: {
|
||||
btn_tab_width_behavior.text = text
|
||||
tab_view.tabWidthBehavior = FluTabView.SizeToContent
|
||||
}
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"Compact"
|
||||
onClicked: {
|
||||
btn_tab_width_behavior.text = text
|
||||
tab_view.tabWidthBehavior = FluTabView.Compact
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
FluDropDownButton{
|
||||
id:btn_close_button_visibility
|
||||
text:"Always"
|
||||
Layout.preferredWidth: 120
|
||||
items:[
|
||||
FluMenuItem{
|
||||
text:"Nerver"
|
||||
onClicked: {
|
||||
btn_close_button_visibility.text = text
|
||||
tab_view.closeButtonVisibility = FluTabView.Nerver
|
||||
}
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"Always"
|
||||
onClicked: {
|
||||
btn_close_button_visibility.text = text
|
||||
tab_view.closeButtonVisibility = FluTabView.Always
|
||||
}
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"OnHover"
|
||||
onClicked: {
|
||||
btn_close_button_visibility.text = text
|
||||
tab_view.closeButtonVisibility = FluTabView.OnHover
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 15
|
||||
height: 400
|
||||
paddings: 10
|
||||
FluTabView{
|
||||
id:tab_view
|
||||
onNewPressed:{
|
||||
newTab()
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
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)
|
||||
}
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
}
|
||||
159
example/qml/page/T_TableView.qml
Normal file
159
example/qml/page/T_TableView.qml
Normal file
@ -0,0 +1,159 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"TableView"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
Component.onCompleted: {
|
||||
const columns = [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
width:100
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
dataIndex: 'age',
|
||||
width:100
|
||||
},
|
||||
{
|
||||
title: '住址',
|
||||
dataIndex: 'address',
|
||||
width:200
|
||||
},
|
||||
{
|
||||
title: '别名',
|
||||
dataIndex: 'nickname',
|
||||
width:100
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
width:100
|
||||
},
|
||||
];
|
||||
table_view.columns = columns
|
||||
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_action
|
||||
Item{
|
||||
Row{
|
||||
anchors.centerIn: parent
|
||||
spacing: 10
|
||||
FluFilledButton{
|
||||
text:"编辑"
|
||||
topPadding:3
|
||||
bottomPadding:3
|
||||
leftPadding:3
|
||||
rightPadding:3
|
||||
onClicked:{
|
||||
console.debug(dataModel.index)
|
||||
showSuccess(JSON.stringify(dataObject))
|
||||
}
|
||||
}
|
||||
FluFilledButton{
|
||||
text:"删除"
|
||||
topPadding:3
|
||||
bottomPadding:3
|
||||
leftPadding:3
|
||||
rightPadding:3
|
||||
onClicked:{
|
||||
showError(JSON.stringify(dataObject))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function loadData(page,count){
|
||||
const dataSource = []
|
||||
for(var i=0;i<count;i++){
|
||||
dataSource.push({
|
||||
name: "孙悟空%1".arg(((page-1)*count+i)),
|
||||
age: 500,
|
||||
address: "钟灵毓秀的花果山,如神仙仙境的水帘洞",
|
||||
nickname: "齐天大圣",
|
||||
action:com_action
|
||||
})
|
||||
}
|
||||
table_view.dataSource = dataSource
|
||||
}
|
||||
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 10
|
||||
code:'FluTableView{
|
||||
id:table_view
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
pageCurrent:1
|
||||
pageCount:10
|
||||
itemCount: 1000
|
||||
onRequestPage:
|
||||
(page,count)=> {
|
||||
loadData(page,count)
|
||||
}
|
||||
Component.onCompleted: {
|
||||
const columns = [
|
||||
{
|
||||
title: "姓名",
|
||||
dataIndex: "name",
|
||||
width:100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "age",
|
||||
width:100
|
||||
},
|
||||
{
|
||||
title: "住址",
|
||||
dataIndex: "address",
|
||||
width:200
|
||||
},
|
||||
{
|
||||
title: "别名",
|
||||
dataIndex: "nickname",
|
||||
width:100
|
||||
}
|
||||
];
|
||||
table_view.columns = columns
|
||||
const dataSource = [
|
||||
{
|
||||
name: "孙悟空”,
|
||||
age: 500,
|
||||
address:"钟灵毓秀的花果山,如神仙仙境的水帘洞",
|
||||
nickname:"齐天大圣"
|
||||
}
|
||||
];
|
||||
table_view.dataSource = columns
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
193
example/qml/page/T_TextBox.qml
Normal file
193
example/qml/page/T_TextBox.qml
Normal file
@ -0,0 +1,193 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"TextBox"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluTextBox{
|
||||
placeholderText:"单行输入框"
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
FluPasswordBox{
|
||||
Layout.topMargin: 20
|
||||
placeholderText: "请输入密码"
|
||||
Layout.preferredWidth: 300
|
||||
disabled:password_box_switch.selected
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
|
||||
Row{
|
||||
spacing: 5
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:password_box_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluPasswordBox{
|
||||
placeholderText:"请输入密码"
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 36+multiine_textbox.height
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
FluMultilineTextBox{
|
||||
id:multiine_textbox
|
||||
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
|
||||
Layout.topMargin: -1
|
||||
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
|
||||
Layout.topMargin: -1
|
||||
code:'FluAutoSuggestBox{
|
||||
placeholderText:"AutoSuggestBox"
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
function generateRandomNames(numNames) {
|
||||
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
const names = [];
|
||||
function generateRandomName() {
|
||||
const nameLength = Math.floor(Math.random() * 5) + 4;
|
||||
let name = '';
|
||||
for (let i = 0; i < nameLength; i++) {
|
||||
const letterIndex = Math.floor(Math.random() * 26);
|
||||
name += alphabet.charAt(letterIndex);
|
||||
}
|
||||
return name;
|
||||
}
|
||||
for (let i = 0; i < numNames; i++) {
|
||||
const name = generateRandomName();
|
||||
names.push({title:name});
|
||||
}
|
||||
return names;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
92
example/qml/page/T_Theme.qml
Normal file
92
example/qml/page/T_Theme.qml
Normal file
@ -0,0 +1,92 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Theme"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
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(){
|
||||
if(FluTheme.dark){
|
||||
FluTheme.darkMode = FluDarkMode.Light
|
||||
}else{
|
||||
FluTheme.darkMode = FluDarkMode.Dark
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"native文本渲染"
|
||||
Layout.topMargin: 20
|
||||
}
|
||||
FluToggleSwitch{
|
||||
Layout.topMargin: 5
|
||||
selected: FluTheme.nativeText
|
||||
clickFunc:function(){
|
||||
FluTheme.nativeText = !FluTheme.nativeText
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluTheme.primaryColor = FluColors.Orange
|
||||
|
||||
FluTheme.dark = true
|
||||
|
||||
FluTheme.nativeText = true'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
77
example/qml/page/T_TimePicker.qml
Normal file
77
example/qml/page/T_TimePicker.qml
Normal file
@ -0,0 +1,77 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"TimePicker"
|
||||
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:"hourFormat=FluTimePicker.H"
|
||||
}
|
||||
|
||||
FluTimePicker{
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluTimePicker{
|
||||
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 80
|
||||
paddings: 10
|
||||
|
||||
ColumnLayout{
|
||||
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
|
||||
FluText{
|
||||
text:"hourFormat=FluTimePicker.H"
|
||||
}
|
||||
|
||||
FluTimePicker{
|
||||
hourFormat:FluTimePicker.HH
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluTimePicker{
|
||||
hourFormat:FluTimePicker.HH
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
40
example/qml/page/T_ToggleSwitch.qml
Normal file
40
example/qml/page/T_ToggleSwitch.qml
Normal file
@ -0,0 +1,40 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"ToggleSwitch"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
Row{
|
||||
spacing: 30
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluToggleSwitch{
|
||||
}
|
||||
FluToggleSwitch{
|
||||
text:"Text"
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluToggleSwitch{
|
||||
text:"Text"
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
107
example/qml/page/T_Tooltip.qml
Normal file
107
example/qml/page/T_Tooltip.qml
Normal file
@ -0,0 +1,107 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Tooltip"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
FluText{
|
||||
Layout.topMargin: 20
|
||||
text:"鼠标悬停不动，弹出Tooltip"
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 68
|
||||
paddings: 10
|
||||
|
||||
Column{
|
||||
spacing: 5
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"FluIconButton的text属性自带Tooltip效果"
|
||||
}
|
||||
FluIconButton{
|
||||
iconSource:FluentIcons.ChromeCloseContrast
|
||||
iconSize: 15
|
||||
text:"删除"
|
||||
onClicked:{
|
||||
showSuccess("点击IconButton")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluIconButton{
|
||||
iconSource:FluentIcons.ChromeCloseContrast
|
||||
iconSize: 15
|
||||
text:"删除"
|
||||
onClicked:{
|
||||
showSuccess("点击IconButton")
|
||||
}
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 68
|
||||
paddings: 10
|
||||
|
||||
Column{
|
||||
spacing: 5
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"给一个Button添加Tooltip效果"
|
||||
}
|
||||
FluButton{
|
||||
id:button_1
|
||||
text:"删除"
|
||||
onClicked:{
|
||||
showSuccess("点击一个Button")
|
||||
}
|
||||
FluTooltip{
|
||||
visible: button_1.hovered
|
||||
text:button_1.text
|
||||
delay: 1000
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluButton{
|
||||
id:button_1
|
||||
text:"删除"
|
||||
FluTooltip{
|
||||
visible: button_1.hovered
|
||||
text:button_1.text
|
||||
delay: 1000
|
||||
}
|
||||
onClicked:{
|
||||
showSuccess("点击一个Button")
|
||||
}
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
162
example/qml/page/T_TreeView.qml
Normal file
162
example/qml/page/T_TreeView.qml
Normal file
@ -0,0 +1,162 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "../component"
|
||||
|
||||
FluScrollablePage {
|
||||
|
||||
title:"TreeView"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
spacing: 0
|
||||
|
||||
function randomName() {
|
||||
var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
|
||||
return names[Math.floor(Math.random() * names.length)]
|
||||
}
|
||||
|
||||
function randomCompany() {
|
||||
var companies = ["阿里巴巴", "腾讯", "百度", "京东", "华为", "小米", "字节跳动", "美团", "滴滴"]
|
||||
return companies[Math.floor(Math.random() * companies.length)]
|
||||
}
|
||||
|
||||
function randomDepartment() {
|
||||
var departments = ["技术部", "销售部", "市场部", "人事部", "财务部", "客服部", "产品部", "设计部", "运营部"]
|
||||
return departments[Math.floor(Math.random() * departments.length)]
|
||||
}
|
||||
|
||||
function createEmployee() {
|
||||
var name = randomName()
|
||||
return tree_view.createItem(name, false)
|
||||
}
|
||||
|
||||
function createSubtree(numEmployees) {
|
||||
var employees = []
|
||||
for (var i = 0; i < numEmployees; i++) {
|
||||
employees.push(createEmployee())
|
||||
}
|
||||
return tree_view.createItem(randomDepartment(), true, employees)
|
||||
}
|
||||
|
||||
function createOrg(numLevels, numSubtrees, numEmployees) {
|
||||
if (numLevels === 0) {
|
||||
return []
|
||||
}
|
||||
var subtrees = []
|
||||
for (var i = 0; i < numSubtrees; i++) {
|
||||
subtrees.push(createSubtree(numEmployees))
|
||||
}
|
||||
return [tree_view.createItem(randomCompany(), true, subtrees)].concat(createOrg(numLevels - 1, numSubtrees, numEmployees))
|
||||
}
|
||||
|
||||
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(","))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
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)
|
||||
}
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
94
example/qml/page/T_Typography.qml
Normal file
94
example/qml/page/T_Typography.qml
Normal file
@ -0,0 +1,94 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
|
||||
FluContentPage {
|
||||
|
||||
title: "Typography"
|
||||
property int textSize: FluTheme.textSize
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
|
||||
Component.onCompleted: {
|
||||
slider.seek(0)
|
||||
}
|
||||
|
||||
FluArea{
|
||||
anchors{
|
||||
top:parent.top
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
bottom: parent.bottom
|
||||
topMargin: 20
|
||||
}
|
||||
paddings: 10
|
||||
ColumnLayout{
|
||||
spacing: 0
|
||||
FluText{
|
||||
text:"Display"
|
||||
padding: 0
|
||||
pixelSize: textSize
|
||||
fontStyle: FluText.Display
|
||||
}
|
||||
FluText{
|
||||
text:"Title Large"
|
||||
padding: 0
|
||||
pixelSize: textSize
|
||||
fontStyle: FluText.TitleLarge
|
||||
}
|
||||
FluText{
|
||||
text:"Title"
|
||||
padding: 0
|
||||
pixelSize: textSize
|
||||
fontStyle: FluText.Title
|
||||
}
|
||||
FluText{
|
||||
text:"Subtitle"
|
||||
padding: 0
|
||||
pixelSize: textSize
|
||||
fontStyle: FluText.SubTitle
|
||||
}
|
||||
FluText{
|
||||
text:"Body Strong"
|
||||
padding: 0
|
||||
pixelSize: textSize
|
||||
fontStyle: FluText.BodyStrong
|
||||
}
|
||||
FluText{
|
||||
text:"Body"
|
||||
padding: 0
|
||||
pixelSize: textSize
|
||||
fontStyle: FluText.Body
|
||||
}
|
||||
FluText{
|
||||
text:"Caption"
|
||||
padding: 0
|
||||
pixelSize: textSize
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
154
example/qml/window/AboutWindow.qml
Normal file
154
example/qml/window/AboutWindow.qml
Normal file
@ -0,0 +1,154 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import FluentUI
|
||||
|
||||
FluWindow {
|
||||
|
||||
id:window
|
||||
|
||||
width: 600
|
||||
height: 600
|
||||
minimumWidth: 600
|
||||
minimumHeight: 600
|
||||
maximumWidth: 600
|
||||
maximumHeight: 600
|
||||
launchMode: FluWindow.SingleTask
|
||||
|
||||
title:"关于"
|
||||
|
||||
FluAppBar{
|
||||
id:appbar
|
||||
title:"关于"
|
||||
width:parent.width
|
||||
}
|
||||
|
||||
ColumnLayout{
|
||||
anchors{
|
||||
top: appbar.bottom
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
Layout.topMargin: 20
|
||||
Layout.leftMargin: 15
|
||||
spacing: 14
|
||||
FluText{
|
||||
text:"FluentUI"
|
||||
fontStyle: FluText.Title
|
||||
}
|
||||
FluText{
|
||||
text:"v%1".arg(appInfo.version)
|
||||
fontStyle: FluText.Body
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 14
|
||||
Layout.topMargin: 20
|
||||
Layout.leftMargin: 15
|
||||
FluText{
|
||||
text:"作者："
|
||||
}
|
||||
FluText{
|
||||
text:"朱子楚"
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 14
|
||||
Layout.leftMargin: 15
|
||||
FluText{
|
||||
text:"GitHub："
|
||||
}
|
||||
FluTextButton{
|
||||
id:text_hublink
|
||||
topPadding:0
|
||||
bottomPadding:0
|
||||
text:"https://github.com/zhuzichu520/FluentUI"
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
onClicked: {
|
||||
Qt.openUrlExternally(text_hublink.text)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 14
|
||||
Layout.leftMargin: 15
|
||||
FluText{
|
||||
text:"B站："
|
||||
}
|
||||
FluTextButton{
|
||||
topPadding:0
|
||||
bottomPadding:0
|
||||
text:"https://www.bilibili.com/video/BV1mg4y1M71w/"
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
onClicked: {
|
||||
Qt.openUrlExternally(text)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 14
|
||||
Layout.leftMargin: 15
|
||||
FluText{
|
||||
id:text_info
|
||||
text:"如果该项目对你有作用，就请点击上方链接给一个免费的star，或者一键三连，谢谢！"
|
||||
ColorAnimation {
|
||||
id: animation
|
||||
target: text_info
|
||||
property: "color"
|
||||
from: "red"
|
||||
to: "blue"
|
||||
duration: 1000
|
||||
running: true
|
||||
loops: Animation.Infinite
|
||||
easing.type: Easing.InOutQuad
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 14
|
||||
Layout.leftMargin: 15
|
||||
FluText{
|
||||
text:"捐赠："
|
||||
}
|
||||
}
|
||||
|
||||
Item{
|
||||
Layout.preferredWidth: parent.width
|
||||
Layout.preferredHeight: 252
|
||||
Row{
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
spacing: 60
|
||||
Image{
|
||||
width: 164.55
|
||||
height: 224.25
|
||||
source: "qrc:/res/image/qrcode_wx.jpg"
|
||||
}
|
||||
Image{
|
||||
width: 162
|
||||
height: 252
|
||||
source: "qrc:/res/image/qrcode_zfb.jpg"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 14
|
||||
Layout.leftMargin: 15
|
||||
FluText{
|
||||
id:text_desc
|
||||
text:"个人开发，维护不易，你们的捐赠就是我继续更新的动力！\n有什么问题提Issues，只要时间充足我就会解决的！！"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
262
example/qml/window/ChatWindow.qml
Normal file
262
example/qml/window/ChatWindow.qml
Normal file
@ -0,0 +1,262 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import Controller
|
||||
import QtQuick.Dialogs
|
||||
|
||||
FluWindow {
|
||||
|
||||
width: 680
|
||||
height: 600
|
||||
minimumWidth: 500
|
||||
minimumHeight: 600
|
||||
|
||||
title:"ChatGPT"
|
||||
|
||||
onInitArgument:
|
||||
(argument)=>{
|
||||
scrollview.focus = true
|
||||
}
|
||||
|
||||
ChatController{
|
||||
id:controller
|
||||
|
||||
onResponseDataChanged: {
|
||||
appendMessage(false,responseData)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ListModel{
|
||||
id:model_message
|
||||
ListElement{
|
||||
isMy:false
|
||||
text:"欢迎使用ChatGPT"
|
||||
}
|
||||
ListElement{
|
||||
isMy:true
|
||||
text:"好的，3Q"
|
||||
}
|
||||
}
|
||||
|
||||
FluAppBar{
|
||||
id:appbar
|
||||
title:"ChatGPT"
|
||||
width:parent.width
|
||||
}
|
||||
|
||||
Component{
|
||||
id:com_text
|
||||
TextEdit {
|
||||
id:item_text
|
||||
text: message
|
||||
wrapMode: Text.WrapAnywhere
|
||||
readOnly: true
|
||||
selectByMouse: true
|
||||
selectByKeyboard: true
|
||||
selectedTextColor: Qt.rgba(51,153,255,1)
|
||||
color:FluColors.Black
|
||||
selectionColor: {
|
||||
if(FluTheme.dark){
|
||||
return FluTheme.primaryColor.lighter
|
||||
}else{
|
||||
return FluTheme.primaryColor.dark
|
||||
}
|
||||
}
|
||||
width: Math.min(list_message.width-200,600,implicitWidth)
|
||||
TapHandler{
|
||||
acceptedButtons: Qt.RightButton
|
||||
onTapped: {
|
||||
menu_item.showMenu(item_text.selectedText)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
id:layout_content
|
||||
anchors{
|
||||
top: appbar.bottom
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
bottom: layout_bottom.top
|
||||
margins: 10
|
||||
}
|
||||
color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(245/255,245/255,245/255,1)
|
||||
ListView{
|
||||
id:list_message
|
||||
anchors.fill: parent
|
||||
model:model_message
|
||||
clip: true
|
||||
ScrollBar.vertical: FluScrollBar {}
|
||||
preferredHighlightBegin: 0
|
||||
preferredHighlightEnd: 0
|
||||
highlightMoveDuration: 0
|
||||
header:Item{
|
||||
width: list_message.width
|
||||
height:20
|
||||
}
|
||||
footer:Item{
|
||||
width: list_message.width
|
||||
height:20
|
||||
}
|
||||
delegate: Item{
|
||||
width: ListView.view.width
|
||||
height: childrenRect.height
|
||||
|
||||
FluRectangle{
|
||||
id:item_avatar
|
||||
width: 30
|
||||
height: 30
|
||||
radius:[15,15,15,15]
|
||||
anchors{
|
||||
right: isMy ? parent.right : undefined
|
||||
rightMargin: isMy ? 20 : undefined
|
||||
left: isMy ? undefined : parent.left
|
||||
leftMargin: isMy ? undefined : 20
|
||||
top:parent.top
|
||||
}
|
||||
Image {
|
||||
asynchronous: true
|
||||
anchors.fill: parent
|
||||
sourceSize: Qt.size(100,100)
|
||||
source: isMy ? "qrc:/res/svg/avatar_2.svg" : "qrc:/res/image/logo_openai.png"
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle{
|
||||
id:item_layout_content
|
||||
color: isMy ? "#FF95EC69" : "#FFFFFF"
|
||||
width: item_msg_loader.width+10
|
||||
height: item_msg_loader.height+10
|
||||
radius: 3
|
||||
anchors{
|
||||
top: item_avatar.top
|
||||
right: isMy ? item_avatar.left : undefined
|
||||
rightMargin: isMy ? 10 : undefined
|
||||
left: isMy ? undefined : item_avatar.right
|
||||
leftMargin: isMy ? undefined : 10
|
||||
|
||||
}
|
||||
|
||||
Loader{
|
||||
id:item_msg_loader
|
||||
property var message: model.text
|
||||
anchors.centerIn: parent
|
||||
sourceComponent: com_text
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Item{
|
||||
id:item_layout_bottom
|
||||
width: parent.width
|
||||
anchors.top: item_layout_content.bottom
|
||||
height: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
id:layout_bottom
|
||||
height: 90
|
||||
anchors{
|
||||
bottom: parent.bottom
|
||||
bottomMargin: 10
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
leftMargin: 10
|
||||
rightMargin: 10
|
||||
}
|
||||
|
||||
|
||||
ScrollView{
|
||||
id:scrollview
|
||||
anchors{
|
||||
bottom: parent.bottom
|
||||
left: parent.left
|
||||
right: button_send.left
|
||||
bottomMargin: 10
|
||||
leftMargin: 10
|
||||
rightMargin: 10
|
||||
}
|
||||
height: Math.min(textbox.implicitHeight,64)
|
||||
FluMultilineTextBox{
|
||||
id:textbox
|
||||
focus:true
|
||||
placeholderText: "请输入消息"
|
||||
}
|
||||
}
|
||||
|
||||
FluFilledButton{
|
||||
id:button_send
|
||||
text:controller.isLoading ? timer_loading.loadingText :"发送"
|
||||
anchors{
|
||||
bottom: parent.bottom
|
||||
right: parent.right
|
||||
bottomMargin: 10
|
||||
rightMargin: 10
|
||||
}
|
||||
width: 60
|
||||
disabled: controller.isLoading
|
||||
onClicked:{
|
||||
var text = textbox.text
|
||||
appendMessage(true,text)
|
||||
controller.sendMessage(text)
|
||||
textbox.clear()
|
||||
}
|
||||
|
||||
Timer{
|
||||
id:timer_loading
|
||||
property int count : 0
|
||||
property string loadingText : ""
|
||||
interval: 500
|
||||
running: controller.isLoading
|
||||
repeat: true
|
||||
onTriggered: {
|
||||
switch(count%3){
|
||||
case 0:
|
||||
loadingText = "."
|
||||
break
|
||||
case 1:
|
||||
loadingText = ".."
|
||||
break
|
||||
case 2:
|
||||
loadingText = "..."
|
||||
break
|
||||
default:
|
||||
loadingText = ""
|
||||
break
|
||||
}
|
||||
count++
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
FluMenu{
|
||||
id:menu_item
|
||||
focus: false
|
||||
property string selectedText: ""
|
||||
FluMenuItem{
|
||||
text:"复制"
|
||||
onClicked: {
|
||||
controller.clipText(menu_item.selectedText)
|
||||
showSuccess("复制成功")
|
||||
}
|
||||
}
|
||||
function showMenu(text){
|
||||
menu_item.selectedText = text
|
||||
menu_item.popup()
|
||||
}
|
||||
}
|
||||
|
||||
function appendMessage(isMy,text){
|
||||
model_message.append({isMy:isMy,text:text})
|
||||
list_message.positionViewAtEnd()
|
||||
}
|
||||
|
||||
}
|
||||
71
example/qml/window/LoginWindow.qml
Normal file
71
example/qml/window/LoginWindow.qml
Normal file
@ -0,0 +1,71 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
|
||||
FluWindow {
|
||||
|
||||
id:window
|
||||
width: 400
|
||||
height: 400
|
||||
minimumWidth: 400
|
||||
minimumHeight: 400
|
||||
maximumWidth: 400
|
||||
maximumHeight: 400
|
||||
title:"登录"
|
||||
|
||||
onInitArgument:
|
||||
(argument)=>{
|
||||
textbox_uesrname.updateText(argument.username)
|
||||
textbox_password.focus = true
|
||||
}
|
||||
|
||||
FluAppBar{
|
||||
id:appbar
|
||||
title:"登录"
|
||||
width:parent.width
|
||||
}
|
||||
|
||||
ColumnLayout{
|
||||
anchors{
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
FluAutoSuggestBox{
|
||||
id:textbox_uesrname
|
||||
items:[{title:"Admin"},{title:"User"}]
|
||||
placeholderText: "请输入账号"
|
||||
Layout.preferredWidth: 260
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
|
||||
FluTextBox{
|
||||
id:textbox_password
|
||||
Layout.topMargin: 20
|
||||
Layout.preferredWidth: 260
|
||||
placeholderText: "请输入密码"
|
||||
echoMode:TextInput.Password
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
|
||||
FluFilledButton{
|
||||
text:"登录"
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
Layout.topMargin: 20
|
||||
onClicked:{
|
||||
if(textbox_password.text === ""){
|
||||
showError("请随便输入一个密码")
|
||||
return
|
||||
}
|
||||
onResult({password:textbox_password.text})
|
||||
window.close()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
110
example/qml/window/MainWindow.qml
Normal file
110
example/qml/window/MainWindow.qml
Normal file
@ -0,0 +1,110 @@
|
||||
import QtQuick
|
||||
import QtQuick.Window
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import Qt.labs.platform
|
||||
import FluentUI
|
||||
import "qrc:///qml/global/"
|
||||
|
||||
FluWindow {
|
||||
id:window
|
||||
width: 1000
|
||||
height: 640
|
||||
title: "FluentUI"
|
||||
closeDestory:false
|
||||
minimumWidth: 520
|
||||
minimumHeight: 460
|
||||
|
||||
closeFunc:function(event){
|
||||
close_app.open()
|
||||
event.accepted = false
|
||||
}
|
||||
|
||||
Connections{
|
||||
target: appInfo
|
||||
function onActiveWindow(){
|
||||
window.show()
|
||||
window.raise()
|
||||
window.requestActivate()
|
||||
}
|
||||
}
|
||||
|
||||
FluAppBar{
|
||||
id:appbar
|
||||
z:9
|
||||
showDark: true
|
||||
width:parent.width
|
||||
darkText: lang.dark_mode
|
||||
}
|
||||
|
||||
SystemTrayIcon {
|
||||
id:system_tray
|
||||
visible: true
|
||||
icon.source: "qrc:/res/image/favicon.ico"
|
||||
tooltip: "FluentUI"
|
||||
menu: Menu {
|
||||
MenuItem {
|
||||
text: "退出"
|
||||
onTriggered: {
|
||||
window.destoryWindow()
|
||||
FluApp.closeApp()
|
||||
}
|
||||
}
|
||||
}
|
||||
onActivated:
|
||||
(reason)=>{
|
||||
if(reason === SystemTrayIcon.Trigger){
|
||||
window.show()
|
||||
window.raise()
|
||||
window.requestActivate()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluContentDialog{
|
||||
id:close_app
|
||||
title:"退出"
|
||||
message:"确定要退出程序吗？"
|
||||
negativeText:"最小化"
|
||||
buttonFlags: FluContentDialog.NeutralButton | FluContentDialog.NegativeButton | FluContentDialog.PositiveButton
|
||||
onNegativeClicked:{
|
||||
system_tray.showMessage("友情提示","FluentUI已隐藏至托盘,点击托盘可再次激活窗口");
|
||||
window.hide()
|
||||
}
|
||||
positiveText:"退出"
|
||||
neutralText:"取消"
|
||||
onPositiveClicked:{
|
||||
window.destoryWindow()
|
||||
FluApp.closeApp()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
FluNavigationView{
|
||||
id:nav_view
|
||||
anchors.fill: parent
|
||||
items: ItemsOriginal
|
||||
footerItems:ItemsFooter
|
||||
z:11
|
||||
displayMode:MainEvent.displayMode
|
||||
logo: "qrc:/res/image/favicon.ico"
|
||||
title:"FluentUI"
|
||||
autoSuggestBox:FluAutoSuggestBox{
|
||||
width: 280
|
||||
anchors.centerIn: parent
|
||||
iconSource: FluentIcons.Search
|
||||
items: ItemsOriginal.getSearchData()
|
||||
placeholderText: lang.search
|
||||
onItemClicked:
|
||||
(data)=>{
|
||||
ItemsOriginal.startPageByItem(data)
|
||||
}
|
||||
}
|
||||
Component.onCompleted: {
|
||||
ItemsOriginal.navigationView = nav_view
|
||||
ItemsFooter.navigationView = nav_view
|
||||
nav_view.setCurrentIndex(0)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
37
example/qml/window/MediaWindow.qml
Normal file
37
example/qml/window/MediaWindow.qml
Normal file
@ -0,0 +1,37 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import FluentUI
|
||||
|
||||
FluWindow {
|
||||
|
||||
width: 640
|
||||
height: 480
|
||||
minimumWidth: 640
|
||||
minimumHeight: 480
|
||||
|
||||
title:"视频播放器"
|
||||
|
||||
onInitArgument:
|
||||
(argument)=>{
|
||||
player.source = argument.source
|
||||
}
|
||||
|
||||
FluAppBar{
|
||||
id:appbar
|
||||
title:"视频播放器"
|
||||
width:parent.width
|
||||
}
|
||||
|
||||
|
||||
FluMediaPlayer{
|
||||
id:player
|
||||
anchors{
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
top: appbar.bottom
|
||||
bottom: parent.bottom
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
46
example/qml/window/SingleInstanceWindow.qml
Normal file
46
example/qml/window/SingleInstanceWindow.qml
Normal file
@ -0,0 +1,46 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import FluentUI
|
||||
|
||||
FluWindow {
|
||||
|
||||
id:window
|
||||
|
||||
width: 500
|
||||
height: 600
|
||||
minimumWidth: 500
|
||||
minimumHeight: 600
|
||||
maximumWidth: 500
|
||||
maximumHeight: 600
|
||||
launchMode: FluWindow.SingleInstance
|
||||
|
||||
title:"SingleInstance"
|
||||
|
||||
FluAppBar{
|
||||
id:appbar
|
||||
title:"SingleInstance"
|
||||
width:parent.width
|
||||
}
|
||||
|
||||
FluTextBox{
|
||||
anchors{
|
||||
top:parent.top
|
||||
topMargin:60
|
||||
horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
}
|
||||
|
||||
FluText{
|
||||
wrapMode: Text.WrapAnywhere
|
||||
anchors{
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
leftMargin: 20
|
||||
rightMargin: 20
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
text:"我是一个SingleInstance模式的窗口，如果我存在，我会销毁之前的窗口，并创建一个新窗口"
|
||||
}
|
||||
|
||||
}
|
||||
31
example/qml/window/SingleTaskWindow.qml
Normal file
31
example/qml/window/SingleTaskWindow.qml
Normal file
@ -0,0 +1,31 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import FluentUI
|
||||
|
||||
FluWindow {
|
||||
|
||||
id:window
|
||||
|
||||
width: 500
|
||||
height: 600
|
||||
minimumWidth: 500
|
||||
minimumHeight: 600
|
||||
maximumWidth: 500
|
||||
maximumHeight: 600
|
||||
launchMode: FluWindow.SingleTask
|
||||
|
||||
title:"SingleTask"
|
||||
|
||||
FluAppBar{
|
||||
id:appbar
|
||||
title:"SingleTask"
|
||||
width:parent.width
|
||||
}
|
||||
|
||||
FluText{
|
||||
anchors.centerIn: parent
|
||||
text:"我是一个SingleTask模式的窗口，如果我存在，我就激活窗口"
|
||||
}
|
||||
|
||||
}
|
||||
31
example/qml/window/StandardWindow.qml
Normal file
31
example/qml/window/StandardWindow.qml
Normal file
@ -0,0 +1,31 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import FluentUI
|
||||
|
||||
FluWindow {
|
||||
|
||||
id:window
|
||||
|
||||
width: 500
|
||||
height: 600
|
||||
minimumWidth: 500
|
||||
minimumHeight: 600
|
||||
maximumWidth: 500
|
||||
maximumHeight: 600
|
||||
launchMode: FluWindow.Standard
|
||||
|
||||
title:"Standard"
|
||||
|
||||
FluAppBar{
|
||||
id:appbar
|
||||
title:"Standard"
|
||||
width:parent.width
|
||||
}
|
||||
|
||||
FluText{
|
||||
anchors.centerIn: parent
|
||||
text:"我是一个Standard模式的窗口，每次我都会创建一个新的窗口"
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user