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 library

2、安装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