C语言桌面应用开发GTK3 Glade GTK主题

已于 2024-02-07 14:42:02 修改
阅读量745 收藏 17
点赞数 14
文章标签： c语言 开发语言 前端框架
于 2024-02-04 14:55:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42607526/article/details/136025854
版权

文章目录

GTK 简介

GTK（GIMP Toolkit）是一套用于创建图形用户界面（GUI）的开发工具包。它最初是为GNU Image Manipulation Program（GIMP）项目而开发的，但后来发展成为一个独立的开源项目，被广泛用于许多不同的应用程序。

以下是GTK的一些关键特点和信息：

  • 跨平台性： GTK是跨平台的，可以在多个操作系统上运行，包括Linux、Windows和macOS。这使得开发人员能够创建一次界面设计，然后在不同平台上部署。

  • 编程语言支持： GTK最初是用C编写的，但它支持多种编程语言，包括C、C++、Python、Vala等。这使得开发者可以选择最适合他们的语言来构建应用程序。

  • 插件式架构： GTK的设计是模块化的，允许开发者使用或替换特定的组件，以满足他们应用程序的需求。这使得GTK非常灵活，适用于各种不同类型的应用。

  • Widgts和控件： GTK包括丰富的窗口小部件（Widgets）和控件，如按钮、文本框、列表框等，使开发者能够轻松地构建各种用户界面。

  • 主题和外观： GTK提供了主题支持，允许开发者定制应用程序的外观和感觉，以适应不同的设计风格和用户喜好。

  • GLib和Pango： GTK使用GLib作为其底层的通用工具库，提供一些数据结构和函数。Pango用于文本渲染，支持复杂的文本布局和国际化。

GTK Github

GTK 官网

  • https://www.gtk.org/
  • https://www.gtk.org/docs/
  • https://docs.gtk.org/gtk4/

GTK 组件文档

  • https://docs.gtk.org/gtk4/index.html#classes
  • https://docs.gtk.org/gtk4/class.Button.html

GTK 官方示例

github最新版本是 gtk4

git clone https://github.com/GNOME/gtk.git
# 创建 dist
mkdir dist
# 测试代码目录
cd tests
gcc $(pkg-config --cflags gtk4) -o ../dist/testdropdown  testdropdown.c $(pkg-config --libs gtk4)
# 运行程序
../dist/testdropdown

GTK 开发环境

注： 以下操作均在 Mac 环境

xcode-select --install
brew install pkg-config
# pkgconfig 路径
find / -name pkgconfig
# 是否支持GTK+
brew search gtk
brew install gtk+3
# 验证 gtk+3
pkg-config --cflags --libs gtk+-3.0

配置环境变量

# 检查 pkgconfig 路径
find / -name pkgconfig
# 将以上路径添加到环境变量中（.bash_profile 或 .zshrc）
vim ~/.zshrc
export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig/:$PKG_CONFIG_PATH
source ~/.zshrc

安装 Glade

Glade是一个用于创建GTK图形用户界面的用户界面构建器。它允许开发者通过可视化方式设计和布局GUI元素，而不必手动编写代码。Glade生成XML格式的描述文件，描述了用户界面的结构和属性。然后，这个XML文件可以由程序加载和解释，从而创建用户界面。

  • 可视化设计：Glade提供了一个直观的图形用户界面，允许用户通过拖放方式设计和布局界面元素，无需手动编写代码。
  • 生成XML描述文件：设计完成后，Glade会生成一个XML格式的描述文件，其中包含了用户界面的结构和属性信息。
  • 与多种编程语言兼容：由于生成的描述文件是基于XML的，因此可以与多种编程语言一起使用。GTK支持多种编程语言，包括C、C++、Python等。
  • 与IDE集成：Glade可以与多个集成开发环境（IDE）一起使用，例如GNOME Builder，以便更方便地进行开发和调试。
  • Glade Github
    • https://github.com/GNOME/glade
    • https://gitlab.gnome.org/GNOME/glade
  • Glade 教程
    • https://developer.gnome.org/
  • 安装 Glade
