update
朱子楚\zhuzi
parent
a33a63abc9
commit
5a1b10fef8
|
|
@ -65,9 +65,9 @@
|
|||
|
||||
# 部分效果预览
|
||||
|
||||
## 一个聊天Demo，调用了ChatGPT的接口
|
||||
## 首页
|
||||
|
||||
|
||||
|
||||
|
||||
## 各种Button按钮
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@ FluScrollablePage{
|
|||
disabled:text_button_switch.selected
|
||||
text:"Text Button"
|
||||
onClicked: {
|
||||
console.debug(Screen.devicePixelRatio)
|
||||
showInfo("点击Text Button")
|
||||
}
|
||||
anchors{
|
||||
|
|
|
|||
|
|
@ -13,7 +13,11 @@ FluScrollablePage{
|
|||
|
||||
FluCheckBox{
|
||||
Layout.topMargin: 20
|
||||
Layout.leftMargin: 10
|
||||
Layout.bottomMargin: 20
|
||||
}
|
||||
|
||||
FluCheckBox{
|
||||
Layout.topMargin: 20
|
||||
text:"Text"
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ FluScrollablePage{
|
|||
}
|
||||
FluText{
|
||||
text:"配合图片使用"
|
||||
fontStyle: FluText.Subtitle
|
||||
fontStyle: FluText.SubTitle
|
||||
Layout.topMargin: 20
|
||||
}
|
||||
RowLayout{
|
||||
|
|
|
|||
|
|
@ -17,6 +17,6 @@ FluScrollablePage{
|
|||
}
|
||||
FluToggleSwitch{
|
||||
Layout.topMargin: 20
|
||||
text:"Disabled"
|
||||
text:"Text"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ FluWindow {
|
|||
fontStyle: FluText.Title
|
||||
}
|
||||
FluText{
|
||||
text:"v1.1.5"
|
||||
text:"v1.1.6"
|
||||
fontStyle: FluText.Body
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ FluTheme::FluTheme(QObject *parent)
|
|||
{
|
||||
primaryColor(FluColors::getInstance()->Blue());
|
||||
textSize(13);
|
||||
nativeText(false);
|
||||
nativeText(true);
|
||||
frameless(true);
|
||||
dark(false);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,7 +75,6 @@ Rectangle{
|
|||
FluText{
|
||||
text:"夜间模式"
|
||||
color:root.textColor
|
||||
fontStyle: FluText.Caption
|
||||
}
|
||||
FluToggleSwitch{
|
||||
selected: FluTheme.dark
|
||||
|
|
|
|||
|
|
@ -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 {}
|
||||
|
|
|
|||
|
|
@ -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 !== ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@ Item {
|
|||
}
|
||||
contentWidth: parent.width
|
||||
contentHeight: container.height
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
ScrollBar.vertical: FluScrollBar {
|
||||
}
|
||||
anchors{
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 !== ""
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue