×
Namespaces

Variants
Actions

在Qt 和 WP7上的基本UI组件

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上创建一些基本的UI组件。

Contents

简介

这篇文章基本上是针对那些熟悉Qt平台并想要了解WP7平台的人。在这里我们将会看到如何在Qt 和 WP7上创建一些基本的UI组件。我们将专注于Qt的 UI并在WP7上创建相同的组件。

Qt UI Components
WP7 UI Components

基本理念

首先我们将会在Qt上的项目中创建几个UI组件,并尝试在WP7中创建相同的。对于Qt,我们将要用到的UI元素有TextBox, ProgressBar, Button, RadioButton, CheckBox, MenuBar。一旦我们完成了Qt中的每个组件,我们将为WP7创建相同的组件。

实现

让我们在Qt 和 WP7上分别创建一个空项目,并在各自的项目中添加以下的组件。

应用程序菜单栏

Qt Project

这是在Qt中的带有ToolButtonToolBar,相对于普通的Button,它提供了不同的外观风格。

// tool bar
 
ToolBar {
anchors.bottom: parent.bottom
tools: ToolBarLayout {
ToolButton {
iconSource: "toolbar-back"
onClicked: pageStack.depth <= 1 ? Qt.quit() : pageStack.pop()
}
ToolButton {
iconSource: "toolbar-search"
onClicked: mainText.text ="Search"
}
ToolButton {
iconSource: "toolbar-refresh"
onClicked: mainText.text = "Refresh "
}
ToolButton {
iconSource: "toolbar-menu"
onClicked: (myMenu.status == DialogStatus.Closed) ? myMenu.open() : myMenu.close()
}
}
}

WP7 project

下面的WP7代码利用XAML编写,它使用了ApplicationBar,且有四个ApplicationBarIconButton。
<!—实例代码显示了ApplicationBar的用法 >
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton x:Name="BackButton" IconUri="/Images/appbar.back.rest.png" Text="Back" Click="BackButton_Click" />
<shell:ApplicationBarIconButton x:Name="SearchButton" IconUri="/Images/appbar.feature.search.rest.png" Text="Search" Click="SearchButton_Click" />
<shell:ApplicationBarIconButton x:Name="RefreshButton" IconUri="/Images/appbar.refresh.rest.png" Text="Refresh" Click="RefreshButton_Click"/>
<shell:ApplicationBarIconButton x:Name="FavButton" IconUri="/Images/appbar.favs.rest.png" Text="favourite" Click="FavButton_Click"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

应用程序菜单项

除了Menu Bar上的图标外,我们还添加了基于文本的菜单项。这些菜单项在list view里显示。

Qt Project

这是已被添加到应用程序菜单条,可用于访问特定功能的菜单项。

//菜单项
Menu {
id: myMenu
visualParent: pageStack
MenuLayout {
MenuItem
{
text: qsTr("Menu1")
onClicked: mainText.text = "Menu1 is Clicked"
}
MenuItem{
text:qsTr("Menu2")
onClicked: mainText.text = "Menu2 is Clicked"
}
MenuItem{
text:qsTr("Menu3")
platformSubItemIndicator: true
onClicked: subMenu.open()
}
}
}
//副菜单
ContextMenu {
id: subMenu
MenuLayout {
MenuItem {
text: "Red"
onClicked: mainText.text = "Red is Clicked"
}
MenuItem {
text: "Green"
onClicked: mainText.text = "Green is Clicked"
}
MenuItem {
text: "Blue"
onClicked:mainText.text = "Blue is Clicked"
}
}
}

WP7 project

下面是在WP7中用XAML编写的代码,它在ApplicationBar中创建了三个菜单项。

<!实例代码显示了ApplicationBar 的使用>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem x:Name="Menu1" Text="Menu 1" Click="Menu1_Click"/>
<shell:ApplicationBarMenuItem x:Name="Menu2" Text="Menu 2" Click="Menu2_Click"/>
<shell:ApplicationBarMenuItem x:Name="Menu3" Text="Menu 3" Click="Menu3_Click"/>
</shell:ApplicationBar.MenuItems>
</phone:PhoneApplicationPage.ApplicationBar>

