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

update

main
朱子楚\zhuzi 2023-03-12 14:26:03 +08:00
parent 5bb8f27968
commit 0cf3f2aa22
17 changed files with 836 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
example/MainPage.qml
View File

@ -66,6 +66,13 @@ FluWindow {
}
}
FluPaneItem{
title:"DatePicker"
onTap:{
nav_view.push("qrc:/T_DatePicker.qml")
}
}
FluPaneItemHeader{
title:"Surface"
}

6
example/T_Buttons.qml
View File

@ -9,8 +9,12 @@ FluScrollablePage{
spacing: 20
FluText{
Layout.topMargin: 20
text:"支持Tab键切换焦点，Enter键执行点击事件"
}
FluArea{
Layout.topMargin: 20
width: parent.width
height: 68
paddings: 10

61
example/T_DatePicker.qml Normal file
View File

@ -0,0 +1,61 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import FluentUI 1.0
FluScrollablePage{
title:"TimePicker"
FluArea{
width: parent.width
Layout.topMargin: 20
height: 80
paddings: 10
ColumnLayout{
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
FluText{
text:"showYear=true"
}
FluDatePicker{
}
}
}
FluArea{
width: parent.width
Layout.topMargin: 20
height: 80
paddings: 10
ColumnLayout{
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
FluText{
text:"showYear=false"
}
FluDatePicker{
showYear:false
}
}
}
}

1
example/qml.qrc
View File

@ -31,5 +31,6 @@
<file>T_Expander.qml</file>
<file>MainPage.qml</file>
<file>T_TimePicker.qml</file>
<file>T_DatePicker.qml</file>
</qresource>
</RCC>

93
src/controls/FluAutoSuggestBox.qml
View File

@ -29,6 +29,20 @@ TextField{
}
rightPadding: icon_right.visible ? 50 : 30
selectByMouse: true
Keys.onUpPressed: {
list_view.currentIndex = Math.max(list_view.currentIndex-1,0)
}
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:
@ -118,6 +132,11 @@ TextField{
onClosed: {
input.focus = false
}
onVisibleChanged: {
if(visible){
list_view.currentIndex = -1
}
}
background: Rectangle{
width: input.width
radius: 4
@ -132,6 +151,7 @@ TextField{
anchors.fill: parent
boundsBehavior: ListView.StopAtBounds
clip: true
currentIndex: -1
header: Item{
width: input.width
height: visible ? 38 : 0
@ -146,42 +166,81 @@ TextField{
}
}
ScrollBar.vertical: ScrollBar { }
delegate: Item{
height: 38
delegate:Control{
width: input.width
Rectangle{
anchors.fill: parent
anchors.topMargin: 2
anchors.bottomMargin: 2
anchors.leftMargin: 5
anchors.rightMargin: 5
padding:10
background: Rectangle{
color: {
if(item_mouse.containsMouse){
if(list_view.currentIndex === index){
return FluTheme.isDark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
}
if(hovered){
return FluTheme.isDark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
}
return FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
}
radius: 3
MouseArea{
id:item_mouse
id:mouse_area
anchors.fill: parent
hoverEnabled: true
onClicked: {
Connections{
target: input
function onHandleClicked(){
if((list_view.currentIndex === index)){
mouse_area.handleClick()
}
}
}
onClicked: handleClick()
function handleClick(){
input_popup.close()
input.itemClicked(modelData)
input.text = modelData
}
}
FluText{
text:modelData
Rectangle{
width: 3
color:FluTheme.primaryColor.dark
visible: list_view.currentIndex === index
radius: 3
height: 20
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: 10
verticalCenter: parent.verticalCenter
}
}
}
contentItem: FluText{
text:modelData
anchors{
verticalCenter: parent.verticalCenter
}
}
}
// Item{
// height: 38
// width: input.width
// Rectangle{
// anchors.fill: parent
// anchors.topMargin: 2
// anchors.bottomMargin: 2
// anchors.leftMargin: 5
// anchors.rightMargin: 5
// radius: 3
// MouseArea{
// id:item_mouse
// anchors.fill: parent
// hoverEnabled: true
// onClicked: {
// input_popup.close()
// input.itemClicked(modelData)
// input.text = modelData
// }
// }
// }
// }
}
}
}

88
src/controls/FluButton.qml
View File

@ -1,47 +1,62 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
Rectangle {
id: button
Control {
id: control
property string text: "Standard Button"
property int startPadding : 15
property int endPadding : 15
property int topPadding: 5
property int bottomPadding: 5
property bool disabled: false
property color primaryColor : "#0064B0"
signal clicked
radius: 4
color:{
if(FluTheme.isDark){
property color normalColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
signal clicked
topPadding:5
bottomPadding:5
leftPadding:15
rightPadding:15
focusPolicy:Qt.TabFocus
Keys.onEnterPressed:(visualFocus&&handleClick())
Keys.onReturnPressed:(visualFocus&&handleClick())
MouseArea {
anchors.fill: parent
onClicked: handleClick()
}
function handleClick(){
if(disabled){
return
}
control.clicked()
}
background: Rectangle{
border.color: FluTheme.isDark ? "#505050" : "#DFDFDF"
border.width: 1
radius: 4
FluFocusRectangle{
visible: control.visualFocus
radius:8
}
color:{
if(disabled){
return Qt.rgba(59/255,59/255,59/255,1)
return disableColor
}
return button_mouse.containsMouse ? "#444444" : "#3e3e3e"
}else{
if(disabled){
return Qt.rgba(252/255,252/255,252/255,1)
}
return button_mouse.containsMouse ? "#FBFBFB" : "#FFFFFF"
return hovered ? hoverColor :normalColor
}
}
width: button_text.implicitWidth
height: button_text.implicitHeight
border.color: FluTheme.isDark ? "#505050" : "#DFDFDF"
border.width: 1
FluText {
id: button_text
text: button.text
leftPadding: button.startPadding
rightPadding: button.endPadding
topPadding: button.topPadding
bottomPadding: button.bottomPadding
contentItem: FluText {
text: control.text
anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: {
if(FluTheme.isDark){
if(disabled){
@ -57,15 +72,4 @@ Rectangle {
}
}
MouseArea {
id:button_mouse
anchors.fill: parent
hoverEnabled: true
onClicked: {
if(disabled){
return
}
button.clicked()
}
}
}

56
src/controls/FluCheckBox.qml
View File

@ -1,20 +1,17 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import FluentUI 1.0
Item {
Control {
id:root
id:control
property bool checked: false
property string text: "Check Box"
property var checkClicked
property bool hovered: mouse_area.containsMouse
property bool disabled: false
width: childrenRect.width
height: childrenRect.height
property color borderNormalColor: FluTheme.isDark ? Qt.rgba(160/255,160/255,160/255,1) : Qt.rgba(136/255,136/255,136/255,1)
property color borderCheckedColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color borderHoverColor: FluTheme.isDark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1)
@ -26,10 +23,36 @@ Item {
property color checkedHoverColor: FluTheme.isDark ? Qt.darker(checkedColor,1.1) : Qt.lighter(checkedColor,1.1)
property color checkedDisableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
property color disableColor: FluTheme.isDark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
RowLayout{
focusPolicy:Qt.TabFocus
Keys.onEnterPressed:(visualFocus&&handleClick())
Keys.onReturnPressed:(visualFocus&&handleClick())
MouseArea {
anchors.fill: parent
onClicked: handleClick()
}
function handleClick(){
if(disabled){
return
}
if(checkClicked){
checkClicked()
return
}
checked = !checked
}
background: Item{
FluFocusRectangle{
visible: control.visualFocus
}
}
contentItem: RowLayout{
spacing: 4
Rectangle{
width: 20
@ -73,22 +96,7 @@ Item {
}
}
FluText{
text:root.text
}
}
MouseArea{
id:mouse_area
anchors.fill: parent
hoverEnabled: true
enabled: !disabled
onClicked: {
if(checkClicked){
checkClicked()
return
}
checked = !checked
text:control.text
}
}

396
src/controls/FluDatePicker.qml
View File

@ -1,5 +1,397 @@
import QtQuick 2.15
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import FluentUI 1.0
Rectangle {
id:root
property color dividerColor: FluTheme.isDark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color normalColor: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property var window : Window.window
property bool showYear: true
color: {
if(mouse_area.containsMouse){
return hoverColor
}
return normalColor
}
height: 30
width: 300
radius: 4
border.width: 1
border.color: dividerColor
MouseArea{
id:mouse_area
hoverEnabled: true
anchors.fill: parent
onClicked: {
popup.showPopup()
}
}
Rectangle{
id:divider_1
width: 1
x: parent.width/3
height: parent.height
color: dividerColor
visible: showYear
}
Rectangle{
id:divider_2
width: 1
x: showYear ? parent.width*2/3 : parent.width/2
height: parent.height
color: dividerColor
}
FluText{
id:text_year
anchors{
left: parent.left
right: divider_1.left
top: parent.top
bottom: parent.bottom
}
visible: showYear
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text:"年"
}
FluText{
id:text_month
anchors{
left: showYear ? divider_1.right : parent.left
right: divider_2.left
top: parent.top
bottom: parent.bottom
}
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text:"月"
}
FluText{
id:text_day
anchors{
left: divider_2.right
right: parent.right
top: parent.top
bottom: parent.bottom
}
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text:"日"
}
Popup{
id:popup
background: Rectangle{
width: 300
radius: 4
color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
height: 340
MouseArea{
anchors.fill: parent
}
FluShadow{
radius: 4
}
RowLayout{
id:layout_content
spacing: 0
width: parent.width
height: 300
Component{
id:list_delegate
Item{
height:38
width:getListView().width
function getListView(){
if(type === 0)
return list_view_1
if(type === 1)
return list_view_2
if(type === 2)
return list_view_3
}
Rectangle{
anchors.fill: parent
anchors.topMargin: 2
anchors.bottomMargin: 2
anchors.leftMargin: 5
anchors.rightMargin: 5
color: {
if(getListView().currentIndex === position){
if(FluTheme.isDark){
return item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor.lighter,1.1) : FluTheme.primaryColor.lighter
}else{
return item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor.dark,1.1): FluTheme.primaryColor.dark
}
}
if(item_mouse.containsMouse){
return FluTheme.isDark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
}
return FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
}
radius: 3
MouseArea{
id:item_mouse
anchors.fill: parent
hoverEnabled: true
onClicked: {
getListView().currentIndex = position
if(type === 0){
text_year.text = model
list_view_2.model = generateMonthArray(1,12)
text_month.text = list_view_2.model[list_view_2.currentIndex]
list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex])
text_day.text = list_view_3.model[list_view_3.currentIndex]
}
if(type === 1){
text_month.text = model
list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex])
text_day.text = list_view_3.model[list_view_3.currentIndex]
}
if(type === 2){
text_day.text = model
}
}
}
FluText{
text:model
color: {
if(getListView().currentIndex === position){
if(FluTheme.isDark){
return Qt.rgba(0,0,0,1)
}else{
return Qt.rgba(1,1,1,1)
}
}else{
return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
}
}
anchors.centerIn: parent
}
}
}
}
ListView{
id:list_view_1
width: 100
height: parent.height
boundsBehavior:Flickable.StopAtBounds
ScrollBar.vertical: ScrollBar { }
model: generateYearArray(1924,2048)
clip: true
visible: showYear
delegate: Loader{
property var model: modelData
property int type:0
property int position:index
sourceComponent: list_delegate
}
onCurrentIndexChanged: {
if(currentIndex!==-1){
list_view_1.positionViewAtIndex(currentIndex, ListView.NoPosition)
}
}
}
Rectangle{
width: 1
height: parent.height
color: dividerColor
}
ListView{
id:list_view_2
width: showYear ? 100 : 150
height: parent.height
clip: true
ScrollBar.vertical: ScrollBar { }
boundsBehavior:Flickable.StopAtBounds
delegate: Loader{
property var model: modelData
property int type:1
property int position:index
sourceComponent: list_delegate
}
onCurrentIndexChanged: {
if(currentIndex!==-1){
list_view_2.positionViewAtIndex(currentIndex, ListView.NoPosition)
}
}
}
Rectangle{
width: 1
height: parent.height
color: dividerColor
}
ListView{
id:list_view_3
width: showYear ? 100 : 150
height: parent.height
clip: true
ScrollBar.vertical: ScrollBar { }
Layout.alignment: Qt.AlignVCenter
boundsBehavior:Flickable.StopAtBounds
delegate: Loader{
property var model: modelData
property int type:2
property int position:index
sourceComponent: list_delegate
}
onCurrentIndexChanged: {
list_view_3.positionViewAtIndex(currentIndex, ListView.NoPosition)
}
}
}
Rectangle{
width: parent.width
height: 1
anchors.top: layout_content.bottom
color: dividerColor
}
Rectangle{
id:layout_actions
height: 40
radius: 5
color: FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
anchors{
bottom:parent.bottom
left: parent.left
right: parent.right
}
Item {
id:divider
width: 1
height: parent.height
anchors.centerIn: parent
}
FluButton{
anchors{
left: parent.left
leftMargin: 20
rightMargin: 10
right: divider.left
verticalCenter: parent.verticalCenter
}
text: "取消"
onClicked: {
popup.close()
}
}
FluFilledButton{
anchors{
right: parent.right
left: divider.right
rightMargin: 20
leftMargin: 10
verticalCenter: parent.verticalCenter
}
text: "确定"
onClicked: {
changeFlag = false
popup.close()
}
}
}
}
y:35
function showPopup() {
changeFlag = true
rowData[0] = text_year.text
rowData[1] = text_month.text
rowData[2] = text_day.text
const now = new Date();
var year = text_year.text === "年"? now.getFullYear() : Number(text_year.text);
var month = text_month.text === "月"? now.getMonth() + 1 : Number(text_month.text);
var day = text_day.text === "日" ? now.getDate() : Number(text_day.text);
list_view_1.currentIndex = list_view_1.model.indexOf(year)
text_year.text = year
list_view_2.model = generateMonthArray(1,12)
list_view_2.currentIndex = list_view_2.model.indexOf(month)
text_month.text = month
list_view_3.model = generateMonthDaysArray(year,month)
list_view_3.currentIndex = list_view_3.model.indexOf(day)
text_day.text = day
var pos = root.mapToItem(null, 0, 0)
if(window.height>pos.y+35+340){
popup.y = 35
}else{
popup.y = window.height-(pos.y+340)
}
popup.open()
}
onClosed: {
if(changeFlag){
text_year.text = rowData[0]
text_month.text = rowData[1]
text_day.text = rowData[2]
}
}
}
property bool changeFlag: true
readonly property var rowData: ["","",""]
function generateYearArray(startYear, endYear) {
const yearArray = [];
for (let year = startYear; year <= endYear; year++) {
yearArray.push(year);
}
return yearArray;
}
function generateMonthArray(startMonth, endMonth) {
const monthArray = [];
for (let month = startMonth; month <= endMonth; month++) {
monthArray.push(month);
}
return monthArray;
}
function generateMonthDaysArray(year, month) {
const monthDaysArray = [];
const lastDayOfMonth = new Date(year, month, 0).getDate();
for (let day = 1; day <= lastDayOfMonth; day++) {
monthDaysArray.push(day);
}
return monthDaysArray;
}
Item {
}

9
src/controls/FluExpander.qml
View File

@ -49,9 +49,12 @@ Item {
right: parent.right
rightMargin: 15
}
hoverColor: FluTheme.isDark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(245/255,245/255,245/255,1)
normalColor: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
hovered: root_mouse.containsMouse
color:{
if(root_mouse.containsMouse){
return FluTheme.isDark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(245/255,245/255,245/255,1)
}
return FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
}
iconSize: 15
icon: expand ? FluentIcons.ChevronUp : FluentIcons.ChevronDown
onClicked: {

76
src/controls/FluFilledButton.qml
View File

@ -2,37 +2,53 @@
import QtQuick.Controls 2.15
import FluentUI 1.0
Rectangle {
id: button
Control {
id: control
property string text: "Filled Button"
property int startPadding : 15
property int endPadding : 15
property int topPadding: 5
property int bottomPadding: 5
property bool disabled: false
property color normalColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color hoverColor: FluTheme.isDark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
property color disableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
signal clicked
radius: 4
color:{
if(FluTheme.isDark){
topPadding:5
bottomPadding:5
leftPadding:15
rightPadding:15
focusPolicy:Qt.TabFocus
Keys.onEnterPressed:(visualFocus&&handleClick())
Keys.onReturnPressed:(visualFocus&&handleClick())
MouseArea {
anchors.fill: parent
onClicked: handleClick()
}
function handleClick(){
if(disabled)
return
control.clicked()
}
background: Rectangle{
radius: 4
FluFocusRectangle{
visible: control.visualFocus
radius:8
}
color:{
if(disabled){
return Qt.rgba(199/255,199/255,199/255,1)
return disableColor
}
return button_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor.lighter,1.1) : FluTheme.primaryColor.lighter
}else{
if(disabled){
return Qt.rgba(199/255,199/255,199/255,1)
}
return button_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor.dark,1.1): FluTheme.primaryColor.dark
return hovered ? hoverColor :normalColor
}
}
width: button_text.implicitWidth
height: button_text.implicitHeight
FluText {
id: button_text
text: button.text
contentItem: FluText {
text: control.text
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: {
if(FluTheme.isDark){
if(disabled){
@ -44,21 +60,7 @@ Rectangle {
}
}
font.pixelSize: 14
leftPadding: button.startPadding
rightPadding: button.endPadding
topPadding: button.topPadding
bottomPadding: button.bottomPadding
anchors.centerIn: parent
}
MouseArea {
id:button_mouse
anchors.fill: parent
hoverEnabled: true
onClicked: {
if(disabled)
return
button.clicked()
}
}
}

22
src/controls/FluFocusRectangle.qml Normal file
View File

@ -0,0 +1,22 @@
import QtQuick 2.15
import FluentUI 1.0
Item {
id:root
anchors.fill: parent
anchors.margins: -3
property var radius: 4
Rectangle{
width: root.width
height: root.height
anchors.centerIn: parent
color: "#00000000"
border.width: 3
radius: root.radius
border.color: FluTheme.isDark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
z: 65535
}
}

90
src/controls/FluIconButton.qml
View File

@ -1,9 +1,10 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
Rectangle {
Control {
id:button
id:control
width: 30
height: 30
@ -12,12 +13,18 @@ Rectangle {
property alias text: tool_tip.text
signal clicked
property bool disabled: false
property bool hovered: button_mouse.containsMouse
property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03)
property color normalColor: FluTheme.isDark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(0,0,0,0)
property color color: {
if(disabled){
return disableColor
}
return hovered ? hoverColor : normalColor
}
property color textColor: {
if(FluTheme.isDark){
if(disabled){
@ -31,47 +38,56 @@ Rectangle {
return Qt.rgba(0,0,0,1)
}
}
radius: 4
color: {
if(disabled){
return disableColor
}
return (hovered || button_mouse.containsMouse) ? hoverColor : normalColor
}
focusPolicy:Qt.TabFocus
Keys.onEnterPressed:(visualFocus&&handleClick())
Keys.onReturnPressed:(visualFocus&&handleClick())
Text {
id:text_icon
font.family: "Segoe Fluent Icons"
font.pixelSize: iconSize
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.centerIn: parent
color:button.textColor
text: (String.fromCharCode(icon).toString(16));
}
MouseArea{
id:button_mouse
MouseArea {
anchors.fill: parent
hoverEnabled: true
onClicked: {
if(disabled){
return
}
button.clicked()
onClicked: handleClick()
}
function handleClick(){
if(disabled){
return
}
control.clicked()
}
background: Rectangle{
radius: 4
color:control.color
FluFocusRectangle{
visible: control.visualFocus
}
}
FluTooltip{
id:tool_tip
visible: {
if(button.text === ""){
return false
}
return (hovered || button_mouse.containsMouse)
contentItem: Item{
Text {
id:text_icon
font.family: "Segoe Fluent Icons"
font.pixelSize: iconSize
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.centerIn: parent
color:control.textColor
text: (String.fromCharCode(icon).toString(16));
}
FluTooltip{
id:tool_tip
visible: {
if(control.text === ""){
return false
}
return hovered
}
delay: 1000
}
delay: 1000
}
}

3
src/controls/FluNavigationView.qml
View File

@ -195,7 +195,7 @@ Item {
Item{
anchors{
left: displayMode === FluNavigationView.Minimal ? parent.left : layout_list.right
leftMargin: 2
leftMargin: 10
top: nav_app_bar.bottom
right: parent.right
rightMargin: 10
@ -207,7 +207,6 @@ Item {
id:nav_swipe
anchors.fill: parent
clip: true
anchors.margins: 10
popEnter : Transition{}
popExit : Transition {
NumberAnimation { properties: "y"; from: 0; to: nav_swipe.height; duration: 200 }

52
src/controls/FluRadioButton.qml
View File

@ -1,19 +1,42 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import FluentUI 1.0
Item {
Control {
id:root
width: childrenRect.width
height: childrenRect.height
id:control
property bool checked: false
property string text: "RodioButton"
signal clicked
property bool disabled: false
RowLayout{
focusPolicy:Qt.TabFocus
Keys.onEnterPressed:(visualFocus&&handleClick())
Keys.onReturnPressed:(visualFocus&&handleClick())
MouseArea {
anchors.fill: parent
onClicked: handleClick()
}
function handleClick(){
if(disabled){
return
}
control.clicked()
}
background: Item{
FluFocusRectangle{
visible: control.visualFocus
}
}
contentItem: RowLayout{
Rectangle{
id:rect_check
width: 20
@ -26,13 +49,13 @@ Item {
if(checked&&disabled){
return 3
}
if(root_mouse.containsPress){
if(hovered){
if(checked){
return 5
}
return 1
}
if(root_mouse.containsMouse){
if(hovered){
if(checked){
return 3
}
@ -74,12 +97,12 @@ Item {
return Qt.rgba(159/255,159/255,159/255,1)
}
if(FluTheme.isDark){
if(root_mouse.containsMouse){
if(hovered){
return Qt.rgba(43/255,43/255,43/255,1)
}
return Qt.rgba(50/255,50/255,50/255,1)
}else{
if(root_mouse.containsMouse){
if(hovered){
if(checked){
return Qt.rgba(1,1,1,1)
}
@ -91,21 +114,12 @@ Item {
}
FluText{
text: root.text
text: control.text
Layout.alignment: Qt.AlignVCenter
}
}
MouseArea{
id:root_mouse
hoverEnabled: true
anchors.fill: parent
enabled: !disabled
onClicked: {
root.clicked()
}
}
}

45
src/controls/FluTimePicker.qml
View File

@ -100,7 +100,7 @@ Rectangle {
}
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text:"上午"
text:"AM/PM"
}
Popup{
@ -210,6 +210,9 @@ Rectangle {
property int position:index
sourceComponent: list_delegate
}
onCurrentIndexChanged: {
list_view_1.positionViewAtIndex(currentIndex, ListView.NoPosition)
}
}
Rectangle{
width: 1
@ -230,12 +233,15 @@ Rectangle {
property int position:index
sourceComponent: list_delegate
}
onCurrentIndexChanged: {
list_view_2.positionViewAtIndex(currentIndex, ListView.NoPosition)
}
}
Rectangle{
width: 1
height: parent.height
color: dividerColor
visible: isH
visible: isH
}
ListView{
id:list_view_3
@ -253,6 +259,9 @@ Rectangle {
property int position:index
sourceComponent: list_delegate
}
onCurrentIndexChanged: {
list_view_3.positionViewAtIndex(currentIndex, ListView.NoPosition)
}
}
}
@ -319,9 +328,35 @@ Rectangle {
rowData[0] = text_hour.text
rowData[1] = text_minute.text
rowData[2] = text_ampm.text
list_view_1.currentIndex = -1
list_view_2.currentIndex = -1
list_view_3.currentIndex = -1
var now = new Date();
var hour
var ampm;
if(isH){
hour = now.getHours();
if(hour>12){
ampm = "下午"
hour = hour-12
}else{
ampm = "上午"
}
}else{
hour = now.getHours();
}
hour = text_hour.text === "时"? hour.toString().padStart(2, '0') : text_hour.text
var minute = text_minute.text === "分"? now.getMinutes().toString().padStart(2, '0') : text_minute.text
ampm = text_ampm.text === "AM/PM"?ampm:text_ampm.text
list_view_1.currentIndex = list_view_1.model.indexOf(hour);
list_view_2.currentIndex = list_view_2.model.indexOf(minute);
list_view_3.currentIndex = list_view_3.model.indexOf(ampm);
text_hour.text = hour
text_minute.text = minute
if(isH){
text_ampm.text = ampm
}
var pos = root.mapToItem(null, 0, 0)
if(window.height>pos.y+35+340){
popup.y = 35

26
src/controls/FluToggleSwitch.qml
View File

@ -10,6 +10,15 @@ Switch {
height: 20
implicitHeight: 20
checkable: false
background:FluFocusRectangle{
visible: root.visualFocus
radius: 20
}
Keys.onEnterPressed:(visualFocus&&handleClick())
Keys.onReturnPressed:(visualFocus&&handleClick())
indicator: Rectangle {
width: root.width
height: root.height
@ -44,7 +53,7 @@ Switch {
scale: switch_mouse.containsMouse ? 1.2 : 1.0
anchors.verticalCenter: parent.verticalCenter
color: root.checked ? "#FFFFFF" : "#666666"
// border.color: "#D5D5D5"
// border.color: "#D5D5D5"
Behavior on x {
NumberAnimation { duration: 200 }
}
@ -54,12 +63,15 @@ Switch {
id:switch_mouse
anchors.fill: parent
hoverEnabled: true
onClicked: {
if(root.onClickFunc){
root.onClickFunc()
}else{
root.checked = !root.checked
}
onClicked: handleClick()
}
function handleClick(){
if(root.onClickFunc){
root.onClickFunc()
}else{
root.checked = !root.checked
}
}
}

1
src/res.qrc
View File

@ -46,5 +46,6 @@
<file>controls/FluDatePicker.qml</file>
<file>controls/FluCalenderView.qml</file>
<file>controls/FluCalendarDatePicker.qml</file>
<file>controls/FluFocusRectangle.qml</file>
</qresource>
</RCC>