github_mirror
/
FluentUI
mirror of https://github.com/zhuzichu520/FluentUI.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #599 from Polaris-Night/main 

feat: 新增 FluRectangle 边框绘制、优化 FluDatePicker 月份切换逻辑、改进控件 enabled 属性兼容性及 FluTableView 分页行序号支持
This commit is contained in:
zhuzichu 2025-05-16 18:24:43 +08:00 committed by GitHub
parent af573b71a4 f2c2beb90a
commit e27f1591b0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 143 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
example/example_en_US.ts
View File

@ -2368,7 +2368,7 @@ Some contents...</source>
</message>
<message>
<location filename="qml/page/T_TableView.qml" line="176"/>
<location filename="qml/page/T_TableView.qml" line="503"/>
<location filename="qml/page/T_TableView.qml" line="504"/>
<source>Name</source>
<translation type="unfinished"></translation>
</message>
@ -2418,37 +2418,37 @@ Some contents...</source>
<translation type="unfinished"></translation>
</message>
<message>
<location filename="qml/page/T_TableView.qml" line="508"/>
<location filename="qml/page/T_TableView.qml" line="509"/>
<source>Avatar</source>
<translation type="unfinished"></translation>
</message>
<message>
<location filename="qml/page/T_TableView.qml" line="522"/>
<location filename="qml/page/T_TableView.qml" line="523"/>
<source>Address</source>
<translation type="unfinished"></translation>
</message>
<message>
<location filename="qml/page/T_TableView.qml" line="530"/>
<location filename="qml/page/T_TableView.qml" line="531"/>
<source>Nickname</source>
<translation type="unfinished"></translation>
</message>
<message>
<location filename="qml/page/T_TableView.qml" line="537"/>
<location filename="qml/page/T_TableView.qml" line="538"/>
<source>Long String</source>
<translation type="unfinished"></translation>
</message>
<message>
<location filename="qml/page/T_TableView.qml" line="545"/>
<location filename="qml/page/T_TableView.qml" line="546"/>
<source>Options</source>
<translation type="unfinished"></translation>
</message>
<message>
<location filename="qml/page/T_TableView.qml" line="563"/>
<location filename="qml/page/T_TableView.qml" line="564"/>
<source>&lt;Previous</source>
<translation type="unfinished"></translation>
</message>
<message>
<location filename="qml/page/T_TableView.qml" line="564"/>
<location filename="qml/page/T_TableView.qml" line="565"/>
<source>Next&gt;</source>
<translation type="unfinished"></translation>
</message>

16
example/example_zh_CN.ts
View File

@ -2557,7 +2557,7 @@ Some contents...</source>
</message>
<message>
<location filename="qml/page/T_TableView.qml" line="176"/>
<location filename="qml/page/T_TableView.qml" line="503"/>
<location filename="qml/page/T_TableView.qml" line="504"/>
<source>Name</source>
<translation type="unfinished">名称</translation>
</message>
@ -2597,37 +2597,37 @@ Some contents...</source>
<translation type="unfinished">焦点未获取：请点击表格中的任意一项，作为插入的靶点！</translation>
</message>
<message>
<location filename="qml/page/T_TableView.qml" line="508"/>
<location filename="qml/page/T_TableView.qml" line="509"/>
<source>Avatar</source>
<translation type="unfinished">头像</translation>
</message>
<message>
<location filename="qml/page/T_TableView.qml" line="522"/>
<location filename="qml/page/T_TableView.qml" line="523"/>
<source>Address</source>
<translation type="unfinished">地址</translation>
</message>
<message>
<location filename="qml/page/T_TableView.qml" line="530"/>
<location filename="qml/page/T_TableView.qml" line="531"/>
<source>Nickname</source>
<translation type="unfinished">昵称</translation>
</message>
<message>
<location filename="qml/page/T_TableView.qml" line="537"/>
<location filename="qml/page/T_TableView.qml" line="538"/>
<source>Long String</source>
<translation type="unfinished">长字符串</translation>
</message>
<message>
<location filename="qml/page/T_TableView.qml" line="545"/>
<location filename="qml/page/T_TableView.qml" line="546"/>
<source>Options</source>
<translation type="unfinished">操作</translation>
</message>
<message>
<location filename="qml/page/T_TableView.qml" line="563"/>
<location filename="qml/page/T_TableView.qml" line="564"/>
<source>&lt;Previous</source>
<translation type="unfinished">&lt;上一页</translation>
</message>
<message>
<location filename="qml/page/T_TableView.qml" line="564"/>
<location filename="qml/page/T_TableView.qml" line="565"/>
<source>Next&gt;</source>
<translation type="unfinished">下一页&gt;</translation>
</message>

