QT/TaoQuick
1
0
Fork 0
mirror of https://github.com/jaredtao/TaoQuick.git synced 2025-01-17 20:12:54 +08:00
Code Issues Projects Releases Wiki Activity

add EdgeTable

Browse Source
This commit is contained in:
jared 2022-04-27 17:36:48 +08:00
parent 117549d15e
commit 009b3295e8
10 changed files with 291 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README-zh.md
View File

@ -173,6 +173,9 @@ https://marketplace.qt.io/collections/newest/products/taoquick
![](preview/ListViewWithTab.gif)
## Edge浏览器选项卡
![](preview/EdgeTab.gif)
## 矩形框组件

1
examples/TaoQuickShow/Contents.qrc
View File

@ -63,5 +63,6 @@
<file>Contents/ShapeGallery/ShapeJoinStyles.qml</file>
<file>Contents/ShapeGallery/ShapeCubicBezier.qml</file>
<file>Contents/ShapeGallery/ShapeEllipticalArc.qml</file>
<file>Contents/General/EdgeTabBar.qml</file>
</qresource>
</RCC>

106
examples/TaoQuickShow/Contents/General/EdgeTabBar.qml Normal file
View File

@ -0,0 +1,106 @@
import QtQuick 2.9
import QtQuick.Controls 2.2
import TaoQuick 1.0
Item {
anchors.fill: parent
property int tabHeight: 44
Rectangle {
x: 50
y: 90
width: 800
height: 600
border.color: "gray"
border.width: 1
color: "#f7f7f7"
Item {
id: chromeTabItem
height: 50
width: parent.width
clip: true
CusRoundTabButton {
id: leftBtn
width: 50
height: tabHeight
color: "#2d7d9a"
CusImage {
anchors {
left: parent.left
leftMargin: 10
verticalCenter: parent.verticalCenter
}
source: imgPath + "logo/milk_32.png"
}
property bool isZero: tabListView.currentIndex === 0
onIsZeroChanged: {
updateRadius()
}
updateRadius:function() {
if(tabListView.currentIndex === 0)
{
radius = roundRadius
rightBottomRound = true
} else {
rightBottomRound = false
radius = 0
}
}
}
ListView {
id: tabListView
x: leftBtn.width
width: parent.width - leftBtn.width
height: tabHeight
orientation: Qt.Horizontal
model: 10
interactive: false
delegate: Item {
width: 140
height: tabHeight
CusRoundTabButton {
id: tabBtn
color: {
if (tabBtn.isSelected || tabBtn.pressed) {
return "#f7f7f7"
} else if (tabBtn.hovered) {
return "#7bacbf"
} else {
return "#69a2b7"
}
}
anchors.fill: parent
isFirst: index === 0
isLast: index === tabListView.count - 1
tabIndex: index
currentTabIndex: tabListView.currentIndex
onClick: {
tabListView.currentIndex = tabIndex
}
CusImage {
anchors {
left: parent.left
leftMargin: 10
verticalCenter: parent.verticalCenter
}
source: imgPath + "logo/milk_32.png"
}
Label {
color: "#3e3e3e"
text: "Tab " + index
anchors.centerIn: parent
}
}
}
}
Rectangle {
width: parent.width
height: 1
anchors.bottom: parent.bottom
color: "gray"
}
}
}
}

2
examples/TaoQuickShow/Contents/General/RoundRects.qml
View File

