deepinlinux20.8配置好了vscode+glade+gtk+c开发环境

在vscode+c开发环境基础上想整点带界面的程序，linux下比较方便的是gtk，但是又不想写界面，最好能鼠标点点就能把界面整好，这想法还不算过分，原来有glade这个工具，能画好界面保存为xml文件，程序里加载xml文件就好了。

第一步安装glade，注意应用商店里的可能版本比较老，界面还是英文，推荐用命令行安装中文的

        sudo apt-get install glade

第2步画一个空的界面保存为glade3.glade文件  

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.22.1 -->
<interface>
  <requires lib="gtk+" version="3.20"/>
  <object class="GtkWindow" id="window_main">
    <property name="can_focus">True</property>
    <property name="title" translatable="yes">使用glade设计gtk应用界面</property>
    <property name="default_width">640</property>
    <property name="default_height">480</property>
    <signal name="destroy" handler="on_window_main_destroy" swapped="no"/>
    <child>
      <placeholder/>
    </child>
    <child>
      <placeholder/>
    </child>
  </object>
</interface>

        第3步简单几句代码调用 hello.c

#include <gtk/gtk.h>

//用于点击关闭窗口结束应用
G_MODULE_EXPORT void on_window_main_destroy()
{
    gtk_main_quit();
}
int main(int argc, char* argv[])
{
    GtkBuilder* builder;
    GtkWidget* window;
    gtk_init(&argc, &argv);
    builder = gtk_builder_new();
    gtk_builder_add_from_file(builder, "glade3.glade", NULL);  
    gtk_builder_connect_signals(builder, NULL);
    GtkCssProvider* cssProvider = gtk_css_provider_new();
    gtk_style_context_add_provider_for_screen(gdk_screen_get_default(),
        GTK_STYLE_PROVIDER(cssProvider),
        GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
    g_object_unref(builder);
    gtk_css_provider_load_from_path(cssProvider, "csstest.css", NULL);

  window = GTK_WIDGET(gtk_builder_get_object(builder, "window_main"));
    g_object_unref(builder);
    gtk_widget_show(window);
    gtk_main();
    return 0;
}

第4步配置代码智能提醒 .vscode/c_cpp_properties.json

{
    "configurations": [
        {
            "name": "GTKLinux",
            "includePath": [
                "${workspaceFolder}/**",
                "/usr/include/**",
                "/usr/lib/x86_64-linux-gnu/**"
            ],
            "defines": [],
            "compilerPath": "/usr/bin/clang",
            "cStandard": "c17",
            "cppStandard": "c++14",
            "intelliSenseMode": "linux-clang-x64",
            "compilerArgs": [
               
            ]
        }
    ],
    "version": 4
}

第5步配置编译 .vscode/tasks.json

{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "cppbuild",
			"label": "buildFile",
			"command": "/usr/bin/gcc",
			"args": [
				"-fdiagnostics-color=always",
				"-g",
				"${file}",
				"-o",
				"${fileDirname}/${fileBasenameNoExtension}",
				"-pthread",
				"-I/usr/include/gtk-3.0",
				"-I/usr/include/at-spi2-atk/2.0",
				"-I/usr/include/at-spi-2.0",
				"-I/usr/include/dbus-1.0",
				"-I/usr/lib/x86_64-linux-gnu/dbus-1.0/include",
				"-I/usr/include/gtk-3.0",
				"-I/usr/include/gio-unix-2.0",
				"-I/usr/include/cairo",
				"-I/usr/include/pango-1.0",
				"-I/usr/include/fribidi",
				"-I/usr/include/harfbuzz",
				"-I/usr/include/atk-1.0",
				"-I/usr/include/cairo",
				"-I/usr/include/pixman-1",
				"-I/usr/include/uuid",
				"-I/usr/include/freetype2",
				"-I/usr/include/libpng16",
				"-I/usr/include/gdk-pixbuf-2.0",
				"-I/usr/include/libmount",
				"-I/usr/include/blkid",
				"-I/usr/include/glib-2.0",
				"-I/usr/lib/x86_64-linux-gnu/glib-2.0/include",
				"-lgtk-3",
				"-lgdk-3",
				"-lpangocairo-1.0",
				"-lpango-1.0",
				"-lharfbuzz",
				"-latk-1.0",
				"-lcairo-gobject",
				"-lcairo",
				"-lgdk_pixbuf-2.0",
				"-lgio-2.0",
				"-lgobject-2.0",
				"-lglib-2.0",
				"-Wl,--export-dynamic ",
				"-lgmodule-2.0"
			],
			"options": {
				"cwd": "${fileDirname}"
			},
			"problemMatcher": [
				"$gcc"
			],
			"group": "build",
			"detail": "编译器: /usr/bin/gcc GTK3"
		}
	]
}

第6步配置启动 .vscode/launch.json

{

    "version": "0.2.0",
    "configurations": [ 
        {
        "name": "(gdb) Launch",
        "type": "cppdbg",
        "request": "launch",
        "program": "${workspaceRoot}/${fileBasenameNoExtension}",    //编译后的二进制文件位置
        "args": [],
        "stopAtEntry": false,
        "cwd": "${workspaceRoot}",
        "environment": [],
        "externalConsole": false,    //如果是true，将在新的窗口（console）输出，反之在下面的输出选项卡输出
        "MIMode": "gdb",
        "miDebuggerPath": "gdb",
        "preLaunchTask": "buildFile",
        "setupCommands": [
            {
            "description": "Enable pretty-printing for gdb",
            "text": "-enable-pretty-printing",
            "ignoreFailures": true
            }
        ]
    }
    ]
}

第7步 增加css文件方便修改界面颜色字体等视觉效果，调用在上面第3步main函数里

window {
    background-color: #8596b0;
    color: blue;
}
label {
    color: green;
}
entry {
    min-height: 0px;
background-color: lightgrey;
color: blue;
}
button {
    background: #cccccc;
    text-shadow: 1px 1px 5px #87cefa;
    border-radius: 3px;
    color: #20b2aa;
    box-shadow: 0px 0px 5px lightgrey;
}
button:hover {
    background: #cccccc;
    text-shadow: 1px 1px 5px #87cefa;    
    color: #20b2aa;
    box-shadow: 0px 0px 5px rgb(235, 117, 117);
}
button:hover:active {
    background: #cccccc;
    text-shadow: 1px 1px 5px #87cefa;    
    color: #066964;
    box-shadow: 0px 0px 5px #c5e567;
}
.enter_button{
    background: #cccccc;
    text-shadow: 1px 1px 5px #87cefa;
    border-radius: 3px;
    color: #20b2aa;
    box-shadow: 0px 0px 5px lightgrey;
}

现在可以按F5运行看看效果了，编译出来程序很小，方便携带。