18
example/qml/page/T_Rectangle.qml
View File

@ -58,6 +58,22 @@ FluScrollablePage{
color:"#b4009e"
radius:[0,0,0,15]
}
FluRectangle{
width: 50
height: 50
color:"#a8d5ba"
radius:[15,15,15,15]
borderWidth: 3
borderColor: "#5b8a72"
}
FluRectangle{
width: 50
height: 50
color:"#dbe2ef"
radius:[15,0,0,0]
borderWidth: 2
borderColor: "#3f72af"
}
}
}
}
@ -66,6 +82,8 @@ FluScrollablePage{
Layout.topMargin: -6
code:'FluRectangle{
radius: [25,25,25,25]
borderWidth: 2
borderColor: "#000000"
width: 50
height: 50
}'

1
example/qml/page/T_TableView.qml
View File

@ -493,6 +493,7 @@ FluContentPage{
onRowsChanged: {
root.checkBoxChanged()
}
startRowIndex: (gagination.pageCurrent - 1) * gagination.__itemPerPage + 1
columnSource:[
{
title: table_view.customItem(com_column_checbox,{checked:true}),

62
src/FluRectangle.cpp
View File

@ -2,33 +2,61 @@
#include <QPainterPath>
FluRectangle::FluRectangle(QQuickItem *parent) : QQuickPaintedItem(parent) {
color(QColor(255, 255, 255, 255));
color(Qt::white);
radius({0, 0, 0, 0});
borderWidth(0);
borderColor(Qt::black);
connect(this, &FluRectangle::colorChanged, this, [=] { update(); });
connect(this, &FluRectangle::radiusChanged, this, [=] { update(); });
connect(this, &FluRectangle::borderWidthChanged, this, [=] { update(); });
connect(this, &FluRectangle::borderColorChanged, this, [=] { update(); });
}
bool FluRectangle::borderValid() const {
return qRound(_borderWidth) >= 1 && _color.isValid() && _color.alpha() > 0;
}
void FluRectangle::paint(QPainter *painter) {
painter->save();
painter->setRenderHint(QPainter::Antialiasing);
QPainterPath path;
QRectF rect = boundingRect();
path.moveTo(rect.bottomRight() - QPointF(0, _radius[2]));
path.lineTo(rect.topRight() + QPointF(0, _radius[1]));
path.arcTo(QRectF(QPointF(rect.topRight() - QPointF(_radius[1] * 2, 0)),
QSize(_radius[1] * 2, _radius[1] * 2)),
0, 90);
path.lineTo(rect.topLeft() + QPointF(_radius[0], 0));
path.arcTo(QRectF(QPointF(rect.topLeft()), QSize(_radius[0] * 2, _radius[0] * 2)), 90, 90);
path.lineTo(rect.bottomLeft() - QPointF(0, _radius[3]));
path.arcTo(QRectF(QPointF(rect.bottomLeft() - QPointF(0, _radius[3] * 2)),
QSize(_radius[3] * 2, _radius[3] * 2)),
180, 90);
path.lineTo(rect.bottomRight() - QPointF(_radius[2], 0));
path.arcTo(QRectF(QPointF(rect.bottomRight() - QPointF(_radius[2] * 2, _radius[2] * 2)),
QSize(_radius[2] * 2, _radius[2] * 2)),
270, 90);
bool valid = borderValid();
if (valid) {
// 绘制边框时画笔的宽度从路径向两侧扩充
// 因此实际绘制的矩形应向内侧收缩边框宽度的一半，避免边框裁剪导致不完整
qreal halfBorderWidth = _borderWidth / 2.0;
rect.adjust(halfBorderWidth, halfBorderWidth, -halfBorderWidth, -halfBorderWidth);
}
QPainterPath path;
QList<int> r = _radius;
while (r.size() < 4) {
r.append(0);
}
// 从右下角开始逆时针绘制圆角矩形路径
path.moveTo(rect.bottomRight() - QPointF(0, r[2]));
path.lineTo(rect.topRight() + QPointF(0, r[1]));
path.arcTo(QRectF(QPointF(rect.topRight() - QPointF(r[1] * 2, 0)), QSize(r[1] * 2, r[1] * 2)), 0, 90);
path.lineTo(rect.topLeft() + QPointF(r[0], 0));
path.arcTo(QRectF(QPointF(rect.topLeft()), QSize(r[0] * 2, r[0] * 2)), 90, 90);
path.lineTo(rect.bottomLeft() - QPointF(0, r[3]));
path.arcTo(QRectF(QPointF(rect.bottomLeft() - QPointF(0, r[3] * 2)), QSize(r[3] * 2, r[3] * 2)), 180, 90);
path.lineTo(rect.bottomRight() - QPointF(r[2], 0));
path.arcTo(QRectF(QPointF(rect.bottomRight() - QPointF(r[2] * 2, r[2] * 2)), QSize(r[2] * 2, r[2] * 2)), 270, 90);
// 填充背景
painter->fillPath(path, _color);
// 绘制边框
if (valid) {
painter->strokePath(path, QPen(_borderColor, _borderWidth));
}
painter->restore();
}

4
src/FluRectangle.h
View File

@ -12,9 +12,13 @@ class FluRectangle : public QQuickPaintedItem {
Q_OBJECT
Q_PROPERTY_AUTO(QColor, color)
Q_PROPERTY_AUTO(QList<int>, radius)
Q_PROPERTY_AUTO(qreal, borderWidth)
Q_PROPERTY_AUTO(QColor, borderColor)
QML_NAMED_ELEMENT(FluRectangle)
public:
explicit FluRectangle(QQuickItem *parent = nullptr);
bool borderValid() const;
void paint(QPainter *painter) override;
};

4
src/Qt5/imports/FluentUI/Controls/FluComboBox.qml
View File

@ -55,7 +55,7 @@ T.ComboBox {
font:control.font
readOnly: control.down
color: {
if(control.disabled) {
if(!control.enabled) {
return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
}
return FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
@ -97,7 +97,7 @@ T.ComboBox {
anchors.margins: -2
}
color:{
if(disabled){
if(!enabled){
return disableColor
}
return hovered ? hoverColor :normalColor

5
src/Qt5/imports/FluentUI/Controls/FluDatePicker.qml
View File

@ -178,7 +178,12 @@ FluButton {
}
if(type === 1){
text_month.text = model
let day = list_view_3.model[list_view_3.currentIndex]
list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex])
if(list_view_3.model.indexOf(day) === -1){
day = list_view_3.model[list_view_3.model.length - 1]
}
list_view_3.currentIndex = list_view_3.model.indexOf(day)
text_day.text = list_view_3.model[list_view_3.currentIndex]
}

4
src/Qt5/imports/FluentUI/Controls/FluMenuBarItem.qml
View File

@ -6,7 +6,7 @@ T.MenuBarItem {
property bool disabled: false
property color textColor: {
if(FluTheme.dark){
if(disabled){
if(!enabled){
return Qt.rgba(131/255,131/255,131/255,1)
}
if(pressed){
@ -14,7 +14,7 @@ T.MenuBarItem {
}
return Qt.rgba(1,1,1,1)
}else{
if(disabled){
if(!enabled){
return Qt.rgba(160/255,160/255,160/255,1)
}
if(pressed){

4
src/Qt5/imports/FluentUI/Controls/FluSpinBox.qml
View File

@ -139,13 +139,13 @@ T.SpinBox {
radius: 4
border.width: 1
border.color: {
if(contentItem.disabled){
if(!contentItem.enabled){
return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
}
return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
}
color: {
if(contentItem.disabled){
if(!contentItem.enabled){
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
}
if(contentItem.activeFocus){

12
src/Qt5/imports/FluentUI/Controls/FluTableView.qml
View File

@ -17,6 +17,7 @@ Rectangle {
property color borderColor: FluTheme.dark ? Qt.rgba(37/255,37/255,37/255,1) : Qt.rgba(228/255,228/255,228/255,1)
property bool horizonalHeaderVisible: true
property bool verticalHeaderVisible: true
property int startRowIndex: 1
property color selectedBorderColor: FluTheme.primaryColor
property color selectedColor: FluTools.withOpacity(FluTheme.primaryColor,0.3)
property alias view: table_view
@ -841,7 +842,13 @@ Rectangle {
Connections{
target: table_view
function onRowsChanged(){
header_row_model.rows = Array.from({length: table_view.rows}, (_, i) => ({rowIndex:i+1}))
header_vertical.updateRowIndex()
}
}
Connections {
target: control
function onStartRowIndexChanged(){
header_vertical.updateRowIndex()
}
}
Timer{
@ -851,6 +858,9 @@ Rectangle {
header_vertical.forceLayout()
}
}
function updateRowIndex(){
header_row_model.rows = Array.from({length: table_view.rows}, (_, i) => ({rowIndex:i+control.startRowIndex}))
}
}
Item{
anchors{

2
src/Qt5/imports/FluentUI/Controls/FluTextBoxBackground.qml
View File

@ -6,7 +6,7 @@ FluControlBackground{
property Item inputItem
id:control
color: {
if(inputItem && inputItem.disabled){
if(inputItem && !inputItem.enabled){
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
}
if(inputItem && inputItem.activeFocus){

18
src/Qt5/imports/FluentUI/plugins.qmltypes
View File

@ -231,6 +231,8 @@ Module {
exportMetaObjectRevisions: [0]
Property { name: "color"; type: "QColor" }
Property { name: "radius"; type: "QList<int>" }
Property { name: "borderWidth"; type: "double" }
Property { name: "borderColor"; type: "QColor" }
}
Component {
name: "FluSheetType"
@ -2776,7 +2778,7 @@ Module {
}
Property {
name: "layoutMacosButtons"
type: "FluLoader_QMLTYPE_14"
type: "FluLoader_QMLTYPE_12"
isReadonly: true
isPointer: true
}
@ -2797,12 +2799,16 @@ Module {
Property { name: "items"; type: "QVariant" }
Property { name: "emptyText"; type: "string" }
Property { name: "autoSuggestBoxReplacement"; type: "int" }
Property { name: "itemHeight"; type: "int" }
Property { name: "itemRows"; type: "int" }
Property { name: "showSuggestWhenPressed"; type: "bool" }
Property { name: "textRole"; type: "string" }
Property { name: "filter"; type: "QVariant" }
Signal {
name: "itemClicked"
Parameter { name: "data"; type: "QVariant" }
}
Method { name: "showSuggest"; type: "QVariant" }
Method {
name: "updateText"
type: "QVariant"
@ -2830,8 +2836,9 @@ Module {
defaultProperty: "data"
Property { name: "isDot"; type: "bool" }
Property { name: "showZero"; type: "bool" }
Property { name: "count"; type: "int" }
Property { name: "topRight"; type: "bool" }
Property { name: "count"; type: "QVariant" }
Property { name: "max"; type: "int" }
Property { name: "position"; type: "string" }
}
Component {
prototype: "QQuickItem"
@ -3479,8 +3486,8 @@ Module {
Property { name: "actionItem"; type: "QQmlComponent"; isPointer: true }
Property { name: "topPadding"; type: "int" }
Property { name: "pageMode"; type: "int" }
Property { name: "navItemRightMenu"; type: "FluMenu_QMLTYPE_47"; isPointer: true }
Property { name: "navItemExpanderRightMenu"; type: "FluMenu_QMLTYPE_47"; isPointer: true }
Property { name: "navItemRightMenu"; type: "FluMenu_QMLTYPE_49"; isPointer: true }
Property { name: "navItemExpanderRightMenu"; type: "FluMenu_QMLTYPE_49"; isPointer: true }
Property { name: "navCompactWidth"; type: "int" }
Property { name: "navTopMargin"; type: "int" }
Property { name: "cellHeight"; type: "int" }
@ -4085,6 +4092,7 @@ Module {
Property { name: "borderColor"; type: "QColor" }
Property { name: "horizonalHeaderVisible"; type: "bool" }
Property { name: "verticalHeaderVisible"; type: "bool" }
Property { name: "startRowIndex"; type: "int" }
Property { name: "selectedBorderColor"; type: "QColor" }
Property { name: "selectedColor"; type: "QColor" }
Property { name: "columnWidthProvider"; type: "QVariant" }

4
src/Qt6/imports/FluentUI/Controls/FluComboBox.qml
View File

@ -55,7 +55,7 @@ T.ComboBox {
font:control.font
readOnly: control.down
color: {
if(control.disabled) {
if(!control.enabled) {
return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
}
return FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
@ -97,7 +97,7 @@ T.ComboBox {
anchors.margins: -2
}
color:{
if(disabled){
if(!enabled){
return disableColor
}
return hovered ? hoverColor :normalColor

5
src/Qt6/imports/FluentUI/Controls/FluDatePicker.qml
View File

@ -178,7 +178,12 @@ FluButton {
}
if(type === 1){
text_month.text = model
let day = list_view_3.model[list_view_3.currentIndex]
list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex])
if(list_view_3.model.indexOf(day) === -1){
day = list_view_3.model[list_view_3.model.length - 1]
}
list_view_3.currentIndex = list_view_3.model.indexOf(day)
text_day.text = list_view_3.model[list_view_3.currentIndex]
}

4
src/Qt6/imports/FluentUI/Controls/FluMenuBarItem.qml
View File

@ -7,7 +7,7 @@ T.MenuBarItem {
property bool disabled: false
property color textColor: {
if(FluTheme.dark){
if(disabled){
if(!enabled){
return Qt.rgba(131/255,131/255,131/255,1)
}
if(pressed){
@ -15,7 +15,7 @@ T.MenuBarItem {
}
return Qt.rgba(1,1,1,1)
}else{
if(disabled){
if(!enabled){
return Qt.rgba(160/255,160/255,160/255,1)
}
if(pressed){

4
src/Qt6/imports/FluentUI/Controls/FluSpinBox.qml
View File

@ -140,13 +140,13 @@ T.SpinBox {
radius: 4
border.width: 1
border.color: {
if(contentItem.disabled){
if(!contentItem.enabled){
return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
}
return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
}
color: {
if(contentItem.disabled){
if(!contentItem.enabled){
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
}
if(contentItem.activeFocus){

12
src/Qt6/imports/FluentUI/Controls/FluTableView.qml
View File

@ -17,6 +17,7 @@ Rectangle {
property color borderColor: FluTheme.dark ? Qt.rgba(37/255,37/255,37/255,1) : Qt.rgba(228/255,228/255,228/255,1)
property bool horizonalHeaderVisible: true
property bool verticalHeaderVisible: true
property int startRowIndex: 1
property color selectedBorderColor: FluTheme.primaryColor
property color selectedColor: FluTools.withOpacity(FluTheme.primaryColor,0.3)
property alias view: table_view
@ -841,7 +842,13 @@ Rectangle {
Connections{
target: table_view
function onRowsChanged(){
header_row_model.rows = Array.from({length: table_view.rows}, (_, i) => ({rowIndex:i+1}))
header_vertical.updateRowIndex()
}
}
Connections {
target: control
function onStartRowIndexChanged(){
header_vertical.updateRowIndex()
}
}
Timer{
@ -851,6 +858,9 @@ Rectangle {
header_vertical.forceLayout()
}
}
function updateRowIndex(){
header_row_model.rows = Array.from({length: table_view.rows}, (_, i) => ({rowIndex:i+control.startRowIndex}))
}
}
Item{
anchors{

2
src/Qt6/imports/FluentUI/Controls/FluTextBoxBackground.qml
View File

@ -6,7 +6,7 @@ FluControlBackground{
property Item inputItem
id:control
color: {
if(inputItem && inputItem.disabled){
if(inputItem && !inputItem.enabled){
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
}
if(inputItem && inputItem.activeFocus){