# 目前版本支持gtk+3
brew install glade
glade --version
# 启动glade
glade

  • Glade 操作界面
    在这里插入图片描述

  • 保存后会生成如下 demo.glade 文件

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.40.0 -->
<interface>
  <requires lib="gtk+" version="3.24"/>
  <object class="GtkWindow" id="window">
    <property name="width-request">400</property>
    <property name="height-request">200</property>
    <property name="can-focus">False</property>
    <property name="title" translatable="yes">demo</property>
    <child>
      <object class="GtkBox" id="box">
        <property name="visible">True</property>
        <property name="can-focus">False</property>
        <property name="orientation">vertical</property>
        <child>
          <object class="GtkButton" id="button">
            <property name="label" translatable="yes">button</property>
            <property name="visible">True</property>
            <property name="can-focus">True</property>
            <property name="receives-default">True</property>
            <property name="margin-start">10</property>
            <property name="margin-end">10</property>
            <property name="margin-top">10</property>
            <property name="margin-bottom">10</property>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <object class="GtkComboBoxText" id="combobox">
            <property name="visible">True</property>
            <property name="can-focus">False</property>
            <property name="margin-start">10</property>
            <property name="margin-end">10</property>
            <property name="margin-top">10</property>
            <property name="margin-bottom">10</property>
            <property name="active">0</property>
            <property name="active-id">1</property>
            <items>
              <item id="1" translatable="yes">item1</item>
              <item id="2" translatable="yes">item2</item>
              <item id="3" translatable="yes">item3</item>
              <item id="4" translatable="yes">item4</item>
            </items>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">1</property>
          </packing>
        </child>
        <child>
          <object class="GtkEntry" id="entry">
            <property name="visible">True</property>
            <property name="can-focus">True</property>
            <property name="margin-start">10</property>
            <property name="margin-end">10</property>
            <property name="margin-top">10</property>
            <property name="margin-bottom">10</property>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">2</property>
          </packing>
        </child>
      </object>
    </child>
  </object>
</interface>

完整示例 demo.c

示例使用 gtk+3 与 demo.glade 文件构建界面

#include <gtk/gtk.h>

static void
on_button_clicked (GtkButton *button, gpointer user_data)
{
  g_print ("Hello World\n");
}

static void
on_combobox_changed (GtkComboBox *combobox, gpointer user_data)
{
  gint active_item = gtk_combo_box_get_active (combobox);
  const gchar *active_id = gtk_combo_box_get_active_id (GTK_COMBO_BOX (combobox));
  g_print ("Selected item: %d, active_id: %s\n", active_item, active_id);
}

static void
on_entry_changed (GtkEntry *entry, gpointer user_data)
{
  const gchar *text = gtk_entry_get_text (entry);
  g_print ("Entry Text: %s\n", text);
}

static void
on_entry_activate (GtkEntry *entry, gpointer user_data)
{
  const gchar *text = gtk_entry_get_text (entry);
  g_print ("Entry Text: %s\n", text);
}

int
main (int argc, char **argv)
{
  GtkBuilder *builder = gtk_builder_new ();
  GtkWidget *window;
  GtkWidget *button;
  GtkWidget *combobox;
  GtkWidget *entry;

  gtk_init (&argc, &argv);
  gtk_builder_add_from_file (builder, "demo.glade", NULL);

  window = GTK_WIDGET (gtk_builder_get_object (builder, "window"));
  button = GTK_WIDGET (gtk_builder_get_object (builder, "button"));
  combobox = GTK_WIDGET (gtk_builder_get_object (builder, "combobox"));
  entry = GTK_WIDGET (gtk_builder_get_object (builder, "entry"));

  gtk_window_set_position (GTK_WINDOW (window), GTK_WIN_POS_CENTER);
	
  g_signal_connect (window, "destroy", G_CALLBACK (gtk_main_quit), NULL);
  g_signal_connect (button, "clicked", G_CALLBACK (on_button_clicked), NULL);
  g_signal_connect (combobox, "changed", G_CALLBACK (on_combobox_changed), NULL);
  g_signal_connect (entry, "changed", G_CALLBACK (on_entry_changed), NULL);
  g_signal_connect (entry, "activate", G_CALLBACK (on_entry_activate), NULL);

  g_object_unref (G_OBJECT (builder));
  gtk_widget_show (window);

  gtk_main ();
  return 0;
}

