Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

在Qt 和WP7上使用Grid View

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

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


这篇文章展示了如何在Qt 和 WP7上显示Grid View里的内容。

Contents

简介

Grid View 提供了一个灵活的网格区域包括行和列。在Qt 上我们用GridView元素来显示内容,在WP7 上我们用Grid 类来显示内容。

Qt Windows Phone
Grid View in Qt
Grid View in WP7
Example of Qt Example of WP

基本理念

在这两个平台上我们将在grid view中显示一些图片。首先我们将在Qt 上创建一个grid view,然后我们在WP7上也创建一个。

实现

Qt Project (GridModel.qml)

Qt的GridView项提供了一个具有逐条记载模板的grid view。我们将利用内置的来自GridView项的QML元素ListModel来取出数据并在grid view里显示。一个GridView模型规定了显示怎样的数据。让我们创建一个简单的ListModel叫GridModel.qml

ListModel {
ListElement {
portrait: "Thumbnails/1.jpeg"
}
ListElement {
portrait: "Thumbnails/2.jpeg"
}
ListElement {
portrait: "Thumbnails/3.jpeg"
}
ListElement {
portrait: "Thumbnails/4.jpeg"
}
ListElement {
portrait: "Thumbnails/1.jpeg"
}
}

ListModel来存储图片路径并将图片显示在Grid View中。

Qt Project (main.qml)

GridView有一个delegate,它定义了内容应如何显示。Grid View里的记录将按水平的或垂直的方式显示。Grid View里有flickable,它是从Flickable那里继承来的。

GridView {
id: grid
anchors.fill: parent
cellWidth: (parent.width)/2; cellHeight: cellWidth;
width: parent.width; height: parent.height
model: GridModel {}
delegate: Column {
Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter; anchors.verticalCenter: parent.verticalCenter }
}
}
}

在这里我们给模型中的每一项创建了一个新的delegate。这个delegate能够直接访问模型里的数据(纵向)。

WP7 Project (MainPage.xaml)

在WP7里我们用RowDefinitionsColumnDefinitions定义了网格的行和列。RowDefinitionsColumnDefinitions集合为里面的每个RowDefinitionColumnDefinition对象定义了一个单独的行和列。我们可以利用Grid.ColumnGrid.Row属性在网格的具体单元格中放置特定的对象。为了使grid view flickable,我们将Grid放置在ListBox里。

<!ContentPanel-在这里放置附加的内容>
<ListBox Grid.Row="1" >
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
 
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
 
<Image Source="Thumbnails\1.jpeg" Grid.Row="0" Grid.Column="0" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
<Image Source="Thumbnails\2.jpeg" Grid.Row="0" Grid.Column="1" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
<Image Source="Thumbnails\3.jpeg" Grid.Row="1" Grid.Column="0" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
<Image Source="Thumbnails\4.jpeg" Grid.Row="1" Grid.Column="1" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
<Image Source="Thumbnails\5.jpeg" Grid.Row="2" Grid.Column="0" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
 
</Grid>
</ListBox>

在这种情况下,图片是放置在定义好的行和列中。

源代码

在Qt中完整的源代码在下面网址获得:File:GridViewQt.zip 在WP7中完整的源代码在下面网址获得:File:GridViewWP7.zip

This page was last modified on 15 July 2013, at 22:30.
116 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.

×