wuyize
/
FluentUI
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

main
朱子楚\zhuzi 2023-03-29 21:43:01 +08:00
parent a33a63abc9
commit 5a1b10fef8
22 changed files with 107 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -65,9 +65,9 @@
# 部分效果预览 # 部分效果预览
## 一个聊天Demo，调用了ChatGPT的接口 ## 首页
![](doc/preview/chatgpt.png) ![](doc/preview/home.png)
## 各种Button按钮 ## 各种Button按钮

1
example/T_Buttons.qml
View File

@ -27,7 +27,6 @@ FluScrollablePage{
disabled:text_button_switch.selected disabled:text_button_switch.selected
text:"Text Button" text:"Text Button"
onClicked: { onClicked: {
console.debug(Screen.devicePixelRatio)
showInfo("点击Text Button") showInfo("点击Text Button")
} }
anchors{ anchors{

8
example/T_CheckBox.qml
View File

@ -13,7 +13,11 @@ FluScrollablePage{
FluCheckBox{ FluCheckBox{
Layout.topMargin: 20 Layout.topMargin: 20
Layout.leftMargin: 10
Layout.bottomMargin: 20
} }
FluCheckBox{
Layout.topMargin: 20
text:"Text"
}
} }

18
example/T_Home.qml
View File

@ -56,7 +56,6 @@ FluScrollablePage{
bottom: parent.bottom bottom: parent.bottom
} }
orientation: ListView.Horizontal orientation: ListView.Horizontal
boundsBehavior: ListView.StopAtBounds
height: 240 height: 240
model: model_header model: model_header
header: Item{height: 10;width: 10} header: Item{height: 10;width: 10}
@ -101,7 +100,7 @@ FluScrollablePage{
} }
FluText{ FluText{
text: model.title text: model.title
fontStyle: FluText.BodyLarge fontStyle: FluText.Body
Layout.topMargin: 20 Layout.topMargin: 20
Layout.leftMargin: 20 Layout.leftMargin: 20
} }
@ -110,7 +109,7 @@ FluScrollablePage{
Layout.topMargin: 5 Layout.topMargin: 5
Layout.preferredWidth: 160 Layout.preferredWidth: 160
Layout.leftMargin: 20 Layout.leftMargin: 20
color: FluColors.Grey100 color: FluColors.Grey120
font.pixelSize: 12 font.pixelSize: 12
wrapMode: Text.WrapAnywhere wrapMode: Text.WrapAnywhere
} }
@ -222,7 +221,7 @@ FluScrollablePage{
FluText{ FluText{
id:item_title id:item_title
text:model.title text:model.title
fontStyle: FluText.Subtitle fontStyle: FluText.BodyStrong
anchors{ anchors{
left: item_icon.right left: item_icon.right
leftMargin: 20 leftMargin: 20
@ -233,9 +232,10 @@ FluScrollablePage{
FluText{ FluText{
id:item_desc id:item_desc
text:model.desc text:model.desc
color:FluColors.Grey100 color:FluColors.Grey120
wrapMode: Text.WrapAnywhere wrapMode: Text.WrapAnywhere
elide: Text.ElideRight elide: Text.ElideRight
fontStyle: FluText.Caption
maximumLineCount: 2 maximumLineCount: 2
anchors{ anchors{
left: item_title.left left: item_title.left
@ -260,7 +260,7 @@ FluScrollablePage{
FluText{ FluText{
text: "Recently added samples" text: "Recently added samples"
fontStyle: FluText.TitleLarge fontStyle: FluText.Title
Layout.topMargin: 20 Layout.topMargin: 20
Layout.leftMargin: 20 Layout.leftMargin: 20
} }
@ -270,14 +270,14 @@ FluScrollablePage{
implicitHeight: contentHeight implicitHeight: contentHeight
cellHeight: 120 cellHeight: 120
cellWidth: 320 cellWidth: 320
boundsBehavior: GridView.StopAtBounds
model:model_added model:model_added
interactive: false
delegate: com_item delegate: com_item
} }
FluText{ FluText{
text: "Recently updated samples" text: "Recently updated samples"
fontStyle: FluText.TitleLarge fontStyle: FluText.Title
Layout.topMargin: 20 Layout.topMargin: 20
Layout.leftMargin: 20 Layout.leftMargin: 20
} }
@ -287,7 +287,7 @@ FluScrollablePage{
implicitHeight: contentHeight implicitHeight: contentHeight
cellHeight: 120 cellHeight: 120
cellWidth: 320 cellWidth: 320
boundsBehavior: GridView.StopAtBounds interactive: false
model: model_update model: model_update
delegate: com_item delegate: com_item
} }

2
example/T_Rectangle.qml
View File

@ -53,7 +53,7 @@ FluScrollablePage{
} }
FluText{ FluText{
text:"配合图片使用" text:"配合图片使用"
fontStyle: FluText.Subtitle fontStyle: FluText.SubTitle
Layout.topMargin: 20 Layout.topMargin: 20
} }
RowLayout{ RowLayout{

2
example/T_ToggleSwitch.qml
View File

@ -17,6 +17,6 @@ FluScrollablePage{
} }
FluToggleSwitch{ FluToggleSwitch{
Layout.topMargin: 20 Layout.topMargin: 20
text:"Disabled" text:"Text"
} }
} }

14
example/T_Typography.qml
View File

@ -6,13 +6,13 @@ import FluentUI 1.0
FluContentPage { FluContentPage {
title: "Typography" title: "Typography"
property int textSize: 13 property int textSize: FluTheme.textSize
leftPadding:10 leftPadding:10
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
Component.onCompleted: { Component.onCompleted: {
slider.seek(31) slider.seek(0)
} }
ScrollView{ ScrollView{
@ -44,13 +44,7 @@ FluContentPage {
text:"Subtitle" text:"Subtitle"
padding: 0 padding: 0
pixelSize: textSize pixelSize: textSize
fontStyle: FluText.Subtitle fontStyle: FluText.SubTitle
}
FluText{
text:"Body Large"
padding: 0
pixelSize: textSize
fontStyle: FluText.BodyLarge
} }
FluText{ FluText{
text:"Body Strong" text:"Body Strong"
@ -84,7 +78,7 @@ FluContentPage {
topMargin: 30 topMargin: 30
} }
onValueChanged:{ onValueChanged:{
textSize = value/100*16+8 textSize = value/100*6+FluTheme.textSize
} }
} }

2
example/page/AboutPage.qml
View File

@ -35,7 +35,7 @@ FluWindow {
fontStyle: FluText.Title fontStyle: FluText.Title
} }
FluText{ FluText{
text:"v1.1.5" text:"v1.1.6"
fontStyle: FluText.Body fontStyle: FluText.Body
Layout.alignment: Qt.AlignBottom Layout.alignment: Qt.AlignBottom
} }

2
src/FluTheme.cpp
View File

@ -17,7 +17,7 @@ FluTheme::FluTheme(QObject *parent)
{ {
primaryColor(FluColors::getInstance()->Blue()); primaryColor(FluColors::getInstance()->Blue());
textSize(13); textSize(13);
nativeText(false); nativeText(true);
frameless(true); frameless(true);
dark(false); dark(false);
} }

1
src/controls/FluAppBar.qml
View File

@ -75,7 +75,6 @@ Rectangle{
FluText{ FluText{
text:"夜间模式" text:"夜间模式"
color:root.textColor color:root.textColor
fontStyle: FluText.Caption
} }
FluToggleSwitch{ FluToggleSwitch{
selected: FluTheme.dark selected: FluTheme.dark

33
src/controls/FluAutoSuggestBox.qml
View File

@ -10,7 +10,7 @@ TextField{
property int iconSource: 0 property int iconSource: 0
property bool disabled: false property bool disabled: false
signal itemClicked(string data) signal itemClicked(string data)
signal handleClicked
id:input id:input
width: 300 width: 300
enabled: !disabled enabled: !disabled
@ -47,12 +47,8 @@ TextField{
Keys.onDownPressed: { Keys.onDownPressed: {
list_view.currentIndex = Math.min(list_view.currentIndex+1,list_view.count-1) list_view.currentIndex = Math.min(list_view.currentIndex+1,list_view.count-1)
} }
signal handleClicked
Keys.onEnterPressed:handleClicked() Keys.onEnterPressed:handleClicked()
Keys.onReturnPressed:handleClicked() Keys.onReturnPressed:handleClicked()
font.bold: { font.bold: {
switch (fontStyle) { switch (fontStyle) {
case FluText.Display: case FluText.Display:
@ -61,10 +57,8 @@ TextField{
return true return true
case FluText.Title: case FluText.Title:
return true return true
case FluText.Subtitle: case FluText.SubTitle:
return true return true
case FluText.BodyLarge:
return false
case FluText.BodyStrong: case FluText.BodyStrong:
return true return true
case FluText.Body: case FluText.Body:
@ -78,23 +72,21 @@ TextField{
font.pixelSize: { font.pixelSize: {
switch (fontStyle) { switch (fontStyle) {
case FluText.Display: case FluText.Display:
return input.pixelSize * 4 return text.pixelSize * 4.857
case FluText.TitleLarge: case FluText.TitleLarge:
return input.pixelSize * 2 return text.pixelSize * 2.857
case FluText.Title: case FluText.Title:
return input.pixelSize * 1.5 return text.pixelSize * 2
case FluText.Subtitle: case FluText.SubTitle:
return input.pixelSize * 0.9 return text.pixelSize * 1.428
case FluText.BodyLarge:
return input.pixelSize * 1.1
case FluText.BodyStrong:
return input.pixelSize * 1.0
case FluText.Body: case FluText.Body:
return input.pixelSize * 1.0 return text.pixelSize * 1.0
case FluText.BodyStrong:
return text.pixelSize * 1.0
case FluText.Caption: case FluText.Caption:
return input.pixelSize * 0.8 return text.pixelSize * 0.857
default: default:
return input.pixelSize * 1.0 return text.pixelSize * 1.0
} }
} }
background: FluTextBoxBackground{ background: FluTextBoxBackground{
@ -175,7 +167,6 @@ TextField{
id:list_view id:list_view
signal closePopup signal closePopup
anchors.fill: parent anchors.fill: parent
boundsBehavior: ListView.StopAtBounds
clip: true clip: true
currentIndex: -1 currentIndex: -1
ScrollBar.vertical: FluScrollBar {} ScrollBar.vertical: FluScrollBar {}

14
src/controls/FluCheckBox.qml
View File

@ -73,16 +73,28 @@ Button {
} }
return normalColor return normalColor
} }
Behavior on color {
ColorAnimation{
duration: 150
}
}
FluIcon { FluIcon {
anchors.centerIn: parent anchors.centerIn: parent
iconSource: FluentIcons.AcceptMedium iconSource: FluentIcons.AcceptMedium
iconSize: 15 iconSize: 15
visible: selected visible: selected
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on visible {
NumberAnimation{
duration: 150
}
}
} }
} }
FluText{ FluText{
text:control.text text: control.text
Layout.leftMargin: 5
visible: text !== ""
} }
} }
} }

15
src/controls/FluExpander.qml
View File

@ -51,15 +51,22 @@ Item {
if(root_mouse.containsMouse){ if(root_mouse.containsMouse){
return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(245/255,245/255,245/255,1) return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(245/255,245/255,245/255,1)
} }
return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1) return FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
} }
iconSize: 15
iconSource: expand ? FluentIcons.ChevronUp : FluentIcons.ChevronDown
onClicked: { onClicked: {
expand = !expand expand = !expand
} }
contentItem: FluIcon{
rotation: expand?0:180
iconSource:FluentIcons.ChevronUp
iconSize: 15
Behavior on rotation {
NumberAnimation{
duration: 150
}
}
}
} }
} }

27
src/controls/FluMultiLineTextBox.qml
View File

@ -47,10 +47,8 @@ TextArea{
return true return true
case FluText.Title: case FluText.Title:
return true return true
case FluText.Subtitle: case FluText.SubTitle:
return true return true
case FluText.BodyLarge:
return false
case FluText.BodyStrong: case FluText.BodyStrong:
return true return true
case FluText.Body: case FluText.Body:
@ -61,27 +59,24 @@ TextArea{
return false return false
} }
} }
font.pixelSize: { font.pixelSize: {
switch (fontStyle) { switch (fontStyle) {
case FluText.Display: case FluText.Display:
return input.pixelSize * 4 return text.pixelSize * 4.857
case FluText.TitleLarge: case FluText.TitleLarge:
return input.pixelSize * 2 return text.pixelSize * 2.857
case FluText.Title: case FluText.Title:
return input.pixelSize * 1.5 return text.pixelSize * 2
case FluText.Subtitle: case FluText.SubTitle:
return input.pixelSize * 0.9 return text.pixelSize * 1.428
case FluText.BodyLarge:
return input.pixelSize * 1.1
case FluText.BodyStrong:
return input.pixelSize * 1.0
case FluText.Body: case FluText.Body:
return input.pixelSize * 1.0 return text.pixelSize * 1.0
case FluText.BodyStrong:
return text.pixelSize * 1.0
case FluText.Caption: case FluText.Caption:
return input.pixelSize * 0.8 return text.pixelSize * 0.857
default: default:
return input.pixelSize * 1.0 return text.pixelSize * 1.0
} }
} }

2
src/controls/FluNavigationView.qml
View File

@ -362,7 +362,6 @@ Item {
return items.children return items.children
} }
} }
boundsBehavior: ListView.StopAtBounds
delegate: Loader{ delegate: Loader{
property var model: modelData property var model: modelData
property var position: index property var position: index
@ -386,7 +385,6 @@ Item {
width: layout_list.width width: layout_list.width
height: childrenRect.height height: childrenRect.height
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
boundsBehavior: ListView.StopAtBounds
model: { model: {
if(footerItems){ if(footerItems){
return footerItems.children return footerItems.children

1
src/controls/FluScrollablePage.qml
View File

@ -43,7 +43,6 @@ Item {
} }
contentWidth: parent.width contentWidth: parent.width
contentHeight: container.height contentHeight: container.height
boundsBehavior: Flickable.StopAtBounds
ScrollBar.vertical: FluScrollBar { ScrollBar.vertical: FluScrollBar {
} }
anchors{ anchors{

6
src/controls/FluTabView.qml
View File

@ -47,7 +47,6 @@ Item {
orientation: ListView.Horizontal orientation: ListView.Horizontal
width: parent.width width: parent.width
interactive: false interactive: false
boundsBehavior: ListView.StopAtBounds
model: tab_model model: tab_model
move: Transition { move: Transition {
NumberAnimation { properties: "x"; duration: 100; easing.type: Easing.OutCubic } NumberAnimation { properties: "x"; duration: 100; easing.type: Easing.OutCubic }
@ -166,7 +165,10 @@ Item {
var idx = tab_nav.indexAt(pos.x+tab_nav.contentX, pos.y) var idx = tab_nav.indexAt(pos.x+tab_nav.contentX, pos.y)
var firstIdx = tab_nav.indexAt(tab_nav.contentX+1, pos.y) var firstIdx = tab_nav.indexAt(tab_nav.contentX+1, pos.y)
var lastIdx = tab_nav.indexAt(tab_nav.width+tab_nav.contentX-1, pos.y) var lastIdx = tab_nav.indexAt(tab_nav.width+tab_nav.contentX-1, pos.y)
if (idx >= firstIdx && idx <= lastIdx && d.dragIndex !== idx) { if(lastIdx === -1){
lastIdx = tab_nav.count-1
}
if (idx!==-1 && idx >= firstIdx && idx <= lastIdx && d.dragIndex !== idx) {
tab_model.move(d.dragIndex, idx, 1) tab_model.move(d.dragIndex, idx, 1)
d.dragIndex = idx; d.dragIndex = idx;
} }

25
src/controls/FluText.qml
View File

@ -11,8 +11,7 @@ Text {
Display, Display,
TitleLarge, TitleLarge,
Title, Title,
Subtitle, SubTitle,
BodyLarge,
BodyStrong, BodyStrong,
Body, Body,
Caption Caption
@ -29,10 +28,8 @@ Text {
return true return true
case FluText.Title: case FluText.Title:
return true return true
case FluText.Subtitle: case FluText.SubTitle:
return true return true
case FluText.BodyLarge:
return false
case FluText.BodyStrong: case FluText.BodyStrong:
return true return true
case FluText.Body: case FluText.Body:
@ -46,21 +43,19 @@ Text {
font.pixelSize: { font.pixelSize: {
switch (fontStyle) { switch (fontStyle) {
case FluText.Display: case FluText.Display:
return text.pixelSize * 4 return text.pixelSize * 4.857
case FluText.TitleLarge: case FluText.TitleLarge:
return text.pixelSize * 2 return text.pixelSize * 2.857
case FluText.Title: case FluText.Title:
return text.pixelSize * 1.5 return text.pixelSize * 2
case FluText.Subtitle: case FluText.SubTitle:
return text.pixelSize * 0.9 return text.pixelSize * 1.428
case FluText.BodyLarge:
return text.pixelSize * 1.1
case FluText.BodyStrong:
return text.pixelSize * 1.0
case FluText.Body: case FluText.Body:
return text.pixelSize * 1.0 return text.pixelSize * 1.0
case FluText.BodyStrong:
return text.pixelSize * 1.0
case FluText.Caption: case FluText.Caption:
return text.pixelSize * 0.8 return text.pixelSize * 0.857
default: default:
return text.pixelSize * 1.0 return text.pixelSize * 1.0
} }

26
src/controls/FluTextBox.qml
View File

@ -42,10 +42,8 @@ TextField{
return true return true
case FluText.Title: case FluText.Title:
return true return true
case FluText.Subtitle: case FluText.SubTitle:
return true return true
case FluText.BodyLarge:
return false
case FluText.BodyStrong: case FluText.BodyStrong:
return true return true
case FluText.Body: case FluText.Body:
@ -59,23 +57,21 @@ TextField{
font.pixelSize: { font.pixelSize: {
switch (fontStyle) { switch (fontStyle) {
case FluText.Display: case FluText.Display:
return input.pixelSize * 4 return text.pixelSize * 4.857
case FluText.TitleLarge: case FluText.TitleLarge:
return input.pixelSize * 2 return text.pixelSize * 2.857
case FluText.Title: case FluText.Title:
return input.pixelSize * 1.5 return text.pixelSize * 2
case FluText.Subtitle: case FluText.SubTitle:
return input.pixelSize * 0.9 return text.pixelSize * 1.428
case FluText.BodyLarge:
return input.pixelSize * 1.1
case FluText.BodyStrong:
return input.pixelSize * 1.0
case FluText.Body: case FluText.Body:
return input.pixelSize * 1.0 return text.pixelSize * 1.0
case FluText.BodyStrong:
return text.pixelSize * 1.0
case FluText.Caption: case FluText.Caption:
return input.pixelSize * 0.8 return text.pixelSize * 0.857
default: default:
return input.pixelSize * 1.0 return text.pixelSize * 1.0
} }
} }
selectByMouse: true selectByMouse: true

10
src/controls/FluToggleSwitch.qml
View File

@ -59,7 +59,7 @@ Button {
border.color: selected ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666" border.color: selected ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666"
Rectangle { Rectangle {
x: selected ? control_backgound.width - width - 4 : 4 x: selected ? control_backgound.width - width - 4 : 4
width: control.height - 8 width: pressed ? control.height - 6 : control.height - 8
height: control.height - 8 height: control.height - 8
radius: width / 2 radius: width / 2
antialiasing: true antialiasing: true
@ -68,20 +68,20 @@ Button {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: selected ? "#FFFFFF" : "#666666" color: selected ? "#FFFFFF" : "#666666"
Behavior on x { Behavior on x {
NumberAnimation { duration: 200 } NumberAnimation { duration: 150 }
}
Behavior on width {
NumberAnimation { duration: 150 }
} }
Behavior on scale { Behavior on scale {
NumberAnimation { duration: 150 } NumberAnimation { duration: 150 }
} }
} }
} }
FluText{ FluText{
text: control.text text: control.text
Layout.leftMargin: 5 Layout.leftMargin: 5
visible: text !== "" visible: text !== ""
} }
} }
} }

2
src/controls/FluTooltip.qml
View File

@ -9,7 +9,7 @@ ToolTip {
contentItem: FluText { contentItem: FluText {
text: tool_tip.text text: tool_tip.text
font: tool_tip.font font: tool_tip.font
fontStyle: FluText.BodyLarge fontStyle: FluText.Body
padding: 4 padding: 4
wrapMode: Text.WrapAnywhere wrapMode: Text.WrapAnywhere
} }

1
src/controls/FluTreeView.qml
View File

@ -267,7 +267,6 @@ Item {
id: list_root id: list_root
anchors.fill: parent anchors.fill: parent
delegate: delegate_root delegate: delegate_root
boundsBehavior: ListView.StopAtBounds
contentWidth: contentItem.childrenRect.width contentWidth: contentItem.childrenRect.width
model: tree_model model: tree_model
flickableDirection: Flickable.HorizontalAndVerticalFlick flickableDirection: Flickable.HorizontalAndVerticalFlick