我们知道现代手机能够随着手持的方位发生改变而使得手机的方位也随着发生改变。对有些应用来说,我们也希望手机的布局也能尾随发生变化。第二种情况是当我们的应用安装到不同屏幕尺寸的平台上,我们希望我们的布局会随着屏幕的尺寸不同而发生不同的变化。

我们能够利用剩余的空间显示很多其它的内容。

在Ubuntu平台中,我们使用一个称作为conditinal layout的机制来使得我们的布局发生改变。

conditional
layout
的上面能够阅读很多其它的内容。

1)下载我们在上节中设计好的应用


我们能够在例如以下的地址:

bzr branch lp:~liu-xiao-guo/debiantrial/developernews3

下载我们的源代码。我们能够安装到手机上并熟悉该应用。有关应用的文章在链接能够看到。

2)使用conditional layout


conditional layout可以使得我们依据屏幕的尺寸来安排我们的控件。以下我们来详细解说怎么实现它:

1)在我们的main.qml中增加例如以下的库:

import Ubuntu.Layouts 1.0

2)在main.qml中的PageStack之前,增加例如以下的代码:

 Layouts {
id: mainLayout
anchors.fill: parent layouts: [
ConditionalLayout {
name: 'flat'
when: mainLayout.width >= units.gu(70)
Page {
id: flatPage
title: i18n.tr("Developer News") tools: ToolbarItems {
ToolbarButton {
action: reloadAction
}
} Row {
anchors.fill: parent ItemLayout {
item: "articleList"
width: parent.width >= units.gu(100) ? units.gu(50) : parent.width/2
height: parent.height
}
ItemLayout {
item: "articleContent"
width: parent.width - articleList.width
height: parent.height
}
}
}
}
] onCurrentLayoutChanged: {
if (mainLayout.currentLayout != 'flat') {
mainView.activeLeafNode = pageStack.currentPage
}
}

w=247&h=106&rev=46&ac=1" width="247px;" height="106px;" alt="" style="">



























3)在PageStack中的ArticleListView增加:

 Layouts.item: "articleList"

4)在ArticleListView中的onClicked的例如以下代码:

 pageStack.push(contentPage)

替换为:

                   if (mainLayout.currentLayout != "flat") {
contentPage.title = instance.title
pageStack.push(contentPage)
}

5)在ArticleContent的定义中增加:

Layouts.item: "articleContent"

6)在main.qml的最后端增加:

}

如今我们已经完毕了我们的工作。我们如今执行一下我们的应用。当我们把我们的应用的尺寸设为例如以下的值时:

    width: units.gu(50)
height: units.gu(75)

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVWJ1bnR1VG91Y2g=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="200" height="300" alt="">  

当我们把应用的尺寸设为例如以下的值时:

    width: units.gu(100)
height: units.gu(75)

应用显示为:

终于的源代码在例如以下地址能够找到:

bzr branch lp:~liu-xiao-guo/debiantrial/developernews4

