Linux 系统图像化编程GTK入门
环境前期准备
演示环境：Windows 11 + Ubuntu 22.04.4 +VS Code
前提条件：1、Windows 11 子系统Ubuntu 22.04.4 已经安装图形化界面，如果没有安装请参考文章：
windows11子系统Ubuntu 22.04.4子安装图形化界面
2、Ubuntu 22.04.4 软件源修改为国内软件源，如果还没有更换请参考如下指令：
//查看Ubuntu 系统内核版本和版本代号
wz2012@LAPTOP-8R0KHL88:/mnt/e/vsCode/cpro$ uname -r
5.10.16.3-microsoft-standard-WSL2
wz2012@LAPTOP-8R0KHL88:/mnt/e/vsCode/cpro$ lsb_release -c
Codename: jammy
//更换Ubuntu 国内阿里云数据源
# vi /etc/apt/sources.list//添加如下内容
deb http://mirrors.aliyun.com/ubuntu/ jammy main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ jammy main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ jammy-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ jammy-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ jammy-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ jammy-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ jammy-proposed main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ jammy-proposed main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ jammy-backports main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ jammy-backports main restricted universe multiverse保存后执行如下指令：
1. sudo apt-get update 更新版本软件包信息
2. sudo apt-get upgrade 删除旧的
3. sudo apt-get remove gcc 删除默认gcc
4. sudo apt install build-essential
5. gcc -v 查看gcc 版本3、Ubuntu 软件包检索、查询、安装命令
apt-cache search all #查看软件包列表，非常多
apt-cache search all | grep XXX #正则查询带有XXX标识符的软件包
apt-get install XXX #安装软件包
apt-get remove XXX #卸载软件包，保留配置文件
apt-get -purge remove XXX #卸载软件包，删除配置文件
apt-get update #更新软件包列表
apt-get autoclean #清空deb软件包
dpkg -l #查看本机已安装的软件包，非常多第一步：Ubuntu 安装 GTK 软件包
请参考如下指令：
1、检索GTK 库，版本为libgtk-3-dev
wz2012@LAPTOP-8R0KHL88:~$ apt-cache search all | grep libgtk-3-dev
libgtk-3-dev - development files for the GTK library2、安装GTK 库，版本为libgtk-3-dev
wz2012@LAPTOP-8R0KHL88:~$ sudo apt-get install libgtk-3-dev
[sudo] password for wz2012:
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
.......第二步：VS Code 编写GTK 窗口程序
#include<stdio.h>
#include<gtk-3.0/gtk/gtk.h>/*** GTK 3.0 简单窗口输出*/static void print_hello(GtkWidget *widget, gpointer data) {g_print("Hello World\n");
}int main(int argc, char *argv[]) {GtkWidget *window;GtkWidget *button;gtk_init(&argc, &argv); // gtk 初始化window = gtk_window_new(GTK_WINDOW_TOPLEVEL); // gtk 窗口实例化g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL); //window 窗口绑定销毁事件,并触发gtk_main_quite 函数button = gtk_button_new_with_label("你好, GTK 3.0"); // gtk Button 实例化g_signal_connect(button, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数gtk_container_add(GTK_CONTAINER(window), button); // 将button 按钮放到windows 窗口容器中gtk_widget_show_all(window); // 显示windows 窗口包含的所有gtk 组件gtk_main(); //gtk 主事件循环开启return 0;
}
问题一：引入gtk 的头文件<gtk-3.0/gtk/gtk.h>,VSCode 显示：无法打开源文件 gtk-3.0/gtk/gtk.h
解决办法：通过dpkg 命令查看 GTK 包含那些文件，重点找出头文件和库文件。
dpkg -L libgtk-3-dev
...
/usr/include/gtk-3.0/gtk/gtk.h -- gtk3.0的头文件
/usr/lib/x86_64-linux-gnu/libgdk-3.so
/usr/lib/x86_64-linux-gnu/libgtk-3.so -- gtk3.0静态库文件路径地址
....问题二：编辑VS Code 扫描库文件路径地址。
第一步：执行：gcc -v -E -x c++ - 查看Ubuntu 系统 C语言 includePath 路径地址信息。
第二步：打开VSCode C/C++ 编辑配置，可以通过快捷键方式打开:Ctrl +Shirt +p
源内容
{"configurations": [{"name": "Linux","includePath": ["${workspaceFolder}/**"],"defines": [],"compilerPath": "/usr/bin/gcc","cStandard": "gnu17","cppStandard": "gnu++17","intelliSenseMode": "linux-gcc-x64"}],"version": 4
}添加Ubuntu C语言includePath 路径地址信息
{"configurations": [{"name": "Linux","includePath": ["/usr/include/**","${workspaceFolder}/**","/usr/include/c++/11","/usr/include/x86_64-linux-gnu/c++/11","/usr/include/c++/11/backward","/usr/lib/gcc/x86_64-linux-gnu/11/include","/usr/local/include","/usr/include/x86_64-linux-gnu"],"defines": [],"compilerPath": "/usr/bin/gcc","cStandard": "gnu17","cppStandard": "gnu++17","intelliSenseMode": "linux-gcc-x64"}],"version": 4
}添加GTK3.0 库路径地址信息："/usr/lib/**"
{"configurations": [{"name": "Linux","includePath": ["/usr/include/**","/usr/lib/**","${workspaceFolder}/**","/usr/include/c++/11","/usr/include/x86_64-linux-gnu/c++/11","/usr/include/c++/11/backward","/usr/lib/gcc/x86_64-linux-gnu/11/include","/usr/local/include","/usr/include/x86_64-linux-gnu"],"defines": [],"compilerPath": "/usr/bin/gcc","cStandard": "gnu17","cppStandard": "gnu++17","intelliSenseMode": "linux-gcc-x64"}],"version": 4
}问题三：启动startxface 4 提示服务无法正常连接
首先确认网络是无线还是有线，我现在连接的是无线网。使用ipconfig 命令查看相关ip 地址信息
编辑
$ vi ~/.bashrc
# 在文件最后追加下面内容,地址使用上面查看到的
旧 export DISPLAY=172.17,80.1:0
新 export DISPLAY=192.168.207.253:0$source ~/.bashrc
#执行刚修改的初始化文件，使之立即生效第三步：编译GTK程序，Ubuntu可视化窗口展示
编译GTK 程序指令:
gcc gtk_demo1.c -o gtk_demo1 `pkg-config --cflags --libs gtk+-3.0`wz2012@LAPTOP-8R0KHL88:/mnt/e/ubuntu_code$ ./gtk_demo1