QT(三).电子相册（1）

2021-09-14 14:10:07 浏览数 (1)

前言

Qt 是一个著名的 C 应用程序框架

Tip: 虽然 Qt 常被用来开发图形界面应用，但它并不仅仅局限于 GUI 应用

Qt 是一个跨平台的框架

Qt 是 C 编程思想的集大成者，从中可以习得很多优秀的编程最佳实践

前面一篇使用 Qt 实现了一个简单的计算器，下面使用 Qt 制作一个简单的电子相册

Tip: 当前的最新版本为 Qt 5.8 ，实验使用 Qt 4.8.6

概要

平台与环境

应用的开发无法脱离具体的平台与环境，即便声称为跨平台的框架，在现实情况中，同样一套代码，在不同的平台与环境中也不一定会获得相同的效果

代码语言：javascript复制
[emacs@h102 ~]$ cat /etc/issue
CentOS release 6.6 (Final)
Kernel r on an m

[emacs@h102 ~]$ uname -a 
Linux h102.temp 2.6.32-504.el6.x86_64 #1 SMP Wed Oct 15 04:27:16 UTC 2014 x86_64 x86_64 x86_64 GNU/Linux
[emacs@h102 ~]$ gcc -v 
Using built-in specs.
Target: x86_64-redhat-linux
Configured with: ../configure --prefix=/usr --mandir=/usr/share/man --infodir=/usr/share/info --with-bugurl=http://bugzilla.redhat.com/bugzilla --enable-bootstrap --enable-shared --enable-threads=posix --enable-checking=release --with-system-zlib --enable-__cxa_atexit --disable-libunwind-exceptions --enable-gnu-unique-object --enable-languages=c,c  ,objc,obj-c  ,java,fortran,ada --enable-java-awt=gtk --disable-dssi --with-java-home=/usr/lib/jvm/java-1.5.0-gcj-1.5.0.0/jre --enable-libgcj-multifile --enable-java-maintainer-mode --with-ecj-jar=/usr/share/java/eclipse-ecj.jar --disable-libjava-multilib --with-ppl --with-cloog --with-tune=generic --with-arch_32=i686 --build=x86_64-redhat-linux
Thread model: posix
gcc version 4.4.7 20120313 (Red Hat 4.4.7-11) (GCC) 
[emacs@h102 ~]$ qmake -v 
QMake version 2.01a
Using Qt version 4.8.6 in /usr/local/Trolltech/Qt-4.8.6/lib
[emacs@h102 ~]$

Tip: 虽然 Qt 的最新版本为 Qt 5.8 ，但是这里实验依旧使用的 Qt version 4.8.6

计算器

要求

  • 使用 Qt 写一个电子相册的GUI程序

创建项目

实际上就是创建一个专用的文件夹

代码语言：javascript复制
[emacs@h102 demo]$ pwd
/home/emacs/demo
[emacs@h102 demo]$ mkdir pic
[emacs@h102 demo]$ ls
calc  hello  pic
[emacs@h102 demo]$

设计界面

使用 designer 进行 UI 界面设计

代码语言：javascript复制
[emacs@h102 pic]$ designer
...
...

Tip: 这条命令在我的具体平台和环境下绝对路径为 /usr/local/Trolltech/Qt-4.8.6/bin/designer ，决定于 Qt 的安装路径，为了方便使用，要将bin目录添加到PATH环境变量中来，以高效调用

最开始会有如下界面：

对话窗口提示创建对象

设计界面

具体的设计方法就是各种托拽，大小调整和布局调整，下面就是一个丑陋的最终产物(实践证明本宝宝在UI的美化上还有很长的路要走)

保存退出后，最终的产物是一个 *.ui 文件

在这个例子中是 pic.ui