@ -22,7 +22,7 @@ Item {
rightTopRound: rt.checked
leftBottomRound: lb.checked
rightBottomRound: rb.checked
color: "#333666" //半透明色
color: "#A0333666" //
}
Rectangle { //背景红色，衬托一下
x: 10

7
examples/TaoQuickShow/Qml/Pane/ContentModel.qml
View File

@ -60,6 +60,13 @@ ListModel {
group: "General"
groupOpen: true
}
ListElement {
name: "Edge TabBar"
source: "General/EdgeTabBar.qml"
visible: true
group: "General"
groupOpen: true
}
ListElement {
name: "Shapes"

BIN
preview/EdgeTab.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 418 KiB

107
src/TaoQuick/Qml/Basic/RoundRectangle.qml
View File

@ -1,5 +1,10 @@
import QtQuick 2.10
import QtQuick.Controls 2.2
//Rectangle 模拟圆角矩形。没有其它模块依赖，很基础的Qt版本都可以用。
// 四个角可控。
// 不支持半透明。
Rectangle {
id: root
implicitWidth: 50
@ -27,7 +32,56 @@ Rectangle {
onRightTopRoundChanged: {
updateCorners()
}
property var corners: []
Repeater {
model: [{
"x": 0,
"y": 0,
"visible": internal.aligns(lt),
"radius": root.radius
}, {
"x": root.width - root.radius,
"y": 0,
"visible": internal.aligns(rt),
"radius": root.radius
}, {
"x": 0,
"y": root.height - root.radius,
"visible": internal.aligns(lb),
"radius": root.radius
}, {
"x": root.width - root.radius,
"y": root.height - root.radius,
"visible": internal.aligns(rb),
"radius": root.radius
}]
Rectangle {
x: modelData.x
y: modelData.y
width: modelData.radius
height: width
visible: !modelData.visible
color: parent.color
}
}
QtObject {
id: internal
function aligns(direction) {
if (Array.isArray(root.corners)) {
for (var i = 0; i < root.corners.length; i++) {
if ((root.corners[i] & direction) === direction)
return true
}
return false
} else {
return (root.corners & direction) === direction
}
}
}
function updateCorners() {
var s = []
if (leftTopRound) {
@ -44,57 +98,4 @@ Rectangle {
}
corners = s
}
property var corners: []
Repeater {
model: [
{
x: 0,
y: 0,
visible: internal.aligns(lt),
radius: root.radius
},
{
x: root.width - root.radius,
y: 0,
visible: internal.aligns(rt),
radius: root.radius
},
{
x: 0,
y: root.height - root.radius,
visible: internal.aligns(lb),
radius: root.radius
},
{
x: root.width - root.radius,
y: root.height - root.radius,
visible: internal.aligns(rb),
radius: root.radius
}
]
Rectangle {
x: modelData.x; y: modelData.y
width: modelData.radius; height: width
visible: !modelData.visible
color: parent.color
}
}
QtObject {
id: internal
function aligns(direction) {
if (Array.isArray(root.corners)) {
for (var i = 0; i < root.corners.length; i++) {
if ((root.corners[i] & direction) === direction)
return true
}
return false;
}
else {
return (root.corners & direction) === direction
}
}
}
}

102
src/TaoQuick/Qml/CusButton/CusRoundTabButton.qml Normal file
View File

@ -0,0 +1,102 @@
import QtQuick 2.9
import QtQuick.Controls 2.2
import "."
import ".."
import "../Basic"
import "../CusImage"
RoundRectangle {
width: 30
height: 30
property string icon
property real roundRadius: 8
property int tabIndex: 0
property int currentTabIndex: 0
property bool isFirst: false
property bool isLast: false
property bool isSelected: currentTabIndex === tabIndex
property bool isLastSelected: currentTabIndex === tabIndex -1
property bool isNextSelected: currentTabIndex === tabIndex + 1
property alias containsMouse: trans.containsMouse
property alias hovered: trans.containsMouse
property alias pressed: trans.pressed
property bool showSplitLineLast: !hovered && !pressed && !isSelected && !isLastSelected
property bool showSplitLineNext: !hovered && !pressed && !isSelected && !isNextSelected
property color splitLineColor: "#bad4de"
signal click()
onIsLastSelectedChanged: {
updateRadius()
}
onIsNextSelectedChanged: {
updateRadius()
}
property var updateRadius: function updateRadius() {
if (isFirst && isNextSelected) {
radius = roundRadius
rightBottomRound = true
return
}
if (isLast && isLastSelected) {
radius = roundRadius
leftBottomRound = true
return
}
if(isNextSelected || isLastSelected) {
if(isNextSelected) {
radius = roundRadius
rightBottomRound = true
}
if(isLastSelected) {
radius = roundRadius
leftBottomRound = true
}
} else {
radius = 0
rightBottomRound = false
leftBottomRound = false
}
}
color: isSelected ? "#ffffff" : "#e3e3e3"
CusImage {
anchors.centerIn: parent
sourceSize.width: 24
sourceSize.height: 24
source: icon
}
Rectangle {
visible: showSplitLineLast
width: 1
height: parent.height * 0.8
anchors {
left: parent.left
verticalCenter: parent.verticalCenter
}
color: splitLineColor
}
Rectangle {
visible: showSplitLineNext
width: 1
height: parent.height * 0.8
anchors {
right: parent.right
verticalCenter: parent.verticalCenter
}
color: splitLineColor
}
TransArea {
id: trans
anchors.fill: parent
onPressed: {
click()
}
}
}

21
src/TaoQuick/TaoQuick.qrc
View File

@ -1,4 +1,4 @@
<RCC>
<RCC>
<qresource prefix="/TaoQuick">
<file>qmldir</file>
<file>Qml/CusConfig.qml</file>
@ -10,7 +10,6 @@
<file>Qml/Basic/RoundRectangleShape.qml</file>
<file>Qml/Basic/TransArea.qml</file>
<file>Qml/CusBackground/CusBackground.qml</file>
<file>Qml/CusButton/CusButton.qml</file>
<file>Qml/CusButton/CusButton_Blue.qml</file>
<file>Qml/CusButton/CusButton_Gradient.qml</file>
<file>Qml/CusButton/CusButton_Image.qml</file>
@ -18,32 +17,34 @@
<file>Qml/CusButton/CusButton_ImageColorOverlay.qml</file>
<file>Qml/CusButton/CusButton_Red.qml</file>
<file>Qml/CusButton/CusButton_White.qml</file>
<file>Qml/CusButton/CusButton.qml</file>
<file>Qml/CusButton/CusRadioButton.qml</file>
<file>Qml/CusButton/CusRoundTabButton.qml</file>
<file>Qml/CusButton/CusTextButton.qml</file>
<file>Qml/CusCheckBox/CusCheckBox.qml</file>
<file>Qml/CusCheckBox/CusSwitch.qml</file>
<file>Qml/CusComboBox/CusComboBox.qml</file>
<file>Qml/CusImage/CusImage_Tip.qml</file>
<file>Qml/CusImage/CusImage.qml</file>
<file>Qml/CusImage/CusImageOverlay.qml</file>
<file>Qml/CusImage/CusImage_Tip.qml</file>
<file>Qml/CusInput/CusIPAddress.qml</file>
<file>Qml/CusInput/CusTextField.qml</file>
<file>Qml/CusInput/CusTextField_Btn.qml</file>
<file>Qml/CusInput/CusTextField_Search.qml</file>
<file>Qml/CusInput/CusTextField_Valid.qml</file>
<file>Qml/CusInput/CusTextField.qml</file>
<file>Qml/CusInput/CusTextInput.qml</file>
<file>Qml/CusLabel/CusLabel.qml</file>
<file>Qml/CusLabel/CusLabel_Center.qml</file>
<file>Qml/CusLabel/CusLabel_Left.qml</file>
<file>Qml/CusLabel/CusLabel.qml</file>
<file>Qml/CusListView/CusListView.qml</file>
<file>Qml/CusPopup/CusPopup.qml</file>
<file>Qml/CusPopup/CusToolTip_Triangle.qml</file>
<file>Qml/CusPopup/CusTriangleTipBorder.qml</file>
<file>Qml/CusScroll/CusScrollBar.qml</file>
<file>Qml/CusSlider/CusSlider.qml</file>
<file>Qml/CusSlider/CusSlider_Spin.qml</file>
<file>Qml/CusSpinBox/CusSpinBox.qml</file>
<file>Qml/CusSlider/CusSlider.qml</file>
<file>Qml/CusSpinBox/CusSpinBox_HourMinute.qml</file>
<file>Qml/CusSpinBox/CusSpinBox.qml</file>
<file>Qml/CusTable/CusTableConstant.qml</file>
<file>Qml/CusTable/CusTableHeader.qml</file>
<file>Qml/CusTable/CusTableRow.qml</file>
@ -106,12 +107,12 @@
<file>Images/particle.png</file>
<file>Images/right.png</file>
<file>Images/rotate.png</file>
<file>Images/Search.png</file>
<file>Images/Search_Clear.png</file>
<file>Images/Search.png</file>
<file>Images/spinner.png</file>
<file>Images/Table_Asc.png</file>
<file>Images/Table_Asc_Hovered.png</file>
<file>Images/Table_Desc.png</file>
<file>Images/Table_Asc.png</file>
<file>Images/Table_Desc_Hovered.png</file>
<file>Images/Table_Desc.png</file>
</qresource>
</RCC>

15
src/TaoQuick/qmldir
View File

@ -1,4 +1,4 @@
module TaoQuick
module TaoQuick
BasicText 1.0 Qml/Basic/BasicText.qml
BasicTooltip 1.0 Qml/Basic/BasicTooltip.qml
CusCallLater 1.0 Qml/Basic/CusCallLater.qml
@ -7,7 +7,6 @@ RoundRectangle 1.0 Qml/Basic/RoundRectangle.qml
RoundRectangleShape 1.0 Qml/Basic/RoundRectangleShape.qml
TransArea 1.0 Qml/Basic/TransArea.qml
CusBackground 1.0 Qml/CusBackground/CusBackground.qml
CusButton 1.0 Qml/CusButton/CusButton.qml
CusButton_Blue 1.0 Qml/CusButton/CusButton_Blue.qml
CusButton_Gradient 1.0 Qml/CusButton/CusButton_Gradient.qml
CusButton_Image 1.0 Qml/CusButton/CusButton_Image.qml
@ -15,32 +14,34 @@ CusButton_ImageBackground 1.0 Qml/CusButton/CusButton_ImageBackground.qml
CusButton_ImageColorOverlay 1.0 Qml/CusButton/CusButton_ImageColorOverlay.qml
CusButton_Red 1.0 Qml/CusButton/CusButton_Red.qml
CusButton_White 1.0 Qml/CusButton/CusButton_White.qml
CusButton 1.0 Qml/CusButton/CusButton.qml
CusRadioButton 1.0 Qml/CusButton/CusRadioButton.qml
CusRoundTabButton 1.0 Qml/CusButton/CusRoundTabButton.qml
CusTextButton 1.0 Qml/CusButton/CusTextButton.qml
CusCheckBox 1.0 Qml/CusCheckBox/CusCheckBox.qml
CusSwitch 1.0 Qml/CusCheckBox/CusSwitch.qml
CusComboBox 1.0 Qml/CusComboBox/CusComboBox.qml
CusImage_Tip 1.0 Qml/CusImage/CusImage_Tip.qml
CusImage 1.0 Qml/CusImage/CusImage.qml
CusImageOverlay 1.0 Qml/CusImage/CusImageOverlay.qml
CusImage_Tip 1.0 Qml/CusImage/CusImage_Tip.qml
CusIPAddress 1.0 Qml/CusInput/CusIPAddress.qml
CusTextField 1.0 Qml/CusInput/CusTextField.qml
CusTextField_Btn 1.0 Qml/CusInput/CusTextField_Btn.qml
CusTextField_Search 1.0 Qml/CusInput/CusTextField_Search.qml
CusTextField_Valid 1.0 Qml/CusInput/CusTextField_Valid.qml
CusTextField 1.0 Qml/CusInput/CusTextField.qml
CusTextInput 1.0 Qml/CusInput/CusTextInput.qml
CusLabel 1.0 Qml/CusLabel/CusLabel.qml
CusLabel_Center 1.0 Qml/CusLabel/CusLabel_Center.qml
CusLabel_Left 1.0 Qml/CusLabel/CusLabel_Left.qml
CusLabel 1.0 Qml/CusLabel/CusLabel.qml
CusListView 1.0 Qml/CusListView/CusListView.qml
CusPopup 1.0 Qml/CusPopup/CusPopup.qml
CusToolTip_Triangle 1.0 Qml/CusPopup/CusToolTip_Triangle.qml
CusTriangleTipBorder 1.0 Qml/CusPopup/CusTriangleTipBorder.qml
CusScrollBar 1.0 Qml/CusScroll/CusScrollBar.qml
CusSlider 1.0 Qml/CusSlider/CusSlider.qml
CusSlider_Spin 1.0 Qml/CusSlider/CusSlider_Spin.qml
CusSpinBox 1.0 Qml/CusSpinBox/CusSpinBox.qml
CusSlider 1.0 Qml/CusSlider/CusSlider.qml
CusSpinBox_HourMinute 1.0 Qml/CusSpinBox/CusSpinBox_HourMinute.qml
CusSpinBox 1.0 Qml/CusSpinBox/CusSpinBox.qml
singleton CusTableConstant 1.0 Qml/CusTable/CusTableConstant.qml
CusTableHeader 1.0 Qml/CusTable/CusTableHeader.qml
CusTableRow 1.0 Qml/CusTable/CusTableRow.qml