mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2025-07-02 16:15:28 +08:00
update
This commit is contained in:
@ -21,51 +21,51 @@ FluWindow {
|
||||
showFps: true
|
||||
}
|
||||
|
||||
Item{
|
||||
id:data
|
||||
|
||||
ListModel{
|
||||
id:nav_items
|
||||
ListElement{
|
||||
text:"Buttons"
|
||||
page:"qrc:/T_Buttons.qml"
|
||||
}
|
||||
ListElement{
|
||||
text:"TextBox"
|
||||
page:"qrc:/T_TextBox.qml"
|
||||
}
|
||||
ListElement{
|
||||
text:"ToggleSwitch"
|
||||
page:"qrc:/T_ToggleSwitch.qml"
|
||||
}
|
||||
ListElement{
|
||||
text:"Slider"
|
||||
page:"qrc:/T_Slider.qml"
|
||||
}
|
||||
ListElement{
|
||||
text:"InfoBar"
|
||||
page:"qrc:/T_InfoBar.qml"
|
||||
}
|
||||
ListElement{
|
||||
text:"Progress"
|
||||
page:"qrc:/T_Progress.qml"
|
||||
}
|
||||
ListElement{
|
||||
text:"Rectangle"
|
||||
page:"qrc:/T_Rectangle.qml"
|
||||
}
|
||||
ListElement{
|
||||
text:"Theme"
|
||||
page:"qrc:/T_Theme.qml"
|
||||
}
|
||||
ListElement{
|
||||
text:"Awesome"
|
||||
page:"qrc:/T_Awesome.qml"
|
||||
}
|
||||
ListElement{
|
||||
text:"Typography"
|
||||
page:"qrc:/T_Typography.qml"
|
||||
}
|
||||
ListModel{
|
||||
id:nav_items
|
||||
ListElement{
|
||||
text:"Buttons"
|
||||
page:"qrc:/T_Buttons.qml"
|
||||
}
|
||||
ListElement{
|
||||
text:"TextBox"
|
||||
page:"qrc:/T_TextBox.qml"
|
||||
}
|
||||
ListElement{
|
||||
text:"ToggleSwitch"
|
||||
page:"qrc:/T_ToggleSwitch.qml"
|
||||
}
|
||||
ListElement{
|
||||
text:"Slider"
|
||||
page:"qrc:/T_Slider.qml"
|
||||
}
|
||||
ListElement{
|
||||
text:"InfoBar"
|
||||
page:"qrc:/T_InfoBar.qml"
|
||||
}
|
||||
ListElement{
|
||||
text:"Dialog"
|
||||
page:"qrc:/T_Dialog.qml"
|
||||
}
|
||||
ListElement{
|
||||
text:"Progress"
|
||||
page:"qrc:/T_Progress.qml"
|
||||
}
|
||||
ListElement{
|
||||
text:"Rectangle"
|
||||
page:"qrc:/T_Rectangle.qml"
|
||||
}
|
||||
ListElement{
|
||||
text:"Theme"
|
||||
page:"qrc:/T_Theme.qml"
|
||||
}
|
||||
ListElement{
|
||||
text:"Awesome"
|
||||
page:"qrc:/T_Awesome.qml"
|
||||
}
|
||||
ListElement{
|
||||
text:"Typography"
|
||||
page:"qrc:/T_Typography.qml"
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,25 +123,6 @@ FluWindow {
|
||||
|
||||
|
||||
Rectangle{
|
||||
color: {
|
||||
if(FluTheme.isDark){
|
||||
if(item_mouse.containsMouse){
|
||||
return "#292929"
|
||||
}
|
||||
if(nav_list.currentIndex === index){
|
||||
return "#2D2D2D"
|
||||
}
|
||||
return "#00000000"
|
||||
}else{
|
||||
if(item_mouse.containsMouse){
|
||||
return "#EDEDED"
|
||||
}
|
||||
if(nav_list.currentIndex === index){
|
||||
return "#EAEAEA"
|
||||
}
|
||||
return "#00000000"
|
||||
}
|
||||
}
|
||||
radius: 4
|
||||
anchors{
|
||||
top: parent.top
|
||||
@ -153,8 +134,6 @@ FluWindow {
|
||||
leftMargin: 6
|
||||
rightMargin: 6
|
||||
}
|
||||
|
||||
|
||||
MouseArea{
|
||||
id:item_mouse
|
||||
hoverEnabled: true
|
||||
@ -163,6 +142,25 @@ FluWindow {
|
||||
nav_list.currentIndex = index
|
||||
}
|
||||
}
|
||||
color: {
|
||||
if(FluTheme.isDark){
|
||||
if(nav_list.currentIndex === index){
|
||||
return "#2D2D2D"
|
||||
}
|
||||
if(item_mouse.containsMouse){
|
||||
return "#292929"
|
||||
}
|
||||
return "#202020"
|
||||
}else{
|
||||
if(nav_list.currentIndex === index){
|
||||
return "#EAEAEA"
|
||||
}
|
||||
if(item_mouse.containsMouse){
|
||||
return "#EDEDED"
|
||||
}
|
||||
return "#F3f3f3"
|
||||
}
|
||||
}
|
||||
|
||||
FluText{
|
||||
text:model.text
|
||||
@ -171,8 +169,6 @@ FluWindow {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -5,13 +5,11 @@ import QtQuick.Window 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
FluText{
|
||||
id:title
|
||||
text:"Awesome"
|
||||
fontStyle: FluText.TitleLarge
|
||||
}
|
||||
|
||||
FluTextBox{
|
||||
id:text_box
|
||||
placeholderText: "请输入关键字"
|
||||
@ -20,7 +18,6 @@ Item {
|
||||
top:title.bottom
|
||||
}
|
||||
}
|
||||
|
||||
FluFilledButton{
|
||||
text:"搜索"
|
||||
anchors{
|
||||
@ -32,7 +29,6 @@ Item {
|
||||
grid_view.model = FluApp.awesomelist(text_box.text)
|
||||
}
|
||||
}
|
||||
|
||||
GridView{
|
||||
id:grid_view
|
||||
cellWidth: 120
|
||||
@ -48,10 +44,8 @@ Item {
|
||||
bottom: parent.bottom
|
||||
}
|
||||
delegate: Item {
|
||||
|
||||
width: 120
|
||||
height: 60
|
||||
|
||||
FluIconButton{
|
||||
id:item_icon
|
||||
icon:modelData.icon
|
||||
@ -62,7 +56,6 @@ Item {
|
||||
showSuccess("您复制了 "+text)
|
||||
}
|
||||
}
|
||||
|
||||
FluText {
|
||||
id:item_name
|
||||
font.pixelSize: 10;
|
||||
@ -70,10 +63,6 @@ Item {
|
||||
anchors.top: item_icon.bottom
|
||||
text: modelData.name
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
@ -1,141 +1,132 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuick.Window 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtGraphicalEffects 1.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
width: parent.width
|
||||
|
||||
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
|
||||
FluText{
|
||||
id:title
|
||||
text:"Buttons"
|
||||
fontStyle: FluText.TitleLarge
|
||||
}
|
||||
ScrollView{
|
||||
clip: true
|
||||
width: parent.width
|
||||
|
||||
FluText{
|
||||
text:"Buttons"
|
||||
fontStyle: FluText.TitleLarge
|
||||
contentWidth: parent.width
|
||||
anchors{
|
||||
top: title.bottom
|
||||
bottom: parent.bottom
|
||||
}
|
||||
|
||||
|
||||
RowLayout{
|
||||
Layout.topMargin: 20
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
width: parent.width
|
||||
FluButton{
|
||||
disabled:button_switch.checked
|
||||
onClicked: {
|
||||
showInfo("点击StandardButton")
|
||||
RowLayout{
|
||||
Layout.topMargin: 20
|
||||
width: parent.width
|
||||
FluButton{
|
||||
disabled:button_switch.checked
|
||||
onClicked: {
|
||||
showInfo("点击StandardButton")
|
||||
}
|
||||
}
|
||||
Item{
|
||||
height: 1
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
}
|
||||
FluText{
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
Item{
|
||||
height: 1
|
||||
Layout.fillWidth: true
|
||||
FluDivider{
|
||||
Layout.fillWidth: true ; height:1;
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
}
|
||||
FluText{
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
|
||||
FluDivider{
|
||||
Layout.fillWidth: true ; height:1;
|
||||
}
|
||||
|
||||
|
||||
RowLayout{
|
||||
Layout.topMargin: 20
|
||||
width: parent.width
|
||||
FluFilledButton{
|
||||
disabled:filled_button_switch.checked
|
||||
onClicked:{
|
||||
showWarning("点击FilledButton")
|
||||
RowLayout{
|
||||
Layout.topMargin: 20
|
||||
width: parent.width
|
||||
FluFilledButton{
|
||||
disabled:filled_button_switch.checked
|
||||
onClicked:{
|
||||
showWarning("点击FilledButton")
|
||||
}
|
||||
}
|
||||
Item{
|
||||
height: 1
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:filled_button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
}
|
||||
FluText{
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
Item{
|
||||
height: 1
|
||||
Layout.fillWidth: true
|
||||
FluDivider{
|
||||
Layout.fillWidth: true ; height:1
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:filled_button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
}
|
||||
FluText{
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
FluDivider{
|
||||
Layout.fillWidth: true ; height:1
|
||||
}
|
||||
|
||||
|
||||
RowLayout{
|
||||
Layout.topMargin: 20
|
||||
width: parent.width
|
||||
FluIconButton{
|
||||
icon:FluentIcons.FA_close
|
||||
disabled:icon_button_switch.checked
|
||||
onClicked:{
|
||||
showSuccess("点击IconButton")
|
||||
RowLayout{
|
||||
Layout.topMargin: 20
|
||||
width: parent.width
|
||||
FluIconButton{
|
||||
icon:FluentIcons.FA_close
|
||||
disabled:icon_button_switch.checked
|
||||
onClicked:{
|
||||
showSuccess("点击IconButton")
|
||||
}
|
||||
}
|
||||
Item{
|
||||
height: 1
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:icon_button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
}
|
||||
FluText{
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
Item{
|
||||
height: 1
|
||||
Layout.fillWidth: true
|
||||
FluDivider{
|
||||
Layout.fillWidth: true ; height:1
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:icon_button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
}
|
||||
FluText{
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
FluDivider{
|
||||
Layout.fillWidth: true ; height:1
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
Layout.topMargin: 20
|
||||
width: parent.width
|
||||
ColumnLayout{
|
||||
spacing: 8
|
||||
|
||||
Repeater{
|
||||
id:repeater
|
||||
property int selecIndex : 0
|
||||
model: 3
|
||||
delegate: FluRadioButton{
|
||||
checked : repeater.selecIndex===index
|
||||
disabled:radio_button_switch.checked
|
||||
text:"RodioButton_"+index
|
||||
onClicked:{
|
||||
repeater.selecIndex = index
|
||||
RowLayout{
|
||||
Layout.topMargin: 20
|
||||
width: parent.width
|
||||
ColumnLayout{
|
||||
spacing: 8
|
||||
Repeater{
|
||||
id:repeater
|
||||
property int selecIndex : 0
|
||||
model: 3
|
||||
delegate: FluRadioButton{
|
||||
checked : repeater.selecIndex===index
|
||||
disabled:radio_button_switch.checked
|
||||
text:"RodioButton_"+index
|
||||
onClicked:{
|
||||
repeater.selecIndex = index
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Item{
|
||||
height: 1
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:radio_button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
}
|
||||
FluText{
|
||||
text:"Disabled"
|
||||
Item{
|
||||
height: 1
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:radio_button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
}
|
||||
FluText{
|
||||
text:"Disabled"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
33
example/T_Dialog.qml
Normal file
33
example/T_Dialog.qml
Normal file
@ -0,0 +1,33 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuick.Window 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtGraphicalEffects 1.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
FluText{
|
||||
id:title
|
||||
text:"Dialog"
|
||||
fontStyle: FluText.TitleLarge
|
||||
}
|
||||
ScrollView{
|
||||
clip: true
|
||||
width: parent.width
|
||||
contentWidth: parent.width
|
||||
anchors{
|
||||
top: title.bottom
|
||||
bottom: parent.bottom
|
||||
}
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
FluButton{
|
||||
Layout.topMargin: 20
|
||||
text:"Show Dialog"
|
||||
onClicked: {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -1,54 +1,55 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuick.Window 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtGraphicalEffects 1.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
|
||||
|
||||
FluText{
|
||||
text:"InfoBar"
|
||||
fontStyle: FluText.TitleLarge
|
||||
}
|
||||
|
||||
FluButton{
|
||||
text:"Info"
|
||||
Layout.topMargin: 20
|
||||
onClicked: {
|
||||
showInfo("这是一个Info样式的InfoBar")
|
||||
}
|
||||
}
|
||||
|
||||
FluButton{
|
||||
text:"Warning"
|
||||
Layout.topMargin: 20
|
||||
onClicked: {
|
||||
showWarning("这是一个Warning样式的InfoBar")
|
||||
}
|
||||
}
|
||||
|
||||
FluButton{
|
||||
text:"Error"
|
||||
Layout.topMargin: 20
|
||||
onClicked: {
|
||||
showError("这是一个Error样式的InfoBar")
|
||||
}
|
||||
}
|
||||
|
||||
FluButton{
|
||||
text:"Success"
|
||||
Layout.topMargin: 20
|
||||
onClicked: {
|
||||
showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
FluText{
|
||||
id:title
|
||||
text:"InfoBar"
|
||||
fontStyle: FluText.TitleLarge
|
||||
}
|
||||
ScrollView{
|
||||
clip: true
|
||||
width: parent.width
|
||||
contentWidth: parent.width
|
||||
anchors{
|
||||
top: title.bottom
|
||||
bottom: parent.bottom
|
||||
}
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
|
||||
FluButton{
|
||||
text:"Info"
|
||||
Layout.topMargin: 20
|
||||
onClicked: {
|
||||
showInfo("这是一个Info样式的InfoBar")
|
||||
}
|
||||
}
|
||||
FluButton{
|
||||
text:"Warning"
|
||||
Layout.topMargin: 20
|
||||
onClicked: {
|
||||
showWarning("这是一个Warning样式的InfoBar")
|
||||
}
|
||||
}
|
||||
FluButton{
|
||||
text:"Error"
|
||||
Layout.topMargin: 20
|
||||
onClicked: {
|
||||
showError("这是一个Error样式的InfoBar")
|
||||
}
|
||||
}
|
||||
FluButton{
|
||||
text:"Success"
|
||||
Layout.topMargin: 20
|
||||
onClicked: {
|
||||
showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,41 +1,49 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuick.Window 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtGraphicalEffects 1.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
|
||||
FluText{
|
||||
text:"Progress"
|
||||
fontStyle: FluText.TitleLarge
|
||||
FluText{
|
||||
id:title
|
||||
text:"Progress"
|
||||
fontStyle: FluText.TitleLarge
|
||||
}
|
||||
ScrollView{
|
||||
clip: true
|
||||
width: parent.width
|
||||
contentWidth: parent.width
|
||||
anchors{
|
||||
top: title.bottom
|
||||
bottom: parent.bottom
|
||||
}
|
||||
FluProgressBar{
|
||||
Layout.topMargin: 20
|
||||
}
|
||||
FluProgressRing{
|
||||
Layout.topMargin: 10
|
||||
}
|
||||
FluProgressBar{
|
||||
id:progress_bar
|
||||
Layout.topMargin: 20
|
||||
indeterminate: false
|
||||
}
|
||||
FluProgressRing{
|
||||
id:progress_ring
|
||||
Layout.topMargin: 10
|
||||
indeterminate: false
|
||||
}
|
||||
|
||||
FluSlider{
|
||||
Layout.topMargin: 30
|
||||
value:50
|
||||
onValueChanged:{
|
||||
progress_bar.progress = value/100
|
||||
progress_ring.progress = value/100
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
FluProgressBar{
|
||||
Layout.topMargin: 20
|
||||
}
|
||||
FluProgressRing{
|
||||
Layout.topMargin: 10
|
||||
}
|
||||
FluProgressBar{
|
||||
id:progress_bar
|
||||
Layout.topMargin: 20
|
||||
indeterminate: false
|
||||
}
|
||||
FluProgressRing{
|
||||
id:progress_ring
|
||||
Layout.topMargin: 10
|
||||
indeterminate: false
|
||||
}
|
||||
FluSlider{
|
||||
Layout.topMargin: 30
|
||||
value:50
|
||||
onValueChanged:{
|
||||
progress_bar.progress = value/100
|
||||
progress_ring.progress = value/100
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,131 +1,131 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtQuick.Window 2.15
|
||||
import QtGraphicalEffects 1.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
|
||||
FluText{
|
||||
text:"Rectangle"
|
||||
fontStyle: FluText.TitleLarge
|
||||
FluText{
|
||||
id:title
|
||||
text:"Rectangle"
|
||||
fontStyle: FluText.TitleLarge
|
||||
}
|
||||
ScrollView{
|
||||
clip: true
|
||||
width: parent.width
|
||||
contentWidth: parent.width
|
||||
anchors{
|
||||
top: title.bottom
|
||||
bottom: parent.bottom
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
Layout.topMargin: 20
|
||||
|
||||
FluRectangle{
|
||||
width: 50
|
||||
height: 50
|
||||
color:"#0078d4"
|
||||
radius:[0,0,0,0]
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
width: parent.width
|
||||
height: parent.height
|
||||
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]
|
||||
}
|
||||
}
|
||||
|
||||
FluRectangle{
|
||||
width: 50
|
||||
height: 50
|
||||
color:"#744da9"
|
||||
radius:[15,15,15,15]
|
||||
FluText{
|
||||
text:"配合图片使用"
|
||||
fontStyle: FluText.Subtitle
|
||||
Layout.topMargin: 20
|
||||
}
|
||||
|
||||
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)
|
||||
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: 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
|
||||
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)
|
||||
source: "qrc:/res/svg/avatar_3.svg"
|
||||
}
|
||||
Layout.topMargin: 10
|
||||
}
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,27 +1,30 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuick.Window 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtGraphicalEffects 1.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
|
||||
|
||||
FluText{
|
||||
text:"Slider"
|
||||
fontStyle: FluText.TitleLarge
|
||||
}
|
||||
|
||||
FluSlider{
|
||||
Layout.topMargin: 20
|
||||
value: 50
|
||||
}
|
||||
|
||||
|
||||
FluText{
|
||||
id:title
|
||||
text:"Slider"
|
||||
fontStyle: FluText.TitleLarge
|
||||
}
|
||||
ScrollView{
|
||||
clip: true
|
||||
width: parent.width
|
||||
contentWidth: parent.width
|
||||
anchors{
|
||||
top: title.bottom
|
||||
bottom: parent.bottom
|
||||
}
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
FluSlider{
|
||||
Layout.topMargin: 20
|
||||
value: 50
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
@ -6,23 +6,31 @@ import QtGraphicalEffects 1.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
|
||||
FluText{
|
||||
text:"TextBox"
|
||||
fontStyle: FluText.TitleLarge
|
||||
FluText{
|
||||
id:title
|
||||
text:"TextBox"
|
||||
fontStyle: FluText.TitleLarge
|
||||
}
|
||||
ScrollView{
|
||||
clip: true
|
||||
width: parent.width
|
||||
contentWidth: parent.width
|
||||
anchors{
|
||||
top: title.bottom
|
||||
bottom: parent.bottom
|
||||
}
|
||||
FluTextBox{
|
||||
Layout.topMargin: 20
|
||||
placeholderText: "单行输入框"
|
||||
Layout.preferredWidth: 300
|
||||
}
|
||||
FluMultiLineTextBox{
|
||||
Layout.topMargin: 20
|
||||
Layout.preferredWidth: 300
|
||||
placeholderText: "多行输入框"
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
FluTextBox{
|
||||
Layout.topMargin: 20
|
||||
placeholderText: "单行输入框"
|
||||
Layout.preferredWidth: 300
|
||||
}
|
||||
FluMultiLineTextBox{
|
||||
Layout.topMargin: 20
|
||||
Layout.preferredWidth: 300
|
||||
placeholderText: "多行输入框"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,42 +1,49 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuick.Window 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtGraphicalEffects 1.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
|
||||
FluText{
|
||||
text:"Theme"
|
||||
fontStyle: FluText.TitleLarge
|
||||
FluText{
|
||||
id:title
|
||||
text:"Theme"
|
||||
fontStyle: FluText.TitleLarge
|
||||
}
|
||||
ScrollView{
|
||||
clip: true
|
||||
width: parent.width
|
||||
contentWidth: parent.width
|
||||
anchors{
|
||||
top: title.bottom
|
||||
bottom: parent.bottom
|
||||
}
|
||||
RowLayout{
|
||||
Layout.topMargin: 20
|
||||
|
||||
|
||||
Repeater{
|
||||
model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
|
||||
delegate: Rectangle{
|
||||
width: 42
|
||||
height: 42
|
||||
radius: 4
|
||||
color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
|
||||
FluIcon {
|
||||
anchors.centerIn: parent
|
||||
icon: FluentIcons.FA_check
|
||||
iconSize: 15
|
||||
visible: modelData === FluTheme.primaryColor
|
||||
color: FluTheme.isDark ? 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
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
RowLayout{
|
||||
Layout.topMargin: 20
|
||||
Repeater{
|
||||
model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
|
||||
delegate: Rectangle{
|
||||
width: 42
|
||||
height: 42
|
||||
radius: 4
|
||||
color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
|
||||
FluIcon {
|
||||
anchors.centerIn: parent
|
||||
icon: FluentIcons.FA_check
|
||||
iconSize: 15
|
||||
visible: modelData === FluTheme.primaryColor
|
||||
color: FluTheme.isDark ? 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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,26 +1,30 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuick.Window 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtGraphicalEffects 1.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
|
||||
|
||||
FluText{
|
||||
text:"ToggleSwitch"
|
||||
fontStyle: FluText.TitleLarge
|
||||
FluText{
|
||||
id:title
|
||||
text:"ToggleSwitch"
|
||||
fontStyle: FluText.TitleLarge
|
||||
}
|
||||
ScrollView{
|
||||
clip: true
|
||||
width: parent.width
|
||||
contentWidth: parent.width
|
||||
anchors{
|
||||
top: title.bottom
|
||||
bottom: parent.bottom
|
||||
}
|
||||
|
||||
FluToggleSwitch{
|
||||
Layout.topMargin: 20
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
FluToggleSwitch{
|
||||
Layout.topMargin: 20
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
@ -1,54 +1,56 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuick.Controls 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
ColumnLayout{
|
||||
|
||||
spacing: 5
|
||||
|
||||
FluText{
|
||||
text:"Display"
|
||||
fontStyle: FluText.Display
|
||||
}
|
||||
|
||||
FluText{
|
||||
text:"Title Large"
|
||||
fontStyle: FluText.TitleLarge
|
||||
}
|
||||
|
||||
FluText{
|
||||
text:"Title"
|
||||
fontStyle: FluText.Title
|
||||
}
|
||||
|
||||
FluText{
|
||||
text:"Subtitle"
|
||||
fontStyle: FluText.Subtitle
|
||||
}
|
||||
|
||||
FluText{
|
||||
text:"Body Large"
|
||||
fontStyle: FluText.BodyLarge
|
||||
}
|
||||
|
||||
FluText{
|
||||
text:"Body Strong"
|
||||
fontStyle: FluText.BodyStrong
|
||||
}
|
||||
|
||||
FluText{
|
||||
text:"Body"
|
||||
fontStyle: FluText.Body
|
||||
}
|
||||
|
||||
FluText{
|
||||
text:"Caption"
|
||||
fontStyle: FluText.Caption
|
||||
}
|
||||
|
||||
|
||||
FluText{
|
||||
id:title
|
||||
text:"Theme"
|
||||
fontStyle: FluText.TitleLarge
|
||||
}
|
||||
ScrollView{
|
||||
clip: true
|
||||
width: parent.width
|
||||
contentWidth: parent.width
|
||||
anchors{
|
||||
top: title.bottom
|
||||
bottom: parent.bottom
|
||||
}
|
||||
ColumnLayout{
|
||||
spacing: 5
|
||||
FluText{
|
||||
text:"Display"
|
||||
fontStyle: FluText.Display
|
||||
}
|
||||
FluText{
|
||||
text:"Title Large"
|
||||
fontStyle: FluText.TitleLarge
|
||||
}
|
||||
FluText{
|
||||
text:"Title"
|
||||
fontStyle: FluText.Title
|
||||
}
|
||||
FluText{
|
||||
text:"Subtitle"
|
||||
fontStyle: FluText.Subtitle
|
||||
}
|
||||
FluText{
|
||||
text:"Body Large"
|
||||
fontStyle: FluText.BodyLarge
|
||||
}
|
||||
FluText{
|
||||
text:"Body Strong"
|
||||
fontStyle: FluText.BodyStrong
|
||||
}
|
||||
FluText{
|
||||
text:"Body"
|
||||
fontStyle: FluText.Body
|
||||
}
|
||||
FluText{
|
||||
text:"Caption"
|
||||
fontStyle: FluText.Caption
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
QT += quick concurrent
|
||||
CONFIG += c++11 qtquickcompiler utf8_source
|
||||
CONFIG += c++11
|
||||
|
||||
DEFINES += QT_DEPRECATED_WARNINGS QT_NO_WARNING_OUTPUT
|
||||
|
||||
|
@ -27,5 +27,6 @@
|
||||
<file>T_Awesome.qml</file>
|
||||
<file>T_TextBox.qml</file>
|
||||
<file>T_Theme.qml</file>
|
||||
<file>T_Dialog.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
Reference in New Issue
Block a user