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

update

Browse Source
This commit is contained in:
朱子楚\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按钮

1
example/T_Buttons.qml
View File

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

8
example/T_CheckBox.qml
View File

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

26
example/T_Home.qml
View File

@ -56,7 +56,6 @@ FluScrollablePage{
bottom: parent.bottom
}
orientation: ListView.Horizontal
boundsBehavior: ListView.StopAtBounds
height: 240
model: model_header
header: Item{height: 10;width: 10}
@ -101,7 +100,7 @@ FluScrollablePage{
}
FluText{
text: model.title
fontStyle: FluText.BodyLarge
fontStyle: FluText.Body
Layout.topMargin: 20
Layout.leftMargin: 20
}
@ -110,7 +109,7 @@ FluScrollablePage{
Layout.topMargin: 5
Layout.preferredWidth: 160
Layout.leftMargin: 20
color: FluColors.Grey100
color: FluColors.Grey120
font.pixelSize: 12
wrapMode: Text.WrapAnywhere
}
@ -161,22 +160,22 @@ FluScrollablePage{
ListElement{
title:"Buttons"
icon:"qrc:/res/image/control/Button.png"
desc:"A control that responds to user input and raisesa Click event."
desc:"A control that responds to user input and raisesa Click event."
}
ListElement{
title:"InfoBar"
icon:"qrc:/res/image/control/InfoBar.png"
desc:"An inline message to display app-wide statuschange information."
desc:"An inline message to display app-wide statuschange information."
}
ListElement{
title:"Slider"
icon:"qrc:/res/image/control/Slider.png"
desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
}
ListElement{
title:"CheckBox"
icon:"qrc:/res/image/control/Checkbox.png"
desc:"A control that a user can select or clear."
desc:"A control that a user can select or clear."
}
}
@ -222,7 +221,7 @@ FluScrollablePage{
FluText{
id:item_title
text:model.title
fontStyle: FluText.Subtitle
fontStyle: FluText.BodyStrong
anchors{
left: item_icon.right
leftMargin: 20
@ -233,9 +232,10 @@ FluScrollablePage{
FluText{
id:item_desc
text:model.desc
color:FluColors.Grey100
color:FluColors.Grey120
wrapMode: Text.WrapAnywhere
elide: Text.ElideRight
fontStyle: FluText.Caption
maximumLineCount: 2
anchors{
left: item_title.left
@ -260,7 +260,7 @@ FluScrollablePage{
FluText{
text: "Recently added samples"
fontStyle: FluText.TitleLarge
fontStyle: FluText.Title
Layout.topMargin: 20
Layout.leftMargin: 20
}
@ -270,14 +270,14 @@ FluScrollablePage{
implicitHeight: contentHeight
cellHeight: 120
cellWidth: 320
boundsBehavior: GridView.StopAtBounds
model:model_added
interactive: false
delegate: com_item
}
FluText{
text: "Recently updated samples"
fontStyle: FluText.TitleLarge
fontStyle: FluText.Title
Layout.topMargin: 20
Layout.leftMargin: 20
}
@ -287,7 +287,7 @@ FluScrollablePage{
implicitHeight: contentHeight
cellHeight: 120
cellWidth: 320
boundsBehavior: GridView.StopAtBounds
interactive: false
model: model_update
delegate: com_item
}

2
example/T_Rectangle.qml
View File

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

2
example/T_ToggleSwitch.qml
View File

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

14
example/T_Typography.qml
View File

@ -6,13 +6,13 @@ import FluentUI 1.0
FluContentPage {
title: "Typography"
property int textSize: 13
property int textSize: FluTheme.textSize
leftPadding:10
rightPadding:10
bottomPadding:20
Component.onCompleted: {
slider.seek(31)
slider.seek(0)
}
ScrollView{
@ -44,13 +44,7 @@ FluContentPage {
text:"Subtitle"
padding: 0
pixelSize: textSize
fontStyle: FluText.Subtitle
}
FluText{
text:"Body Large"
padding: 0
pixelSize: textSize
fontStyle: FluText.BodyLarge
fontStyle: FluText.SubTitle
}
FluText{
text:"Body Strong"
@ -84,7 +78,7 @@ FluContentPage {
topMargin: 30
}
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
}
FluText{
text:"v1.1.5"
text:"v1.1.6"
fontStyle: FluText.Body
Layout.alignment: Qt.AlignBottom
}

2
src/FluTheme.cpp
View File

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

1
src/controls/FluAppBar.qml
View File

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

33
src/controls/FluAutoSuggestBox.qml
View File

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

14
src/controls/FluCheckBox.qml
View File

@ -73,16 +73,28 @@ Button {
}
return normalColor
}
Behavior on color {
ColorAnimation{
duration: 150
}
}
FluIcon {
anchors.centerIn: parent
iconSource: FluentIcons.AcceptMedium
iconSize: 15
visible: selected
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on visible {
NumberAnimation{
duration: 150
}
}
}
}
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){
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: {
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
case FluText.Title:
return true
case FluText.Subtitle:
case FluText.SubTitle:
return true
case FluText.BodyLarge:
return false
case FluText.BodyStrong:
return true
case FluText.Body:
@ -61,27 +59,24 @@ TextArea{
return false
}
}
font.pixelSize: {
switch (fontStyle) {
case FluText.Display:
return input.pixelSize * 4
return text.pixelSize * 4.857
case FluText.TitleLarge:
return input.pixelSize * 2
return text.pixelSize * 2.857
case FluText.Title:
return input.pixelSize * 1.5
case FluText.Subtitle:
return input.pixelSize * 0.9
case FluText.BodyLarge:
return input.pixelSize * 1.1
case FluText.BodyStrong:
return input.pixelSize * 1.0
return text.pixelSize * 2
case FluText.SubTitle:
return text.pixelSize * 1.428
case FluText.Body:
return input.pixelSize * 1.0
return text.pixelSize * 1.0
case FluText.BodyStrong:
return text.pixelSize * 1.0
case FluText.Caption:
return input.pixelSize * 0.8
return text.pixelSize * 0.857
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
}
}
boundsBehavior: ListView.StopAtBounds
delegate: Loader{
property var model: modelData
property var position: index
@ -386,7 +385,6 @@ Item {
width: layout_list.width
height: childrenRect.height
anchors.bottom: parent.bottom
boundsBehavior: ListView.StopAtBounds
model: {
if(footerItems){
return footerItems.children

1
src/controls/FluScrollablePage.qml
View File

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

6
src/controls/FluTabView.qml
View File

@ -47,7 +47,6 @@ Item {
orientation: ListView.Horizontal
width: parent.width
interactive: false
boundsBehavior: ListView.StopAtBounds
model: tab_model
move: Transition {
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 firstIdx = tab_nav.indexAt(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)
d.dragIndex = idx;
}

25
src/controls/FluText.qml
View File

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

26
src/controls/FluTextBox.qml
View File

@ -42,10 +42,8 @@ TextField{
return true
case FluText.Title:
return true
case FluText.Subtitle:
case FluText.SubTitle:
return true
case FluText.BodyLarge:
return false
case FluText.BodyStrong:
return true
case FluText.Body:
@ -59,23 +57,21 @@ TextField{
font.pixelSize: {
switch (fontStyle) {
case FluText.Display:
return input.pixelSize * 4
return text.pixelSize * 4.857
case FluText.TitleLarge:
return input.pixelSize * 2
return text.pixelSize * 2.857
case FluText.Title:
return input.pixelSize * 1.5
case FluText.Subtitle:
return input.pixelSize * 0.9
case FluText.BodyLarge:
return input.pixelSize * 1.1
case FluText.BodyStrong:
return input.pixelSize * 1.0
return text.pixelSize * 2
case FluText.SubTitle:
return text.pixelSize * 1.428
case FluText.Body:
return input.pixelSize * 1.0
return text.pixelSize * 1.0
case FluText.BodyStrong:
return text.pixelSize * 1.0
case FluText.Caption:
return input.pixelSize * 0.8
return text.pixelSize * 0.857
default:
return input.pixelSize * 1.0
return text.pixelSize * 1.0
}
}
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"
Rectangle {
x: selected ? control_backgound.width - width - 4 : 4
width: control.height - 8
width: pressed ? control.height - 6 : control.height - 8
height: control.height - 8
radius: width / 2
antialiasing: true
@ -68,20 +68,20 @@ Button {
anchors.verticalCenter: parent.verticalCenter
color: selected ? "#FFFFFF" : "#666666"
Behavior on x {
NumberAnimation { duration: 200 }
NumberAnimation { duration: 150 }
}
Behavior on width {
NumberAnimation { duration: 150 }
}
Behavior on scale {
NumberAnimation { duration: 150 }
}
}
}
FluText{
text: control.text
Layout.leftMargin: 5
visible: text !== ""
}
}
}

2
src/controls/FluTooltip.qml
View File

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

1
src/controls/FluTreeView.qml
View File

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