代码语言：javascript复制
[emacs@h102 pic]$ ls pic.ui 
pic.ui
[emacs@h102 pic]$ file pic.ui 
pic.ui: XML  document text
[emacs@h102 pic]$ cat pic.ui 
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Pic</class>
 <widget class="QDialog" name="pic">
  <property name="enabled">
   <bool>true</bool>
  </property>
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>656</width>
    <height>356</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Dialog</string>
  </property>
  <widget class="QGroupBox" name="gbMode">
   <property name="enabled">
    <bool>true</bool>
   </property>
   <property name="geometry">
    <rect>
     <x>530</x>
     <y>0</y>
     <width>111</width>
     <height>111</height>
    </rect>
   </property>
   <property name="autoFillBackground">
    <bool>false</bool>
   </property>
   <property name="title">
    <string>mode</string>
   </property>
   <property name="flat">
    <bool>false</bool>
   </property>
   <property name="checkable">
    <bool>false</bool>
   </property>
   <widget class="QRadioButton" name="rbMan">
    <property name="geometry">
     <rect>
      <x>11</x>
      <y>30</y>
      <width>76</width>
      <height>23</height>
     </rect>
    </property>
    <property name="text">
     <string>manual</string>
    </property>
   </widget>
   <widget class="QRadioButton" name="rbAuto">
    <property name="geometry">
     <rect>
      <x>11</x>
      <y>68</y>
      <width>55</width>
      <height>23</height>
     </rect>
    </property>
    <property name="text">
     <string>auto</string>
    </property>
   </widget>
  </widget>
  <widget class="QGroupBox" name="gbMan">
   <property name="enabled">
    <bool>true</bool>
   </property>
   <property name="geometry">
    <rect>
     <x>530</x>
     <y>170</y>
     <width>111</width>
     <height>171</height>
    </rect>
   </property>
   <property name="title">
    <string>manual</string>
   </property>
   <widget class="QPushButton" name="pbFirst">
    <property name="geometry">
     <rect>
      <x>11</x>
      <y>21</y>
      <width>77</width>
      <height>30</height>
     </rect>
    </property>
    <property name="text">
     <string>|&lt;</string>
    </property>
   </widget>
   <widget class="QPushButton" name="pbPre">
    <property name="geometry">
     <rect>
      <x>11</x>
      <y>57</y>
      <width>77</width>
      <height>30</height>
     </rect>
    </property>
    <property name="text">
     <string>&lt;</string>
    </property>
   </widget>
   <widget class="QPushButton" name="pbNext">
    <property name="geometry">
     <rect>
      <x>11</x>
      <y>93</y>
      <width>77</width>
      <height>30</height>
     </rect>
    </property>
    <property name="text">
     <string>&gt;</string>
    </property>
   </widget>
   <widget class="QPushButton" name="pbLast">
    <property name="geometry">
     <rect>
      <x>11</x>
      <y>129</y>
      <width>77</width>
      <height>30</height>
     </rect>
    </property>
    <property name="text">
     <string>&gt;|</string>
    </property>
   </widget>
  </widget>
  <widget class="QLabel" name="lbPic">
   <property name="geometry">
    <rect>
     <x>20</x>
     <y>40</y>
     <width>481</width>
     <height>301</height>
    </rect>
   </property>
   <property name="autoFillBackground">
    <bool>false</bool>
   </property>
   <property name="text">
    <string>pic</string>
   </property>
   <property name="scaledContents">
    <bool>true</bool>
   </property>
  </widget>
  <widget class="QGroupBox" name="gbAuto">
   <property name="enabled">
    <bool>true</bool>
   </property>
   <property name="geometry">
    <rect>
     <x>530</x>
     <y>110</y>
     <width>111</width>
     <height>61</height>
    </rect>
   </property>
   <property name="title">
    <string>auto</string>
   </property>
   <widget class="QLineEdit" name="le">
    <property name="geometry">
     <rect>
      <x>10</x>
      <y>20</y>
      <width>91</width>
      <height>25</height>
     </rect>
    </property>
   </widget>
  </widget>
  <widget class="QLabel" name="lbTime">
   <property name="geometry">
    <rect>
     <x>20</x>
     <y>10</y>
     <width>271</width>
     <height>18</height>
    </rect>
   </property>
   <property name="text">
    <string>now</string>
   </property>
  </widget>
 </widget>
 <resources/>
 <connections/>
</ui>
[emacs@h102 pic]$
qt c++ gui

0 人点赞