运行效果

# 编译demo.c
gcc $(pkg-config --cflags gtk+-3.0) -o demo demo.c $(pkg-config --libs gtk+-3.0)
# 或
gcc -o demo demo.c `pkg-config --cflags --libs gtk+-3.0`

# 执行编译后文件demo
./demo

在这里插入图片描述

GTK 主题

  • https://www.gnome-look.org/browse?cat=135&ord=latest

推荐主题

  • https://www.gnome-look.org/p/1403328

  • https://github.com/vinceliuice/WhiteSur-gtk-theme

  • https://www.gnome-look.org/p/1357889

  • https://github.com/vinceliuice/Orchis-theme

  • https://github.com/vinceliuice/Mojave-gtk-theme

  • https://github.com/paullinuxthemer/Prof-Gnome

全局主题配置

  • GTK主题
# Mac 主题文件解压到.themes
# Windows msys64/mingw64/share/themes
cd ~/.themes

在这里插入图片描述

# 确保文件夹包含诸如 index.theme 文件以及其他图标和资源文件
ls ~/.themes/WhiteSur-Dark
  • 设置主题
# Mac GTK配置文件settings.ini
# Windows msys64/mingw64/etc/gtk-3.0
vim ~/.config/gtk-3.0/settings.ini
# 添加主题
[Settings]
gtk-theme-name = WhiteSur-Dark
gtk-icon-theme-name = WhiteSur-Dark

  • 运行效果
    在这里插入图片描述

  • 更新GTK缓存

gtk-update-icon-cache -f ~/.themes/WhiteSur-Dark

项目主题配置

  • 项目目录结构
├── bin
│   ├── demo
│   ├── demo.c
│   ├── demo.glade
├── etc
│   ├── gtk-3.0
│       ├── settings.ini
├── share 
│   ├── themes
│       ├── Orchis-Dark
│       ├── WhiteSur-Dark
└──
  • 配置文件指定主题
# 存放主题文件目录
mkdir ./share/themes
# GTK主题配置文件
vim ./etc/gtk-3.0/settings.ini
# 在settings.ini中配置项目主题
[Settings]
gtk-theme-name = WhiteSur-Dark
gtk-icon-theme-name = WhiteSur-Dark
  • 通过代码指定主题

代码优先级高于settings.ini配置文件

int
main (int argc, char **argv)
{
    gtk_init (&argc, &argv);
    // 配置主题
    g_object_set (gtk_settings_get_default (), "gtk-theme-name", "WhiteSur-Dark", NULL);
    g_object_set (gtk_settings_get_default (), "gtk-icon-theme-name", "WhiteSur-Dark", NULL);
    
}
  • GTK_CSD配置（默认值为0）

GTK_CSD=1时应用样式完全按主题样式

int
main (int argc, char **argv)
{
	gtk_init (&argc, &argv);
	// 设置环境变量,GTK_CSD=1应用主题样式
	putenv ("GTK_CSD=1");
	
}

Mac 电脑上显示效果
在这里插入图片描述

vscode开发环境

  • .vscode/c_cpp_properties.json

GTK+3的includePath目录可以通过Python脚本生成

