This commit is contained in:
朱子楚\zhuzi 2023-03-09 23:11:59 +08:00
parent e2cefb6114
commit 0867043d7a
17 changed files with 231 additions and 30 deletions

View File

@ -11,7 +11,7 @@ FluWindow {
width: 800 width: 800
height: 600 height: 600
title: "FluentUI" title: "FluentUI"
minimumWidth: 600 minimumWidth: 500
minimumHeight: 400 minimumHeight: 400
FluAppBar{ FluAppBar{
@ -123,7 +123,6 @@ FluWindow {
height: 38 height: 38
width: nav_list.width width: nav_list.width
Rectangle{ Rectangle{
radius: 4 radius: 4
anchors{ anchors{
@ -167,7 +166,6 @@ FluWindow {
FluText{ FluText{
text:model.text text:model.text
anchors.centerIn: parent anchors.centerIn: parent
fontStyle: FluText.Caption
} }
} }

View File

@ -108,7 +108,7 @@ Item {
delegate: FluRadioButton{ delegate: FluRadioButton{
checked : repeater.selecIndex===index checked : repeater.selecIndex===index
disabled:radio_button_switch.checked disabled:radio_button_switch.checked
text:"RodioButton_"+index text:"Radio Button_"+index
onClicked:{ onClicked:{
repeater.selecIndex = index repeater.selecIndex = index
} }

View File

@ -43,7 +43,7 @@ Item {
model: 3 model: 3
delegate: FluRadioButton{ delegate: FluRadioButton{
checked : repeater.selecIndex===index checked : repeater.selecIndex===index
text:"RodioButton_"+index text:"Radio Button_"+index
onClicked:{ onClicked:{
repeater.selecIndex = index repeater.selecIndex = index
} }

View File

@ -4,11 +4,15 @@ import QtQuick.Controls 2.15
import FluentUI 1.0 import FluentUI 1.0
Item { Item {
property int textSize: 13
FluText{ FluText{
id:title id:title
text:"Typography" text:"Typography"
fontStyle: FluText.TitleLarge fontStyle: FluText.TitleLarge
} }
ScrollView{ ScrollView{
clip: true clip: true
width: parent.width width: parent.width
@ -18,40 +22,72 @@ Item {
bottom: parent.bottom bottom: parent.bottom
} }
ColumnLayout{ ColumnLayout{
spacing: 5 spacing: 0
FluText{ FluText{
text:"Display" text:"Display"
Layout.topMargin: 20 Layout.topMargin: 20
padding: 0
pixelSize: textSize
fontStyle: FluText.Display fontStyle: FluText.Display
} }
FluText{ FluText{
text:"Title Large" text:"Title Large"
padding: 0
pixelSize: textSize
fontStyle: FluText.TitleLarge fontStyle: FluText.TitleLarge
} }
FluText{ FluText{
text:"Title" text:"Title"
padding: 0
pixelSize: textSize
fontStyle: FluText.Title fontStyle: FluText.Title
} }
FluText{ FluText{
text:"Subtitle" text:"Subtitle"
padding: 0
pixelSize: textSize
fontStyle: FluText.Subtitle fontStyle: FluText.Subtitle
} }
FluText{ FluText{
text:"Body Large" text:"Body Large"
padding: 0
pixelSize: textSize
fontStyle: FluText.BodyLarge fontStyle: FluText.BodyLarge
} }
FluText{ FluText{
text:"Body Strong" text:"Body Strong"
padding: 0
pixelSize: textSize
fontStyle: FluText.BodyStrong fontStyle: FluText.BodyStrong
} }
FluText{ FluText{
text:"Body" text:"Body"
padding: 0
pixelSize: textSize
fontStyle: FluText.Body fontStyle: FluText.Body
} }
FluText{ FluText{
text:"Caption" text:"Caption"
padding: 0
pixelSize: textSize
fontStyle: FluText.Caption fontStyle: FluText.Caption
} }
} }
} }
FluSlider{
orientation:FluSlider.Vertical
anchors{
right: parent.right
rightMargin: 30
top: parent.top
topMargin: 30
}
onValueChanged:{
textSize = value/100*16+8
}
value: 31
}
} }

View File

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

View File

@ -11,6 +11,7 @@ class FluTheme : public QObject
Q_PROPERTY_AUTO(FluColorSet*,primaryColor) Q_PROPERTY_AUTO(FluColorSet*,primaryColor)
Q_PROPERTY_AUTO(bool,isFrameless); Q_PROPERTY_AUTO(bool,isFrameless);
Q_PROPERTY_AUTO(bool,isDark); Q_PROPERTY_AUTO(bool,isDark);
Q_PROPERTY_AUTO(int,textSize);
public: public:
explicit FluTheme(QObject *parent = nullptr); explicit FluTheme(QObject *parent = nullptr);
static FluTheme *getInstance(); static FluTheme *getInstance();

View File

@ -73,9 +73,12 @@ void Fluent::initializeEngine(QQmlEngine *engine, const char *uri)
{ {
Q_UNUSED(engine) Q_UNUSED(engine)
Q_UNUSED(uri) Q_UNUSED(uri)
#ifdef Q_OS_WIN
QFont font; QFont font;
font.setFamily("Microsoft YaHei"); font.setFamily("Microsoft YaHei");
QGuiApplication::setFont(font); QGuiApplication::setFont(font);
QQuickWindow::setTextRenderType(QQuickWindow::NativeTextRendering);
#endif
QFontDatabase::addApplicationFont(":/com.zhuzichu/res/font/fontawesome-webfont.ttf"); QFontDatabase::addApplicationFont(":/com.zhuzichu/res/font/fontawesome-webfont.ttf");
FluApp* app = FluApp::getInstance(); FluApp* app = FluApp::getInstance();
engine->rootContext()->setContextProperty("FluApp",app); engine->rootContext()->setContextProperty("FluApp",app);

View File

@ -3,9 +3,13 @@ import QtQuick.Controls 2.15
import FluentUI 1.0 import FluentUI 1.0
TextField{ TextField{
property var values:[]
property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize
id:input id:input
width: 300 width: 300
property var values:[]
color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
selectionColor: { selectionColor: {
if(FluTheme.isDark){ if(FluTheme.isDark){
@ -14,9 +18,58 @@ TextField{
return FluTheme.primaryColor.dark return FluTheme.primaryColor.dark
} }
} }
placeholderTextColor: {
if(focus){
return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
}
return FluTheme.isDark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
}
rightPadding: 30 rightPadding: 30
selectByMouse: true selectByMouse: true
font.bold: {
switch (fontStyle) {
case FluText.Display:
return true
case FluText.TitleLarge:
return true
case FluText.Title:
return true
case FluText.Subtitle:
return true
case FluText.BodyLarge:
return false
case FluText.BodyStrong:
return true
case FluText.Body:
return false
case FluText.Caption:
return false
default:
return false
}
}
font.pixelSize: {
switch (fontStyle) {
case FluText.Display:
return input.pixelSize * 4
case FluText.TitleLarge:
return input.pixelSize * 2
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
case FluText.Body:
return input.pixelSize * 1.0
case FluText.Caption:
return input.pixelSize * 0.8
default:
return input.pixelSize * 1.0
}
}
background: FluTextBoxBackground{ background: FluTextBoxBackground{
inputItem: input inputItem: input
@ -72,7 +125,7 @@ TextField{
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
left: parent.left left: parent.left
leftMargin: 15 leftMargin: 10
} }
} }
} }
@ -84,8 +137,6 @@ TextField{
anchors.fill: parent anchors.fill: parent
anchors.topMargin: 2 anchors.topMargin: 2
anchors.bottomMargin: 2 anchors.bottomMargin: 2
anchors.leftMargin: 5
anchors.rightMargin: 5
color: { color: {
if(item_mouse.containsMouse){ if(item_mouse.containsMouse){
return FluTheme.isDark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(234/255,234/255,234/255,1) return FluTheme.isDark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(234/255,234/255,234/255,1)

View File

@ -37,7 +37,6 @@ Rectangle {
FluText { FluText {
id: button_text id: button_text
text: button.text text: button.text
font.pixelSize: 14
leftPadding: button.startPadding leftPadding: button.startPadding
rightPadding: button.endPadding rightPadding: button.endPadding
topPadding: button.topPadding topPadding: button.topPadding

View File

@ -32,8 +32,8 @@ Item {
RowLayout{ RowLayout{
spacing: 4 spacing: 4
Rectangle{ Rectangle{
width: 22 width: 20
height: 22 height: 20
radius: 4 radius: 4
border.color: { border.color: {
if(disabled){ if(disabled){

View File

@ -18,7 +18,7 @@ Item {
Rectangle{ Rectangle{
id:layout_header id:layout_header
width: parent.width width: parent.width
height: 50 height: 45
radius: 4 radius: 4
border.color: FluTheme.isDark ? Qt.rgba(53/255,53/255,53/255,1) : Qt.rgba(240/255,240/255,240/255,1) border.color: FluTheme.isDark ? Qt.rgba(53/255,53/255,53/255,1) : Qt.rgba(240/255,240/255,240/255,1)
color: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1) color: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)

View File

@ -3,6 +3,10 @@ import QtQuick.Controls 2.15
import FluentUI 1.0 import FluentUI 1.0
TextArea{ TextArea{
property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize
id:input id:input
width: 300 width: 300
color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
@ -18,5 +22,57 @@ TextArea{
background: FluTextBoxBackground{ background: FluTextBoxBackground{
inputItem: input inputItem: input
} }
placeholderTextColor: {
if(focus){
return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
}
return FluTheme.isDark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
}
font.bold: {
switch (fontStyle) {
case FluText.Display:
return true
case FluText.TitleLarge:
return true
case FluText.Title:
return true
case FluText.Subtitle:
return true
case FluText.BodyLarge:
return false
case FluText.BodyStrong:
return true
case FluText.Body:
return false
case FluText.Caption:
return false
default:
return false
}
}
font.pixelSize: {
switch (fontStyle) {
case FluText.Display:
return input.pixelSize * 4
case FluText.TitleLarge:
return input.pixelSize * 2
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
case FluText.Body:
return input.pixelSize * 1.0
case FluText.Caption:
return input.pixelSize * 0.8
default:
return input.pixelSize * 1.0
}
}
} }

View File

@ -6,8 +6,10 @@ Item{
id:root id:root
property int lineWidth: 5 property int lineSize: 5
property int size: 180
property int dotSize: 26 property int dotSize: 26
property int value: 50 property int value: 50
enum Orientation { enum Orientation {
@ -22,6 +24,8 @@ Item{
property bool isHorizontal: orientation === FluSlider.Horizontal property bool isHorizontal: orientation === FluSlider.Horizontal
rotation: isHorizontal ? 0 : 180
Component.onCompleted: { Component.onCompleted: {
if(isHorizontal){ if(isHorizontal){
dot.x =value/100*control.width - dotSize/2 dot.x =value/100*control.width - dotSize/2
@ -38,8 +42,8 @@ Item{
FluRectangle { FluRectangle {
id: control id: control
width: isHorizontal ? 200 : root.lineWidth width: isHorizontal ? size : root.lineSize
height: isHorizontal ? root.lineWidth : 200 height: isHorizontal ? root.lineSize : size
radius: [3,3,3,3] radius: [3,3,3,3]
clip: true clip: true
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -101,6 +105,7 @@ Item{
FluTooltip{ FluTooltip{
id:tool_tip id:tool_tip
text:String(root.value) text:String(root.value)
y: isHorizontal ? -40 : 32
} }
} }

View File

@ -3,7 +3,9 @@ import FluentUI 1.0
Text { Text {
id:text property int fontStyle: FluText.Body
property color textColor: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
property int pixelSize : FluTheme.textSize
enum FontStyle { enum FontStyle {
Display, Display,
@ -16,12 +18,8 @@ Text {
Caption Caption
} }
property int fontStyle: FluText.Body id:text
property color textColor: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
property int pixelSize : 14
color: textColor color: textColor
font.bold: { font.bold: {
switch (fontStyle) { switch (fontStyle) {
case FluText.Display: case FluText.Display:
@ -44,7 +42,6 @@ Text {
return false return false
} }
} }
font.pixelSize: { font.pixelSize: {
switch (fontStyle) { switch (fontStyle) {
case FluText.Display: case FluText.Display:
@ -68,5 +65,4 @@ Text {
} }
} }
} }

View File

@ -3,6 +3,10 @@ import QtQuick.Controls 2.15
import FluentUI 1.0 import FluentUI 1.0
TextField{ TextField{
property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize
id:input id:input
width: 300 width: 300
color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
@ -13,6 +17,56 @@ TextField{
return FluTheme.primaryColor.dark return FluTheme.primaryColor.dark
} }
} }
placeholderTextColor: {
if(focus){
return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
}
return FluTheme.isDark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
}
font.bold: {
switch (fontStyle) {
case FluText.Display:
return true
case FluText.TitleLarge:
return true
case FluText.Title:
return true
case FluText.Subtitle:
return true
case FluText.BodyLarge:
return false
case FluText.BodyStrong:
return true
case FluText.Body:
return false
case FluText.Caption:
return false
default:
return false
}
}
font.pixelSize: {
switch (fontStyle) {
case FluText.Display:
return input.pixelSize * 4
case FluText.TitleLarge:
return input.pixelSize * 2
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
case FluText.Body:
return input.pixelSize * 1.0
case FluText.Caption:
return input.pixelSize * 0.8
default:
return input.pixelSize * 1.0
}
}
selectByMouse: true selectByMouse: true
background: FluTextBoxBackground{ background: FluTextBoxBackground{
inputItem: input inputItem: input

View File

@ -9,6 +9,9 @@ Rectangle{
radius: 4 radius: 4
layer.enabled: true layer.enabled: true
color: { color: {
if(input.focus){
return FluTheme.isDark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
}
if(input.hovered){ if(input.hovered){
return FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1) return FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
} }

View File

@ -198,8 +198,6 @@ Rectangle {
} }
} }
} }
} }
checkClicked:function(){ checkClicked:function(){
@ -239,8 +237,8 @@ Rectangle {
FluText { FluText {
text: item_layout.text text: item_layout.text
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
topPadding: 10 topPadding: 7
bottomPadding: 10 bottomPadding: 7
} }
} }
} }