×
Namespaces

Variants
Actions

Qt 和WP7上的tab控件

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon Porting.png
SignpostIcon WP7 70px.png
Article Metadata

代码示例
兼容于
文章
翻译:
最后由 hamishwillee 在 16 Jul 2013 编辑

这篇文章展示了如何在Qt 和WP7上创建tab控件。

Contents

简介

tab控件提供了一套基于选项卡的界面。一个tab界面是由tab头上的按钮和tab中的内容组成的。在Qt中,我们利用TabGroup来创建tab,但是在WP7中它有自己的一个Pivot控件来创建tab。在这篇文章中我们不会在代码中直接写Pivot,而是从toolbox中拖出并自动生成代码,这样我们也能看到如何在每个页面中像添加其他控件那样添加Pivot控件。

Qt Windows Phone
Tab Control in Qt
Tab Control in WP7
Example of Qt Example of WP

基本理念

我们将会创建三个tab并且每个tab的内容都不同。当用户点击tab时显示它里面的内容,在这里我们将使用不同的图片作为tab里的内容。对于Qt我们使用TabGroup,对于WP7我们使用Pivot控件。

实现

让我们在Qt 和 WP7上分别创建一个空的项目。在这个实例中我们首先在Qt项目中添加代码,然后将代码移植到WP7上。

Qt Project (main.qml)

首先我们在项目文件夹中添加一些缩略图。这些是我们将要用作tab内容的图片。当用户点击tab时它将显示对应的内容。

//定义一个有三个按钮的tab bar并将tab链接内容
TabBarLayout {
id: tabBarLayout
anchors { left: parent.left; right: parent.right; top: parent.top }
TabButton { tab: tab1content; text: "Tab 1" }
TabButton { tab: tab2content; text: "Tab 2" }
TabButton { tab: tab3content; text: "Tab 3" }
}
//定义一个空白的tab group以便我们能够添加内容页
TabGroup {
id: tabGroup
anchors { left: parent.left; right: parent.right; top: tabBarLayout.bottom; bottom: parent.bottom }
//定义一个空白的tab1
Page {
id: tab1content
Image {
id: image1
anchors.centerIn: parent
source: "Thumbnails/1.jpeg"
}
}
//定义一个空白的tab2
Page {
id: tab2content
Image {
id: image2
anchors.centerIn: parent
source: "Thumbnails/2.jpeg"
}
}
//定义一个空白的tab3
Page {
id: tab3content
Image {
id: image3
anchors.centerIn: parent
source: "Thumbnails/3.jpeg"
}
}
}

TabGroupTabBarLayout 组件是一起工作的。TabBarLayout 保存TabButton,并且每个TabButton指向不同的内容Page

WP7 Project (MainPage.xaml)

在WP7项目中,首先我们从toolbox中添加Pivot控件。右击ToolBox->Choose Items-> 选择Pivot,现在将Pivot控件从toolbox中加载到XAML页面。当我们将Pivot控件添加到XAML页面时,我们将会看到WP风格的tab。我们将图片定义为tab的内容。因此当用户点击不同的tab时显示不同的图片。

<controls:Pivot Height="574" HorizontalAlignment="Left" Margin="12,27,0,0" Name="pivot1" Title="" VerticalAlignment="Top" Width="444">
<controls:PivotItem Header="Tab 1">
 
<Grid>
<Image Height="150" HorizontalAlignment="Left" Margin="103,101,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="Thumbnails/1.jpeg" />
</Grid>
</controls:PivotItem>
<controls:PivotItem Header="Tab 2">
<Grid>
<Image Height="150" HorizontalAlignment="Left" Margin="103,101,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="Thumbnails/2.jpeg" />
</Grid>
</controls:PivotItem>
<controls:PivotItem Header="Tab 3">
<Grid>
<Image Height="150" HorizontalAlignment="Left" Margin="103,101,0,0" Name="image3" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="Thumbnails/3.jpeg"/>
</Grid>
</controls:PivotItem>
</controls:Pivot>

源代码

This page was last modified on 16 July 2013, at 01:21.
121 page views in the last 30 days.