diff --git a/README.md b/README.md index 6a5e6e3..b43e9f7 100644 --- a/README.md +++ b/README.md @@ -65,9 +65,9 @@ # 部分效果预览 -## 一个聊天Demo，调用了ChatGPT的接口 +## 首页 -![](doc/preview/chatgpt.png) +![](doc/preview/home.png) ## 各种Button按钮 diff --git a/example/T_Buttons.qml b/example/T_Buttons.qml index d79acc1..b9b29f5 100644 --- a/example/T_Buttons.qml +++ b/example/T_Buttons.qml @@ -27,7 +27,6 @@ FluScrollablePage{ disabled:text_button_switch.selected text:"Text Button" onClicked: { - console.debug(Screen.devicePixelRatio) showInfo("点击Text Button") } anchors{ diff --git a/example/T_CheckBox.qml b/example/T_CheckBox.qml index 37c1f83..7a45fd3 100644 --- a/example/T_CheckBox.qml +++ b/example/T_CheckBox.qml @@ -13,7 +13,11 @@ FluScrollablePage{ FluCheckBox{ Layout.topMargin: 20 - Layout.leftMargin: 10 - Layout.bottomMargin: 20 } + + FluCheckBox{ + Layout.topMargin: 20 + text:"Text" + } + } diff --git a/example/T_Home.qml b/example/T_Home.qml index f18b0bf..85acc2c 100644 --- a/example/T_Home.qml +++ b/example/T_Home.qml @@ -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 } diff --git a/example/T_Rectangle.qml b/example/T_Rectangle.qml index a67d168..63d120c 100644 --- a/example/T_Rectangle.qml +++ b/example/T_Rectangle.qml @@ -53,7 +53,7 @@ FluScrollablePage{ } FluText{ text:"配合图片使用" - fontStyle: FluText.Subtitle + fontStyle: FluText.SubTitle Layout.topMargin: 20 } RowLayout{ diff --git a/example/T_ToggleSwitch.qml b/example/T_ToggleSwitch.qml index ea40deb..85158c0 100644 --- a/example/T_ToggleSwitch.qml +++ b/example/T_ToggleSwitch.qml @@ -17,6 +17,6 @@ FluScrollablePage{ } FluToggleSwitch{ Layout.topMargin: 20 - text:"Disabled" + text:"Text" } } diff --git a/example/T_Typography.qml b/example/T_Typography.qml index 0468308..4e43ebf 100644 --- a/example/T_Typography.qml +++ b/example/T_Typography.qml @@ -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 } } diff --git a/example/page/AboutPage.qml b/example/page/AboutPage.qml index 5c2d970..85d0c87 100644 --- a/example/page/AboutPage.qml +++ b/example/page/AboutPage.qml @@ -35,7 +35,7 @@ FluWindow { fontStyle: FluText.Title } FluText{ - text:"v1.1.5" + text:"v1.1.6" fontStyle: FluText.Body Layout.alignment: Qt.AlignBottom } diff --git a/src/FluTheme.cpp b/src/FluTheme.cpp index debc141..ad8415a 100644 --- a/src/FluTheme.cpp +++ b/src/FluTheme.cpp @@ -17,7 +17,7 @@ FluTheme::FluTheme(QObject *parent) { primaryColor(FluColors::getInstance()->Blue()); textSize(13); - nativeText(false); + nativeText(true); frameless(true); dark(false); } diff --git a/src/controls/FluAppBar.qml b/src/controls/FluAppBar.qml index f0002d4..0439ee2 100644 --- a/src/controls/FluAppBar.qml +++ b/src/controls/FluAppBar.qml @@ -75,7 +75,6 @@ Rectangle{ FluText{ text:"夜间模式" color:root.textColor - fontStyle: FluText.Caption } FluToggleSwitch{ selected: FluTheme.dark diff --git a/src/controls/FluAutoSuggestBox.qml b/src/controls/FluAutoSuggestBox.qml index c704987..5c21ccb 100644 --- a/src/controls/FluAutoSuggestBox.qml +++ b/src/controls/FluAutoSuggestBox.qml @@ -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 {} diff --git a/src/controls/FluCheckBox.qml b/src/controls/FluCheckBox.qml index 162c499..3e93560 100644 --- a/src/controls/FluCheckBox.qml +++ b/src/controls/FluCheckBox.qml @@ -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 !== "" } } } diff --git a/src/controls/FluExpander.qml b/src/controls/FluExpander.qml index 11bb3d1..89b84a7 100644 --- a/src/controls/FluExpander.qml +++ b/src/controls/FluExpander.qml @@ -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 + } + } + } } - } diff --git a/src/controls/FluMultiLineTextBox.qml b/src/controls/FluMultiLineTextBox.qml index 4296d57..0d83a5a 100644 --- a/src/controls/FluMultiLineTextBox.qml +++ b/src/controls/FluMultiLineTextBox.qml @@ -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 } } diff --git a/src/controls/FluNavigationView.qml b/src/controls/FluNavigationView.qml index 8e23cad..e31a09f 100644 --- a/src/controls/FluNavigationView.qml +++ b/src/controls/FluNavigationView.qml @@ -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 diff --git a/src/controls/FluScrollablePage.qml b/src/controls/FluScrollablePage.qml index 0c8a2bb..125257f 100644 --- a/src/controls/FluScrollablePage.qml +++ b/src/controls/FluScrollablePage.qml @@ -43,7 +43,6 @@ Item { } contentWidth: parent.width contentHeight: container.height - boundsBehavior: Flickable.StopAtBounds ScrollBar.vertical: FluScrollBar { } anchors{ diff --git a/src/controls/FluTabView.qml b/src/controls/FluTabView.qml index 3eb40d6..c11eaab 100644 --- a/src/controls/FluTabView.qml +++ b/src/controls/FluTabView.qml @@ -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; } diff --git a/src/controls/FluText.qml b/src/controls/FluText.qml index eb07ca1..42ba3f4 100644 --- a/src/controls/FluText.qml +++ b/src/controls/FluText.qml @@ -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 } diff --git a/src/controls/FluTextBox.qml b/src/controls/FluTextBox.qml index 6628083..2cd2239 100644 --- a/src/controls/FluTextBox.qml +++ b/src/controls/FluTextBox.qml @@ -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 diff --git a/src/controls/FluToggleSwitch.qml b/src/controls/FluToggleSwitch.qml index 443a716..7bb357c 100644 --- a/src/controls/FluToggleSwitch.qml +++ b/src/controls/FluToggleSwitch.qml @@ -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 !== "" } - } - } diff --git a/src/controls/FluTooltip.qml b/src/controls/FluTooltip.qml index 6522065..5f2b740 100644 --- a/src/controls/FluTooltip.qml +++ b/src/controls/FluTooltip.qml @@ -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 } diff --git a/src/controls/FluTreeView.qml b/src/controls/FluTreeView.qml index 431b895..32a1eef 100644 --- a/src/controls/FluTreeView.qml +++ b/src/controls/FluTreeView.qml @@ -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