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

update

Browse Source
This commit is contained in:
zhuzihcu 2023-03-28 17:53:46 +08:00
parent 96ad06c2e4
commit 6a2a93561a
40 changed files with 264 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
example/T_Awesome.qml
View File

@ -8,6 +8,10 @@ FluContentPage {
title:"Awesome"
leftPadding:10
rightPadding:10
bottomPadding:20
FluTextBox{
id:text_box
placeholderText: "请输入关键字"

3
example/T_Badge.qml
View File

@ -9,6 +9,9 @@ FluScrollablePage{
title:"Badge"
leftPadding:10
rightPadding:10
bottomPadding:20
FluArea{
width: parent.width

4
example/T_Buttons.qml
View File

@ -9,6 +9,10 @@ FluScrollablePage{
spacing: 20
leftPadding:10
rightPadding:10
bottomPadding:20
FluText{
Layout.topMargin: 20
text:"支持Tab键切换焦点，空格键执行点击事件"

3
example/T_CalendarPicker.qml
View File

@ -7,6 +7,9 @@ import FluentUI 1.0
FluScrollablePage{
title:"CalendarPicker"
leftPadding:10
rightPadding:10
bottomPadding:20
FluArea{
width: parent.width

3
example/T_Carousel.qml
View File

@ -8,6 +8,9 @@ import FluentUI 1.0
FluScrollablePage{
title:"Carousel"
leftPadding:10
rightPadding:10
bottomPadding:20
FluArea{
width: parent.width

3
example/T_ColorPicker.qml
View File

@ -8,6 +8,9 @@ import FluentUI 1.0
FluScrollablePage{
title:"ColorPicker"
leftPadding:10
rightPadding:10
bottomPadding:20
FluArea{
width: parent.width

4
example/T_DatePicker.qml
View File

@ -7,7 +7,9 @@ import FluentUI 1.0
FluScrollablePage{
title:"TimePicker"
leftPadding:10
rightPadding:10
bottomPadding:20
FluArea{
width: parent.width

4
example/T_Dialog.qml
View File

@ -6,7 +6,11 @@ import QtGraphicalEffects 1.15
import FluentUI 1.0
FluScrollablePage{
title:"Dialog"
leftPadding:10
rightPadding:10
bottomPadding:20
FluContentDialog{
id:dialog

4
example/T_Expander.qml
View File

@ -6,7 +6,11 @@ import QtGraphicalEffects 1.15
import FluentUI 1.0
FluScrollablePage{
title:"Expander"
leftPadding:10
rightPadding:10
bottomPadding:20
FluExpander{
headerText:"打开一个单选框"

4
example/T_InfoBar.qml
View File

@ -6,7 +6,11 @@ import QtGraphicalEffects 1.15
import FluentUI 1.0
FluScrollablePage{
title:"InfoBar"
leftPadding:10
rightPadding:10
bottomPadding:20
FluButton{
text:"Info"

3
example/T_MediaPlayer.qml
View File

@ -8,6 +8,9 @@ import FluentUI 1.0
FluScrollablePage{
title:"MediaPlayer"
leftPadding:10
rightPadding:10
bottomPadding:20
onVisibleChanged: {
if(visible){

5
example/T_Menu.qml
View File

@ -8,11 +8,13 @@ import FluentUI 1.0
FluScrollablePage{
title:"Menu"
leftPadding:10
rightPadding:10
bottomPadding:20
FluButton{
text:"左击菜单"
Layout.topMargin: 20
Layout.leftMargin: 15
onClicked:{
menu.popup()
}
@ -22,7 +24,6 @@ FluScrollablePage{
FluButton{
text:"右击菜单"
Layout.topMargin: 20
Layout.leftMargin: 15
onClicked: {
showSuccess("请按鼠标右击")
}

3
example/T_MultiWindow.qml
View File

@ -7,6 +7,9 @@ import FluentUI 1.0
FluScrollablePage{
title:"MultiWindow"
leftPadding:10
rightPadding:10
bottomPadding:20
property string password: ""

4
example/T_Progress.qml
View File

@ -6,7 +6,11 @@ import QtGraphicalEffects 1.15
import FluentUI 1.0
FluScrollablePage{
title:"Progress"
leftPadding:10
rightPadding:10
bottomPadding:20
FluProgressBar{
Layout.topMargin: 20

4
example/T_Rectangle.qml
View File

@ -6,7 +6,11 @@ import QtGraphicalEffects 1.15
import FluentUI 1.0
FluScrollablePage{
title:"Rectangle"
leftPadding:10
rightPadding:10
bottomPadding:20
RowLayout{
Layout.topMargin: 20

8
example/T_Slider.qml
View File

@ -8,16 +8,20 @@ import FluentUI 1.0
FluScrollablePage{
title:"Slider"
leftPadding:10
rightPadding:10
bottomPadding:20
FluSlider{
Layout.topMargin: 20
Layout.leftMargin: 15
value: 50
Layout.leftMargin: 10
}
FluSlider{
orientation:FluSlider.Vertical
Layout.topMargin: 20
Layout.leftMargin: 15
Layout.leftMargin: 10
Layout.bottomMargin: 20
value: 50
}
}

3
example/T_TabView.qml
View File

@ -7,6 +7,9 @@ import FluentUI 1.0
FluScrollablePage{
title:"TabView"
leftPadding:10
rightPadding:10
bottomPadding:20
Component{
id:com_page

3
example/T_TextBox.qml
View File

@ -8,6 +8,9 @@ import FluentUI 1.0
FluScrollablePage{
title:"TextBox"
leftPadding:10
rightPadding:10
bottomPadding:20
FluTextBox{
Layout.topMargin: 20

3
example/T_Theme.qml
View File

@ -8,6 +8,9 @@ import FluentUI 1.0
FluScrollablePage{
title:"Theme"
leftPadding:10
rightPadding:10
bottomPadding:20
RowLayout{
Layout.topMargin: 20

4
example/T_TimePicker.qml
View File

@ -7,7 +7,9 @@ import FluentUI 1.0
FluScrollablePage{
title:"TimePicker"
leftPadding:10
rightPadding:10
bottomPadding:20
FluArea{
width: parent.width

3
example/T_ToggleSwitch.qml
View File

@ -8,6 +8,9 @@ import FluentUI 1.0
FluScrollablePage{
title:"ToggleSwitch"
leftPadding:10
rightPadding:10
bottomPadding:20
FluToggleSwitch{
Layout.topMargin: 20

3
example/T_Tooltip.qml
View File

@ -8,6 +8,9 @@ import FluentUI 1.0
FluScrollablePage{
title:"Tooltip"
leftPadding:10
rightPadding:10
bottomPadding:20
FluText{
Layout.topMargin: 20

3
example/T_TreeView.qml
View File

@ -7,6 +7,9 @@ import FluentUI 1.0
FluContentPage {
title:"TreeView"
leftPadding:10
rightPadding:10
bottomPadding:20
function randomName() {
var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]

3
example/T_Typography.qml
View File

@ -7,6 +7,9 @@ FluContentPage {
title: "Typography"
property int textSize: 13
leftPadding:10
rightPadding:10
bottomPadding:20
Component.onCompleted: {
slider.seek(31)

BIN
example/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 272 KiB

After

Width:  |  Height:  |  Size: 116 KiB

44
example/page/MainPage.qml
View File

@ -9,14 +9,14 @@ import FluentUI 1.0
FluWindow {
id:rootwindow
width: 860
height: 600
height: 640
title: "FluentUI"
minimumWidth: 520
minimumHeight: 400
FluAppBar{
id:appbar
title: "FluentUI"
z:10
}
FluObject{
@ -237,47 +237,13 @@ FluWindow {
}
}
FluNavigationView{
id:nav_view
anchors{
top: appbar.bottom
left: parent.left
right: parent.right
bottom: parent.bottom
}
anchors.fill: parent
items: original_items
footerItems:footer_items
actions:[
Image {
width: 30
height: 30
Layout.preferredWidth: 30
Layout.preferredHeight: 30
sourceSize: Qt.size(60,60)
source: "qrc:/res/image/logo_openai.png"
Layout.rightMargin: 5
MouseArea{
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
FluApp.navigate("/chat")
}
}
},
FluText{
text:"夜间模式"
fontStyle: FluText.Body
},
FluToggleSwitch{
selected: FluTheme.isDark
clickFunc:function(){
FluTheme.isDark = !FluTheme.isDark
}
}
]
logo: "qrc:/res/image/favicon.ico"
z: 11
Component.onCompleted: {
nav_view.setCurrentIndex(1)
nav_view.push("qrc:/T_Buttons.qml")

1
example/qml.qrc
View File

@ -46,5 +46,6 @@
<file>T_Carousel.qml</file>
<file>T_MediaPlayer.qml</file>
<file>T_TabView.qml</file>
<file>res/image/favicon.ico</file>
</qresource>
</RCC>

BIN
example/res/image/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

2
src/FluTheme.cpp
View File

@ -16,7 +16,7 @@ FluTheme::FluTheme(QObject *parent)
: QObject{parent}
{
primaryColor(FluColors::getInstance()->Blue());
textSize(13);
textSize(14);
isNativeText(false);
isFrameless(true);
isDark(false);

30
src/controls/FluAppBar.qml
View File

@ -6,7 +6,7 @@ import FluentUI 1.0
Rectangle{
property string title: "标题"
property string title: ""
property color textColor: FluTheme.isDark ? "#FFFFFF" : "#000000"
property bool showDark: false
property bool showFps: false
@ -94,7 +94,19 @@ Rectangle{
text:"最小化"
radius: 0
textColor: root.textColor
color:hovered ? "#20000000" : "#00000000"
color:{
if(FluTheme.isDark){
if(hovered){
return Qt.rgba(1,1,1,0.06)
}
return Qt.rgba(0,0,0,0)
}else{
if(hovered){
return Qt.rgba(0,0,0,0.06)
}
return Qt.rgba(0,0,0,0)
}
}
onClicked: {
window.showMinimized()
}
@ -108,7 +120,19 @@ Rectangle{
return Window.Maximized === window.visibility
}
iconSource : isRestore ? FluentIcons.ChromeRestore : FluentIcons.ChromeMaximize
color:hovered ? "#20000000" : "#00000000"
color:{
if(FluTheme.isDark){
if(hovered){
return Qt.rgba(1,1,1,0.06)
}
return Qt.rgba(0,0,0,0)
}else{
if(hovered){
return Qt.rgba(0,0,0,0.06)
}
return Qt.rgba(0,0,0,0)
}
}
Layout.alignment: Qt.AlignVCenter
visible: resizable
radius: 0

2
src/controls/FluCalendarPicker.qml
View File

@ -63,6 +63,8 @@ Rectangle {
id:popup
height: container.height
width: container.width
modal: true
dim:false
background: FluCalendarView{
id:container
onDateClicked:

2
src/controls/FluColorPicker.qml
View File

@ -29,6 +29,8 @@ Button{
}
Popup{
id:popup
modal: true
dim:false
height: container.height
width: container.width
background: FluColorView{

20
src/controls/FluContentPage.qml
View File

@ -8,22 +8,38 @@ Item {
property alias title: text_title.text
default property alias content: container.data
property int leftPadding: 0
property int topPadding: 0
property int rightPadding: 0
property int bottomPadding: 0
id:root
id:control
FluText{
id:text_title
fontStyle: FluText.TitleLarge
anchors{
top: parent.top
topMargin: control.topPadding
left: parent.left
right: parent.right
leftMargin: control.leftPadding
rightMargin: control.rightPadding
}
}
Item{
clip: true
id:container
anchors{
left: parent.left
right: parent.right
top: text_title.bottom
bottom: parent.bottom
leftMargin: control.leftPadding
rightMargin: control.rightPadding
bottomMargin: control.bottomPadding
}
width: parent.width
}
}

2
src/controls/FluDatePicker.qml
View File

@ -102,6 +102,8 @@ Rectangle {
width: container.width
height: container.height
contentItem: Item{}
modal: true
dim:false
background: Rectangle{
id:container
width: 300

6
src/controls/FluDivider.qml
View File

@ -5,4 +5,10 @@ Rectangle {
color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
Behavior on color{
ColorAnimation {
duration: 300
}
}
}

3
src/controls/FluMenu.qml
View File

@ -9,6 +9,9 @@ Menu {
id: popup
width: 140
height: container.height
modal: true
dim:false
contentItem: Item{}
background: Item {
Rectangle{

68
src/controls/FluNavigationView.qml
View File

@ -6,18 +6,18 @@ import FluentUI 1.0
Item {
property alias logo : image_logo.source
property FluObject items
property FluObject footerItems
property int displayMode: width<=700 ? FluNavigationView.Minimal : FluNavigationView.Open
property bool displaMinimalNav : false
property alias actions: layout_actions.data
property bool displaMinimalMenu : false
id:root
onDisplayModeChanged: {
if(displayMode === FluNavigationView.Minimal){
anim_navi.enabled = false
displaMinimalNav = false
displaMinimalMenu = false
timer_anim_enable.restart()
}
}
@ -85,6 +85,16 @@ Item {
leftMargin: 6
rightMargin: 6
}
Rectangle{
width: 3
height: 18
radius: 1.5
color: FluTheme.primaryColor.dark
visible: nav_list.currentIndex === position && type===0
anchors{
verticalCenter: parent.verticalCenter
}
}
MouseArea{
id:item_mouse
hoverEnabled: true
@ -99,6 +109,7 @@ Item {
}else{
model.tap()
}
displaMinimalMenu = false
}
}
color: {
@ -136,7 +147,7 @@ Item {
Item {
id:nav_app_bar
width: parent.width
height: 38
height: 50
z:999
RowLayout{
height:parent.height
@ -144,6 +155,8 @@ Item {
FluIconButton{
iconSource: FluentIcons.ChromeBack
Layout.leftMargin: 5
Layout.preferredWidth: 40
Layout.preferredHeight: 40
Layout.alignment: Qt.AlignVCenter
disabled: nav_swipe.depth === 1
iconSize: 13
@ -157,37 +170,45 @@ Item {
}
}
FluIconButton{
id:btn_nav
iconSource: FluentIcons.GlobalNavButton
Layout.leftMargin: 5
iconSize: 15
Layout.preferredWidth: 40
Layout.preferredHeight: 40
visible: displayMode === FluNavigationView.Minimal
Layout.alignment: Qt.AlignVCenter
onClicked: {
displaMinimalNav = !displaMinimalNav
}
displaMinimalMenu = !displaMinimalMenu
}
}
RowLayout{
id:layout_actions
anchors{
right: parent.right
rightMargin: 14
verticalCenter: parent.verticalCenter
Image{
id:image_logo
Layout.preferredHeight: 20
Layout.preferredWidth: 20
Layout.leftMargin: {
if(btn_nav.visible){
return 12
}
return 5
}
Layout.alignment: Qt.AlignVCenter
}
FluText{
Layout.alignment: Qt.AlignVCenter
text:"FluentUI"
Layout.leftMargin: 12
fontStyle: FluText.Body
}
spacing: 5
}
}
Item{
anchors{
left: displayMode === FluNavigationView.Minimal ? parent.left : layout_list.right
leftMargin: 10
top: nav_app_bar.bottom
right: parent.right
rightMargin: 10
bottom: parent.bottom
bottomMargin: 20
}
StackView{
@ -209,9 +230,9 @@ Item {
MouseArea{
anchors.fill: parent
enabled: (displayMode === FluNavigationView.Minimal && displaMinimalNav)
enabled: (displayMode === FluNavigationView.Minimal && displaMinimalMenu)
onClicked: {
displaMinimalNav = false
displaMinimalMenu = false
}
}
@ -225,7 +246,7 @@ Item {
x: {
if(displayMode !== FluNavigationView.Minimal)
return 0
return (displayMode === FluNavigationView.Minimal && displaMinimalNav) ? 0 : -width
return (displayMode === FluNavigationView.Minimal && displaMinimalMenu) ? 0 : -width
}
Behavior on x{
id:anim_navi
@ -233,6 +254,7 @@ Item {
duration: 150
}
}
color: {
if(displayMode === FluNavigationView.Minimal){
return FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
@ -248,13 +270,17 @@ Item {
}
}
border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
border.width: displayMode === FluNavigationView.Minimal ? 1 : 0
Item{
id:layout_header
width: layout_list.width
y:nav_app_bar.height
height: 50
height: textbox_search.height
FluAutoSuggestBox{
id:textbox_search
width: 280
anchors.centerIn: parent
iconSource: FluentIcons.Zoom

34
src/controls/FluScrollBar.qml
View File

@ -1,7 +1,39 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.impl 2.15
import QtQuick.Templates 2.15 as T
import FluentUI 1.0
ScrollBar {
T.ScrollBar {
id: control
property color handleNormalColor: Qt.rgba(134/255,134/255,134/255,1)
property color handleHoverColor: Qt.lighter(handleNormalColor)
property color handlePressColor: Qt.darker(handleNormalColor)
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)
padding: 4
visible: control.policy !== T.ScrollBar.AlwaysOff
minimumSize: 0.3
contentItem: Rectangle {
implicitWidth: hovered || pressed ? 6 : 2
implicitHeight: hovered || pressed ? 6 : 2
radius: width / 2
layer.samples: 4
layer.enabled: true
layer.smooth: true
color: control.pressed?handlePressColor:control.hovered?handleHoverColor:handleNormalColor
opacity:(control.policy === T.ScrollBar.AlwaysOn || control.size < 1.0)?1.0:0.0
}
Behavior on implicitWidth {
NumberAnimation{
duration: 150
}
}
}

36
src/controls/FluScrollablePage.qml
View File

@ -9,28 +9,56 @@ Item {
property alias title: text_title.text
default property alias content: container.data
property int spacing : 5
property int leftPadding: 0
property int topPadding: 0
property int rightPadding: 0
property int bottomPadding: 0
id:root
id:control
FluText{
id:text_title
fontStyle: FluText.TitleLarge
anchors{
top: parent.top
topMargin: control.topPadding
left: parent.left
right: parent.right
leftMargin: control.leftPadding
rightMargin: control.rightPadding
}
}
Flickable{
id:flickview
clip: true
width: parent.width
anchors{
left: parent.left
right: parent.right
top: text_title.bottom
bottom: parent.bottom
bottomMargin: control.bottomPadding
}
contentWidth: parent.width
contentHeight: container.height
boundsBehavior: Flickable.StopAtBounds
ScrollBar.vertical: ScrollBar { }
ScrollBar.vertical: FluScrollBar {
}
anchors{
top: text_title.bottom
bottom: parent.bottom
}
ColumnLayout{
id:container
spacing: root.spacing
spacing: control.spacing
clip: true
anchors{
left: parent.left
right: parent.right
top: parent.top
leftMargin: control.leftPadding
rightMargin: control.rightPadding
}
width: parent.width
}
}

2
src/controls/FluTimePicker.qml
View File

@ -104,6 +104,8 @@ Rectangle {
width: container.width
height: container.height
contentItem: Item{}
modal: true
dim:false
background: Rectangle{
id:container
width: 300