ApplicationWindow{
visible: true
id:window
width:320
height:480
TabBar {
id: bar
width: parent.width
//当前选中项下划线色
Material.accent:"#ffffff"
//背景色
Material.background: "#157CA1"
//没被选中的字体颜色
Material.foreground: "#cccccc"
font.bold: true
font.pixelSize: 18
TabButton {
text: qsTr("社区")
}
TabButton {
text: qsTr("茶聊馆")
}
TabButton {
text: qsTr("朋友圈")
}
}
Flickable{
height:parent.height - bar.height
width: parent.width
contentHeight: stack.height
anchors.top: bar.bottom
clip: true
ScrollBar.vertical: ScrollBar{}
StackLayout {
id:stack
width: parent.width
currentIndex: bar.currentIndex
Rectangle{
id: homeTab
width: 100
height: 2000
color: "#b54040"
gradient: Gradient {
GradientStop {
position: 0.02;
color: "#ff0000";
}
GradientStop {
position: 0.75;
color: "#ffffff";
}
}
}
Rectangle {
id: discoverTab
width: 100
color: "yellow"
}
Rectangle {
id: activityTab
width: 100
color: "blue"
}
}
}
}
用此实现一个类似新闻的界面:
Item {
TabBar {
id: bar
width: parent.width
//当前选中项下划线色
Material.accent:"#ffffff"
//背景色
Material.background: "#157CA1"
//没被选中的字体颜色
Material.foreground: "#cccccc"
font.bold: true
font.pixelSize: 18
TabButton {
text: qsTr("社区")
}
TabButton {
text: qsTr("茶聊馆")
}
TabButton {
text: qsTr("朋友圈")
}
}
property var pics:[
{pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图1.jpg"},
{pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图2.jpg"},
{pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图3.jpg"},
{pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图1.jpg"},
{pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图2.jpg"},
{pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图3.jpg"},
{pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图1.jpg"},
{pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图2.jpg"},
{pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图3.jpg"},
]
Flickable{
id:flick
height:parent.height - bar.height
width: parent.width
contentHeight: stack.height
anchors.top: bar.bottom
clip: true
ScrollBar.vertical: ScrollBar{}
StackLayout {
id:stack
width: parent.width
height: homeTab.height
currentIndex: bar.currentIndex
Rectangle{
id: homeTab
width: parent.width //可以不指定 col会冲出尺寸限制
height: col.height
color: "#034963"
Column{
id:col
Loader{
id:lunboItem
width: flick.width
height: width*0.5
sourceComponent: lunbo
}
ListView{
id:newsView
width: flick.width
spacing: 1 //间隔1 间隔颜色将会被 homeTab的背景色填充
height: contentHeight
model: pics
delegate: BorderImage {
source: pics[index].pic
width: parent.width
height: sourceSize.height/sourceSize.width*width
}
}
}
}
Rectangle {
id: discoverTab
width: 100
color: "yellow"
}
Rectangle {
id: activityTab
width: 100
color: "blue"
}
}
}
Component{
id:lunbo;
Item {
SwipeView{
id:sw;
clip: true
width: parent.width
anchors.horizontalCenter: parent.horizontalCenter
height: parent.height;
currentIndex:pageit.currentIndex;
Item {
id:item1;
Rectangle{
anchors.fill: parent
BorderImage {
anchors.fill: parent
id: name
source: "qrc:/PageManger/SheQuPage/res/社区轮播1.png"
border.left: 5; border.top: 5
border.right: 5; border.bottom: 5
}
//点击后发生的事情。。。
MouseArea{
anchors.fill: parent;
onClicked: {
}
}
}
}
Item {
id:item2;
Rectangle{
anchors.fill: parent
BorderImage {
anchors.fill: parent
source: "qrc:/image/2.jpg"
border.left: 5; border.top: 5
border.right: 5; border.bottom: 5
}
}
}
Item {
id:item3;
Rectangle{
anchors.fill: parent
BorderImage {
anchors.fill: parent
source: "qrc:/image/3.jpg"
border.left: 5; border.top: 5
border.right: 5; border.bottom: 5
}
}
}
}
PageIndicator{
id:pageit;
anchors.bottom: sw.bottom;
anchors.bottomMargin: 10;
anchors.horizontalCenter: sw.horizontalCenter
count: 3;
currentIndex: sw.currentIndex;
}
Timer{
running: true;
repeat: true
id:time;
interval: 1500;
onTriggered: {
var Tmp = pageit.currentIndex;
Tmp++;
if(Tmp>2)
{
Tmp=0;
}
pageit.currentIndex = Tmp;
}
}
}
}
}