{
    "configurations": [
        {
            "name": "Mac",
            "includePath": [
                "${workspaceFolder}/**",
                "/usr/local/include"
            ],
            "defines": [],
            "macFrameworkPath": [
                "/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk/System/Library/Frameworks"
            ],
            "cStandard": "c17",
            "cppStandard": "c++17",
            "intelliSenseMode": "macos-clang-x64",
            "compilerPath": "/usr/bin/gcc"
        }
    ],
    "version": 4
}

Python脚本列出GTK+3的includePath头文目录

import subprocess
import json


def get_gtk_info():
    try:
        # 运行命令并捕获输出
        output = subprocess.check_output(
            ['pkg-config', '--cflags', '--libs', 'gtk+-3.0']).decode().strip()

        # 解析输出并提取包含路径
        include_paths = []
        for part in output.split():
            if part.startswith("-I"):
                include_paths.append(part[2:])

        # 构建JSON数据
        data = {"includePath": include_paths}

        return data
    except Exception as e:
        print(f"Error getting GTK information: {e}")
        return None


def main():
    gtk_info = get_gtk_info()
    if gtk_info:
        # 输出JSON数据
        print(json.dumps(gtk_info, indent=4))


if __name__ == "__main__":
    main()
逢生博客
关注
  • 14
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
c语言 图形界面 入门,C语言是怎么实现图形界面的？
weixin_36285392的博客
05-20 1万+
GTK就可以，一个基于C语言的免费、开源、跨平台图形工具包，可以直接使用C语言调用实现图形界面开发，下面我简单介绍一下这个工具包的安装和使用，这里以Windows平台为例：1.首先，下载GTK安装包，这个可以直接到CSDN上下载，一个zip压缩包，直接解压就行，地址https://download.csdn.net/download/qq_34816564/10925737，解压后的文件如下：2....
C语言开发windows桌面程序,演练：创建传统的 Windows 桌面应用程序 (c + +)
weixin_33726568的博客
05-17 1万+
演练：创建传统的 Windows 桌面应用程序 (c + +)05/28/2020本文内容本演练演示如何在 Visual Studio 中创建传统的 Windows 桌面应用程序。 要创建的示例应用程序使用 Windows API 显示 "Hello，Windows desktop！" 应用程序。 可以将本演练中开发的代码作为模式来创建其他 Windows 桌面应用程序。Windows API (...
GTK+系列---Glade一个用户界面设计器
热门推荐
drsonxu的博客
01-23 1万+
本文展示了如何创建一个C程序，该程序使用gtk+-3.0来显示一个使用glade 3用户界面设计器创建的窗口。关于MSYS2，glade等软件的安装，请参考之前GTK+系列文章。 Glade是什么？ glade是一个RAD（rapid application develop，快速应用开发）工具，能够为gtk+工具包和gnome桌面环境快速而简单地开发用户界面。Glade中设计的用户界面保存为X...
桌面程序开发语言介绍，上位机程序开发讨论
最新发布
wdywmz的专栏
05-19 873
桌面应用程序开发是指开发能够在用户的计算机或移动设备上本地运行的应用程序。在选择合适的编程语言时，需要考虑开发速度、性能、可移植性等因素。下面将介绍五种常用的桌面应用程序开发编程语言，并详细介绍其优势和劣势。
GTK入门学习：glade的介绍
秋叶原 && Mike || 麦克
01-22 4293
上面的学习中，我们是通过纯C语言代码来进行GTK编程的，这也是我们学习GTK的最佳方面，因为这样我们可以清楚地知道整个流程，大体流程如下： 1）创建主窗口，根据需要设置窗口的相应属性 2）创建布局容器 3）把布局容器添加到窗口里 4）根据需要创建相应的控件，根据需要设置控件的相应属性 5）把控件添加到布局容器里 6）根据需要处理控件的信号 7）显示所有的控件 用纯C语言写G
GTK参考手册Reference_Manual或叫API手册
weixin_42145772的博客
03-10 1903
GTK参考手册Reference_Manual或叫API手册 也叫API手册，Application Programming Interface应用程序编程接口，简单理解就是讲述函数是如何使用 在gtk.org官网介绍的有三个网站是可以查旧函数的 GTK+ 2 gimp Reference Manual https://developer.gimp.org/api/2.0/gtk/index.html GTK+ 2 Reference Manual: GTK+ 2 Reference Manual http
glade 与 gtk
weixin_34289744的博客
06-11 84
  glade2 与 glade 3 Libglade GTK+ and Glade3 GUI Programming Tutorial  GTK界面开发工具 GtkBuilder Glade 3与GTK+-2入门   知识点         glade3与glade2差别glade2生成代码，而glade3只生成xml文件（实现了与代码分离,支持其他语言调用,如python） ...
GTK+、glade学习（C、Python实现）
03-20
GTK+和Glade是Linux平台下开发图形用户界面（GUI）的重要工具，广泛应用于各种桌面应用和嵌入式系统。GTK+是一个用C语言编写的开源GUI库，它提供了丰富的控件和事件处理机制，而Glade则是一个设计工具，用于帮助...
gtk读取glade文件
07-27
3. **加载GLADE文件**: 在你的GTK程序中，使用`GtkBuilder`加载GLADE文件。这通常在程序初始化阶段完成。以下是一个简单的C语言示例： ```c GtkWidget *window; GtkBuilder *builder; builder = gtk_builder_...
GTK+3.0详细的说明文档
10-28
学习GTK3.0必备的资料,这个说明文档很好使用的
GTK教程（仅文档）
10-23
GTK教程
Linux应用程序开发指南：使用Gtk+ Gnome库
05-14
第一部分介绍Linux GUI编程架构以及编程基础知识，第二部分介绍Linux 编程常用C语言函数库glibc、构件库Gtk+、Gnome，第三部分介绍Linux下的GUI生成器Glade，第四部分介绍Linux编程调试工具gdb及xxgdb。第五部分包括...
基于GTK 库的GUI程序开发研究.pdf
09-07
本文讨论了基于GTK+ 库和GUI生成器Glade开发生用的应用程序的方式和特点，并结合一个基于GTK+ 库音频处理程序的开发实例，对其中的重点问题进行了说明。 GTK+ 库是Linux操作系统下的图形用户界面开发库，它提供了...
使用C Gtk写一个360网速指示器
AloneBo的博客
08-16 471
原文：https://www.jianshu.com/p/169682d4d71a 效果如下： ##1. 实现悬浮窗 实现悬浮窗的是使用GTK的GTK_WINDOW_POPUP类型，它可以实现没有任务窗口栏显示。 window = gtk_window_new(GTK_WINDOW_POPUP); ##2. 获取网络、内存信息 主要是读取/proc/net/dev 和 /proc/meminf...
Linux gtk开发教程,使用GTK+和Glade快速开发Linux图形界面
weixin_36221113的博客
05-04 1276
使用GTK+和Glade快速开发Linux图形界面Glade,GTK,Linux,draft,图形* 使用 GTK+ 和 Glade 快速开发Linux图形界面** GTK+ 简介*** 基本概念GTK+ 是一种用于创建图形界面的库. 嗯, gnome 用的就是它, 不过并不是说只有在 gnome 环境中才能用, 只要系统上装有 GTK 的库 (基本上有图形系统的个人机都会有的啦) 就能运行基于 ...
GTK帮助文档的使用
秋叶原 && Mike || 麦克
01-16 6278
学习图形界面开发，肯定离不开帮助文档的使用，因为它不像C语言那样就那么几个函数接口，图形接口的接口可以用海量来形容，常用的我们可能能记住，其它的真的没有必要去记，用到什么就去帮助文档查看用法。
C语言列举一个gtk3 GtkBox例子
05-19
以下是一个简单的 GTK3 程序，其中包含一个水平 GtkBox，其中包含两个按钮： ```c #include <gtk/gtk.h> static void button_clicked(GtkWidget *widget, gpointer data) { g_print("Button clicked: %s\n", ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

逢生博客

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值