怎样在Ubuntu中使用条件布局的更多相关文章

  1. 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

    如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...

  2. Ubuntu中安装DiscuzX2

    http://blog.csdn.net/kevin_ysu/article/details/7452938 一.Apache的安装 Apache作为一个功能强大的Web程序,自然是架建Web服务器的 ...

  3. 代码中动态改变布局属性RelativeLayout.LayoutParams.addRule()

    我们知道,在 RelativeLayout 布局中有很多特殊的属性,通常在载入布局之前,在相关的xml文件中进行静态设置即可. 但是,在有些情况下,我们需要动态设置布局的属性,在不同的条件下设置不同的 ...

  4. mysql在ubuntu中的操作笔记(详)

    1.安装mysql客户端流程: -  登录navicat官网下载 -  将压缩包拷贝ubuntu中进行解压,解压命令:tar zxvf navicat.tar.gz -  进入解压目录,运行命令./s ...

  5. C++中虚基类在派生类中的内存布局

    今天重温C++的知识,当看到虚基类这点的时候,那时候也没有太过追究,就是知道虚基类是消除了类继承之间的二义性问题而已,可是很是好奇,它是怎么消除的,内存布局是怎么分配的呢?于是就深入研究了一下,具体的 ...

  6. Ubuntu中安装jenkins+docker,实现项目部署

    本人对于linux系统是个小白,恰逢公司新框架需要docker+jenkins部署项目,所以通过同事口述+一顿乱查,终于实现在虚拟机上搭建的ubuntu系统中 实现jenkins +docker 自动 ...

  7. ubuntu中安装visual studio code-(转载)

    在Ubuntu中安装Visual Studio Code 编译自:http://itsfoss.com/install-visual-studio-code-ubuntu/ 作者: Abhishek ...

  8. Android中的LinearLayout布局

    LinearLayout : 线性布局 在一般情况下,当有很多控件需要在一个界面列出来时,我们就可以使用线性布局(LinearLayout)了,  线性布局是按照垂直方向(vertical)或水平方向 ...

  9. Ubuntu中配置Java环境变量时,出现command not found问题解决记录

    百度出Ubuntu中配置Java环境变量时,在利用sudo gedit /etc/profile 对profile编辑后, 在terminal中输入 sudo source /etc/profile, ...

随机推荐

  1. qt实现-给SQLITE添加自定义函数

    需要使用sqlite里的password对某个字段进行加密,由于使用的sqlite是由QT封装好的QSqlDatabase,没有发现加载扩展函数的方法,所以自己实现了一个. 在网上也没找到相应的参考, ...

  2. cocos2dx进阶学习之CCTMXLayer

    继承关系 CCTMXLayer -> CCSpriteBatchNode CCTMXLayer是在瓦片地图中,抽象一个层的类,它继承自CCSpriteBatchNode,也就是说它抽象了一批相同 ...

  3. 如何安装系统认证签名过的APK

    如果你的App因为权限原因需要设置 android:sharedUserId="android.uid.system" 那么IDE编译出的包通常是无法直接安装的,查看控制台会发现报 ...

  4. Android:设置背景图和标题

    在MainActivity.onCreate(Bundle savedInstanceState){}设置背景图和标题. setTitle("wyl的diary");//标题,即左 ...

  5. OGG同构(ORACLE-ORACLE)、异构(ORACLE-MYSQL)同步配置及错误解析

    环境:11.2.0.3(已安装数据库实例)+OEL5.7 192.168.1.55 zlm sid:zlm11g 192.168.1.60 zlm2 sid:zlm11g 一.安装软件,配置环境,创建 ...

  6. 基于visual Studio2013解决算法导论之054图的邻接矩阵表示

     题目 图的邻接矩阵表示 解决代码及点评 // 图的邻接矩阵表示.cpp : 定义控制台应用程序的入口点. // #include <iostream> #include <l ...

  7. ViewPager控件的Demo

    1.主视图 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to ...

  8. 华为s5700 添加与删除vlan

    新建vlan 删除vlan ① 检查该VLAN下是否存在成员接口,使用如下命令:display vlan all② 如存在成员接口,则进入该接口视图,删除该成员,否则可略过此步骤,例如:interfa ...

  9. BZOJ 2510: 弱题( 矩阵快速幂 )

    每进行一次, 编号为x的数对x, 和(x+1)%N都有贡献 用矩阵快速幂, O(N3logK). 注意到是循环矩阵, 可以把矩阵乘法的复杂度降到O(N2). 所以总复杂度就是O(N2logK) --- ...

  10. 设计模式(二)单件模式Singleton(创建型)

    SINGLETON(单件)—对象创建型模式 几乎所有面向对象的程序中,总有一些类的对象需要是唯一的,例如,通过数据库句柄到数据库的连接是独占的.您希望在应用程序中共享数据库句柄,因为在保持连接打开或关 ...