Note.pngNote: 在这里显示了代码结构之间的差异,我将菜单栏和菜单项的代码分开,但同时这些代码也可以结合在一起并在源代码中相互关联。

文本字段

Text file是用来从用户输入中获得文本。当用户点击了text filed区域,虚拟键盘弹出并允许用户在text filed区域编辑文字。这是一个单行纯文本编辑器。

Qt project

// text box
TextField {
anchors.top:statusBar.bottom
anchors.left: parent.left
anchors.right: parent.right
id:textField
width: 160
placeholderText: "Enter Text Here"
validator: IntValidator{bottom: 0; top: 100}
}

WP7 project

<TextBox Height="72" HorizontalAlignment="Left" Margin="39,26,0,0" Name="textBox1" Text="Enter Text Here" VerticalAlignment="Top" Width="381" />

进度条

进度条,我们使用indeterminate状态的进度栏。

Qt project

ProgressBar {
anchors.top:textField.bottom
anchors.left: parent.left
anchors.right: parent.right
id: progressBar
indeterminate: true
visible: simpletimer.running
}

WP7 project

<ProgressBar Height="5" HorizontalAlignment="Left" Margin="29,121,0,0" Name="progressBar1" VerticalAlignment="Top" Width="391" />

Button

我们将创建一个里面带有文本的button。当点击button时,我们将调用事件处理程序来执行某些任务。

Qt project

//button
Button {
id: button
anchors.top: progressBar.bottom
anchors.left: parent.left
anchors.right: parent.right
text: "Signals"
onPlatformReleased: {
mainText.text = "Button Released"
}
onClicked: {
mainText.text = "Button Clicked"
}
onPlatformPressAndHold: {
mainText.text ="Button Press and Hold"
}
}

WP7 project

<Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="29,152,0,0" Name="button1" VerticalAlignment="Top" Width="391" Click="button1_Click" />

Radio Button

让我们创建一个带有一行文本的RadioButton。当用户选择了radio button时,我们捕获事件并进行处理。

Qt project

// radio button
Row {
anchors.top:button.bottom
id: radioButton
anchors.left: parent.left
RadioButton {
id: button1
text: "Radio Button"
checked: false
onClicked: if(checked) {mainText.text = "Radio Checked"} else {mainText.text ="Radio Un-Checked"}
}
}

WP7 project

<RadioButton Content="RadioButton" Height="72" HorizontalAlignment="Left" Margin="29,251,0,0" Name="radioButton1" VerticalAlignment="Top" Checked="radioButton1_Checked"/>

Check Box

CheckBox返回的是该框是否被选中并返回事件的处理。

Qt project

//CheckBox
CheckBox {
anchors.top: button.bottom
anchors.right: parent.right
id: checkBox
text: "Check Box "
checked: false
onClicked: if(checked) {mainText.text ="Check Box Checked"} else {mainText.text = "Check Box Un-Checked"}
}

WP7 project

<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="255,251,0,0" Name="checkBox1" VerticalAlignment="Top" Checked="checkBox1_Checked" Unchecked="checkBox1_Unchecked" />

Text Block

这是一个文本常量块,用户不能通过输入修改文字。在我们的例子中,我们将选定控件的名称显示在这个TextBlock中。

Qt project

Text {
id:mainText
anchors.centerIn: parent
text: qsTr("Hello world!")
color: platformStyle.colorNormalLight
font.pixelSize: 20
}

WP7 projet

<TextBlock x:Name="PageTitle" Text="hello world !" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

Note.pngNote: 当用户点击UI上的任何控件,我们捕捉事件并将控件的名称显示在Text Box里。注意:当用户点击UI上的任何控件,我们捕捉事件并将控件的名称显示在Text Box里。

源代码

	在Qt上完整的源代码实例在如下网站获得:
	                                                                   File:UIComponentQt.zip 
	在WP7上完整的源代码实例在如下网站获得:
                                                                              File:UIComponentWP7.zip
This page was last modified on 16 July 2013, at 01:29.
80 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×