amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2025-07-03 00:25:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
朱子楚\zhuzi
2023-09-08 22:33:23 +08:00
parent 4b01fcf2b4
commit 24f3cb1027
24 changed files with 207 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
example/qml-Qt6/page/T_Acrylic.qml
View File

@ -50,7 +50,7 @@ FluScrollablePage{
FluRectangle{
width: 1920/4
height: 1200/4
radius:[15,15,15,15]
radius:[8,8,8,8]
Image {
id:image
asynchronous: true

109
example/qml-Qt6/page/T_Carousel.qml
View File

@ -36,20 +36,28 @@ FluScrollablePage{
FluText{
text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
}
FluCarousel{
radius:[5,5,5,5]
delegate: Component{
Image {
anchors.fill: parent
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Item{
width: 400
height: 300
FluShadow{
radius: 8
}
Layout.topMargin: 20
Layout.leftMargin: 5
Component.onCompleted: {
model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
FluCarousel{
anchors.fill: parent
radius:[8,8,8,8]
delegate: Component{
Image {
anchors.fill: parent
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
}
Layout.topMargin: 20
Layout.leftMargin: 5
Component.onCompleted: {
model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
}
}
}
}
@ -66,46 +74,55 @@ FluScrollablePage{
verticalCenter: parent.verticalCenter
left:parent.left
}
FluCarousel{
radius:[15,15,15,15]
loopTime:1500
indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
indicatorMarginTop:15
delegate: Component{
Item{
anchors.fill: parent
Image {
Item{
width: 400
height: 300
FluShadow{
radius: 8
}
FluCarousel{
anchors.fill: parent
radius:[8,8,8,8]
loopTime:1500
indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
indicatorMarginTop:15
delegate: Component{
Item{
anchors.fill: parent
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Rectangle{
height: 40
width: parent.width
anchors.bottom: parent.bottom
color: "#33000000"
FluText{
Image {
anchors.fill: parent
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
text:model.title
color: FluColors.Grey10
font.pixelSize: 15
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Rectangle{
height: 40
width: parent.width
anchors.bottom: parent.bottom
color: "#33000000"
FluText{
anchors.fill: parent
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
text:model.title
color: FluColors.Grey10
font.pixelSize: 15
}
}
}
}
}
Layout.topMargin: 20
Layout.leftMargin: 5
Component.onCompleted: {
var arr = []
arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
model = arr
Layout.topMargin: 20
Layout.leftMargin: 5
Component.onCompleted: {
var arr = []
arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
model = arr
}
}
}
}
}

6
example/qml-Qt6/page/T_Home.qml
View File

@ -70,12 +70,12 @@ FluScrollablePage{
width: 220
height: 240
FluShadow{
radius:8
radius:5
anchors.fill: item_content
}
FluItem{
id:item_content
radius: [8,8,8,8]
radius: [5,5,5,5]
width: 200
height: 220
anchors.centerIn: parent
@ -89,7 +89,7 @@ FluScrollablePage{
}
Rectangle{
anchors.fill: parent
radius: 8
radius: 5
color:{
if(FluTheme.dark){
if(item_mouse.containsMouse){

2
example/qml-Qt6/page/T_Rectangle.qml
View File

@ -116,7 +116,7 @@ FluScrollablePage{
FluRectangle{
width: 1920/5
height: 1200/5
radius:[15,15,15,15]
radius:[8,8,8,8]
Image {
asynchronous: true
source: "qrc:/example/res/image/banner_1.jpg"

3
example/qml-Qt6/page/T_Screenshot.qml
View File

@ -30,9 +30,10 @@ FluScrollablePage{
Layout.topMargin: 10
Layout.leftMargin: 4
Layout.bottomMargin: 4
radius: 4
color: FluTheme.dark ? FluColors.Black : FluColors.White
FluShadow{
radius: 0
radius: 4
color: FluTheme.primaryColor.dark
}
Image{

4
example/qml-Qt6/window/MainWindow.qml
View File

@ -164,9 +164,9 @@ CustomWindow {
height: parent.height
z:999
//Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
pageMode: FluNavigationViewType.Stack
// pageMode: FluNavigationViewType.Stack
//NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐）
// pageMode: FluNavigationViewType.NoStack
pageMode: FluNavigationViewType.NoStack
items: ItemsOriginal
footerItems:ItemsFooter
topPadding:FluTools.isMacos() ? 20 : 0

2
example/qml/page/T_Acrylic.qml
View File

@ -51,7 +51,7 @@ FluScrollablePage{
FluRectangle{
width: 1920/4
height: 1200/4
radius:[15,15,15,15]
radius:[8,8,8,8]
Image {
id:image
asynchronous: true

109
example/qml/page/T_Carousel.qml
View File

@ -37,20 +37,28 @@ FluScrollablePage{
FluText{
text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
}
FluCarousel{
radius:[5,5,5,5]
delegate: Component{
Image {
anchors.fill: parent
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Item{
width: 400
height: 300
FluShadow{
radius: 8
}
Layout.topMargin: 20
Layout.leftMargin: 5
Component.onCompleted: {
model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
FluCarousel{
anchors.fill: parent
radius:[8,8,8,8]
delegate: Component{
Image {
anchors.fill: parent
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
}
Layout.topMargin: 20
Layout.leftMargin: 5
Component.onCompleted: {
model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
}
}
}
}
@ -67,46 +75,55 @@ FluScrollablePage{
verticalCenter: parent.verticalCenter
left:parent.left
}
FluCarousel{
radius:[15,15,15,15]
loopTime:1500
indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
indicatorMarginTop:15
delegate: Component{
Item{
anchors.fill: parent
Image {
Item{
width: 400
height: 300
FluShadow{
radius: 8
}
FluCarousel{
anchors.fill: parent
radius:[8,8,8,8]
loopTime:1500
indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
indicatorMarginTop:15
delegate: Component{
Item{
anchors.fill: parent
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Rectangle{
height: 40
width: parent.width
anchors.bottom: parent.bottom
color: "#33000000"
FluText{
Image {
anchors.fill: parent
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
text:model.title
color: FluColors.Grey10
font.pixelSize: 15
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Rectangle{
height: 40
width: parent.width
anchors.bottom: parent.bottom
color: "#33000000"
FluText{
anchors.fill: parent
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
text:model.title
color: FluColors.Grey10
font.pixelSize: 15
}
}
}
}
}
Layout.topMargin: 20
Layout.leftMargin: 5
Component.onCompleted: {
var arr = []
arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
model = arr
Layout.topMargin: 20
Layout.leftMargin: 5
Component.onCompleted: {
var arr = []
arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
model = arr
}
}
}
}
}

6
example/qml/page/T_Home.qml
View File

@ -71,12 +71,12 @@ FluScrollablePage{
width: 220
height: 240
FluShadow{
radius:8
radius:5
anchors.fill: item_content
}
FluItem{
id:item_content
radius: [8,8,8,8]
radius: [5,5,5,5]
width: 200
height: 220
anchors.centerIn: parent
@ -90,7 +90,7 @@ FluScrollablePage{
}
Rectangle{
anchors.fill: parent
radius: 8
radius: 5
color:{
if(FluTheme.dark){
if(item_mouse.containsMouse){

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

@ -117,7 +117,7 @@ FluScrollablePage{
FluRectangle{
width: 1920/5
height: 1200/5
radius:[15,15,15,15]
radius:[8,8,8,8]
Image {
asynchronous: true
source: "qrc:/example/res/image/banner_1.jpg"

3
example/qml/page/T_Screenshot.qml
View File

@ -31,9 +31,10 @@ FluScrollablePage{
Layout.topMargin: 10
Layout.leftMargin: 4
Layout.bottomMargin: 4
radius: 4
color: FluTheme.dark ? FluColors.Black : FluColors.White
FluShadow{
radius: 0
radius: 4
color: FluTheme.primaryColor.dark
}
Image{

6
example/qml/window/MainWindow.qml
View File

@ -139,7 +139,7 @@ CustomWindow {
id:loader
lazy: true
anchors.fill: parent
source: "https://zhu-zichu.gitee.io/Qt6_156_LieflatPage.qml"
source: "https://zhu-zichu.gitee.io/Qt5_156_LieflatPage.qml"
}
}
front: Item{
@ -165,9 +165,9 @@ CustomWindow {
height: parent.height
z:999
//Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
pageMode: FluNavigationViewType.Stack
// pageMode: FluNavigationViewType.Stack
//NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐）
// pageMode: FluNavigationViewType.NoStack
pageMode: FluNavigationViewType.NoStack
items: ItemsOriginal
footerItems:ItemsFooter
topPadding:FluTools.isMacos() ? 20 : 0