GTK ツリービューの原理と使用法の分析

GTK ツリービューの原理と使用法の分析

GtkTreeView コンポーネントは、美しい通常のリストやツリーのようなリストを作成できる高度なコンポーネントです。この構造には 1 行以上を含めることができます。彼の構造はどうですか?有名なMVC(モデル・ビュー・コントローラー)設計フレームワークを採用しています。つまり、データと表示方法が分離されているのです。

したがって、GtktreeView コンポーネントには、実際には他の独立したオブジェクト構造 (オブジェクト) がいくつかあります。

GtkCellRenderer は、GtkTreeViewColumn のデータの表示方法を決定します。

GtkListStore と GtkTreeStore の機能は、モデルの役割を反映することです。

つまり、GtkTreeView に表示されるデータを処理および分析するために使用されます。

GtkTreeIter は、GtkTreeView コンポーネントの行のデータに対して操作を行うために使用されるデータ構造です。

オプションを処理するには GtkTreeSelection が使用されます。

効果は以下のとおりです

コードは次のとおりです

#include <gtk/gtk.h>

列挙型
{
  リスト項目 = 0、
  N_列
};

void init_list(GtkWidget *リスト)
{

  GtkCellRenderer *レンダラー;
  GtkTreeViewColumn *列;
  GtkListStore * ストア;

  レンダラー = gtk_cell_renderer_text_new();
  column = gtk_tree_view_column_new_with_attributes("リスト項目",
       レンダラー、「テキスト」、LIST_ITEM、NULL);
  gtk_tree_view_append_column(GTK_TREE_VIEW(リスト)、列);

  ストア = gtk_list_store_new(N_COLUMNS、G_TYPE_STRING);

  gtk_tree_view_set_model(GTK_TREE_VIEW(リスト),
              GTK_TREE_MODEL(ストア));

  g_object_unref(ストア);
}

void add_to_list(GtkWidget *list, const gchar *str)
{

  GtkListStore * ストア;
  GtkTreeIter の反復;

  ストア = GTK_LIST_STORE(gtk_tree_view_get_model
              (GTK_TREE_VIEW(リスト)));

  gtk_list_store_append(ストア、&iter);
  gtk_list_store_set(ストア、&iter、LIST_ITEM、str、-1);
}


void on_changed(GtkWidget *ウィジェット、gpointer ラベル)
{

  GtkTreeIter の反復;
  GtkTreeModel *モデル;
  gchar *値;

  (gtk_tree_selection_get_selected()の場合
        GTK_TREE_SELECTION(ウィジェット、&モデル、&イター))
  {

    gtk_tree_model_get(モデル、&iter、LIST_ITEM、&値、-1);
    gtk_label_set_text(GTK_LABEL(ラベル), 値);
    g_free(値);
  }
}

int main(int argc, char *argv[])
{

  GtkWidget *ウィンドウ;
  GtkWidget *リスト;

  GtkWidget *vbox;
  GtkWidget *ラベル;
  GtkTreeSelection *選択;

  gtk_init(&argc, &argv);

  ウィンドウ = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  リスト = gtk_tree_view_new();

  gtk_window_set_title(GTK_WINDOW(window), "リストビュー");
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER); //中央に設定します。
  gtk_container_set_border_width(GTK_CONTAINER(ウィンドウ), 10);
  gtk_widget_set_size_request(ウィンドウ、270、250);

  gtk_tree_view_set_headers_visible(GTK_TREE_VIEW(リスト), FALSE);

  gtk_vbox_new は、新しいボックスを作成します。

  gtk_box_pack_start(GTK_BOX(vbox), リスト, TRUE, TRUE, 5);

  ラベル = gtk_label_new("");
  gtk_box_pack_start(GTK_BOX(vbox), ラベル, FALSE, FALSE, 5);

  gtk_container_add(GTK_CONTAINER(ウィンドウ)、vbox);

  init_list(リスト);
  add_to_list(リスト、「エイリアン」);
  add_to_list(リスト、"レオン");
  add_to_list(リスト、「評決」);
  add_to_list(リスト、"ノースフェイス");
  add_to_list(list, "Der Untergang");

  選択 = gtk_tree_view_get_selection(GTK_TREE_VIEW(リスト));

  g_signal_connect(選択、「変更」、
           G_CALLBACK(on_changed)、ラベル);

  g_signal_connect(G_OBJECT (ウィンドウ)、"destroy",
           G_CALLBACK(gtk_main_quit)、NULL;

  gtk_widget_show_all(ウィンドウ);

  gtk_main();

  0を返します。
}

上記のサンプル コードでは、5 つの項目を表示し、それらを GtkTreeView コンポーネントに配置します。まず、ウィンドウに GtkVBox ウィジェットを配置します。 この GtkVBox コンポーネントには、GtkTreeView と GtkLabel の 2 つのコンポーネントが含まれています。

リスト = gtk_tree_view_new();
gtk_tree_view_set_headers_visible(GTK_TREE_VIEW(リスト), FALSE);

コンポーネント リストを初期化するには、list() 関数を呼び出します。

レンダラー = gtk_cell_renderer_text_new();
 column = gtk_tree_view_column_new_with_attributes("リスト項目",
     レンダラー、「テキスト」、LIST_ITEM、NULL);
 gtk_tree_view_append_column(GTK_TREE_VIEW(リスト)、列);

初期化関数では、1 列のみの GtkTreeView を生成します。

ストア = gtk_list_store_new(N_COLUMNS、G_TYPE_STRING);
 gtk_tree_view_set_model(GTK_TREE_VIEW(リスト), 
   GTK_TREE_MODEL(ストア));

次に、GtkListStore ウィジェット (モデル) を作成し、リスト ウィジェットにバインドしました。

g_object_unref(ストア);

メモリ領域を解放するためにモデルは自動的に破棄されます。

add_to_list(リスト、「エイリアン」);

上記は、add_to_list() 関数を呼び出してリストにオプションを追加しています。

ストア = GTK_LIST_STORE(gtk_tree_view_get_model
(GTK_TREE_VIEW(リスト)));

gtk_list_store_append(ストア、&iter);
gtk_list_store_set(ストア、&iter、LIST_ITEM、str、-1);

関数 add_to_list() では、システム関数 gtk_tree_view_get_model() を使用してモデルを取得します。新しい行を生成し、その行のデータをモデルに渡して処理します。これは GtkTreeIter の助けを借りて実現されます。

選択 = gtk_tree_view_get_selection(GTK_TREE_VIEW(リスト));

GtkTreeSelection は実際には明示的に作成する必要はありません。ここでは、GtkTreeView コンポーネントを使用して自動的に生成します。ご覧のとおり、これを支援するのがシステム関数 gtk_tree_view_get_selection() です。

よし、もう少し練習してみよう。

列を追加する

コードは次のとおりです

#include <gtk/gtk.h>

列挙型
{
  リスト項目 = 0、
  リスト_年齢、
  N_列
};


void init_list(GtkWidget *リスト)
{
  //ビューにデータを表示するには、GtkCellRendererとGtkTreeViewColumnを作成する必要があります
  GtkCellRenderer *レンダラー;
  GtkTreeViewColumn *列;
  GtkListStore * ストア;
  
  //GtkCellRendererを作成する 
  レンダラー = gtk_cell_renderer_text_new();  
  //タイトル付きの列を作成し、コンテンツを表示できるようにレンダラーを配置します。column = gtk_tree_view_column_new_with_attributes("List Items", renderer, "text", LIST_ITEM, NULL);  
  //gtk_tree_viewに列を追加する
  gtk_tree_view_append_column(GTK_TREE_VIEW(リスト)、列);
  
  
  //GtkCellRendererを作成する 
  レンダラー = gtk_cell_renderer_text_new();  
  //g_object_set (G_OBJECT (renderer), "xalign", 1.0, NULL); //右揃え //タイトル付きの列を作成し、コンテンツを表示できるようにレンダラーを配置します。column = gtk_tree_view_column_new_with_attributes("List age", renderer, "text", LIST_AGE, NULL);  
  //gtk_tree_viewに列を追加する
  gtk_tree_view_append_column(GTK_TREE_VIEW(リスト)、列);
  
  

  ストア = gtk_list_store_new(N_COLUMNS、G_TYPE_STRING、G_TYPE_INT);
  
  
  //ビューとモデルを関連付ける gtk_tree_view_set_model(GTK_TREE_VIEW(list), GTK_TREE_MODEL(store));

  // データ モデルを管理用のビューに送信します。ビューが破棄されると、データも一緒に破棄されます。g_object_unref(store);
}

void add_to_list(GtkWidget *list, const gchar *str,gint age) 関数は、リストにデータを追加します。
{

  GtkListStore * ストア;
  GtkTreeIter の反復;

  ストア = GTK_LIST_STORE(gtk_tree_view_get_model
              (GTK_TREE_VIEW(リスト)));

  gtk_list_store_append(ストア、&iter);
  gtk_list_store_set(ストア、&iter、LIST_ITEM、str、LIST_AGE、年齢、-1);
}



void on_changed(GtkWidget *ウィジェット、gpointer ラベル)
{

  GtkTreeIter の反復;
  GtkTreeModel *モデル;
  gchar *値;
  
  //ツリービューで選択された行の GtkTreeIter を取得します
  gtk_tree_selection_get_selected(GTK_TREE_SELECTION(ウィジェット), &model, &iter)の場合
  {

    gtk_tree_model_get(モデル、&iter、LIST_ITEM、&値、-1);
    gtk_label_set_text(GTK_LABEL(ラベル), 値);
    g_free(値);
  }
}

int main(int argc, char *argv[])
{

  GtkWidget *ウィンドウ;
  GtkWidget *リスト;

  GtkWidget *vbox;
  GtkWidget *ラベル;
  GtkTreeSelection *選択;

  gtk_init(&argc, &argv);

  ウィンドウ = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  リスト = gtk_tree_view_new();

  gtk_window_set_title(GTK_WINDOW(window), "リストビュー");
  gtk_window_set_position(GTK_WINDOW(ウィンドウ), GTK_WIN_POS_CENTER);
  gtk_container_set_border_width(GTK_CONTAINER(ウィンドウ), 10);
  gtk_widget_set_size_request(ウィンドウ、270、250);

  //タイトルの表示状態を設定します。
  gtk_tree_view_set_headers_visible(GTK_TREE_VIEW(リスト), TRUE);

  vbox = gtk_box_new (GTK_ORIENTATION_VERTICAL, 0); //gtk_vbox_new (FALSE, 0);

  gtk_box_pack_start(GTK_BOX(vbox), リスト, TRUE, TRUE, 5);

  ラベル = gtk_label_new("");
  gtk_box_pack_start(GTK_BOX(vbox), ラベル, FALSE, FALSE, 5);

  gtk_container_add(GTK_CONTAINER(ウィンドウ)、vbox);

  init_list(リスト);
  add_to_list(リスト、"エイリアン"、10);
  add_to_list(リスト、"レオン"、2);
  add_to_list(リスト、「評決」、30);
  add_to_list(リスト、"ノースフェイス"、4);
  add_to_list(list, "Der Untergang",50);

  
  選択 = gtk_tree_view_get_selection(GTK_TREE_VIEW(リスト));

  g_signal_connect(選択、「変更」、
           G_CALLBACK(on_changed)、ラベル);

  g_signal_connect(G_OBJECT (ウィンドウ)、"destroy",
           G_CALLBACK(gtk_main_quit)、NULL;

  gtk_widget_show_all(ウィンドウ);

  gtk_main();

  0を返します。
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Android TreeViewはチェックボックスを備えたツリーのような組織構造を実装します
  • Pythonフォーム(tkinter)ツリーデータ(Treeview)の詳しい説明
  • チェックボックスとカスケード選択機能を備えた Bootstrap ツリービュー ツリー メニュー
  • QQ 連絡先リスト効果を実現するための WPF カスタム TreeView コントロール スタイル
  • Bootstrap ツリービューはデータを動的に読み込み、クイック検索機能を追加します
  • Android UI: 複数レベルのツリーリスト TreeView の例を実装する
  • JS ツリー メニュー コンポーネント Bootstrap TreeView の使い方の詳細な説明
  • Bootstrap ツリーメニュープラグイン TreeView.js の使い方の詳しい説明
  • BootStrap Treeviewの簡単な使用法の簡単な分析

<<:  Vue で className として空の文字列を使用することはなぜ推奨されないのですか?

>>:  MySQL で null 値と空文字 ('') を区別する

推薦する

CSS は Google マテリアル デザインのテキスト入力ボックス スタイルを実装します (推奨)

みなさんこんにちは。今日は、純粋な CSS を使用して Google マテリアル デザインのテキスト...

Dockerのプロセスとイメージを実行するための基本コマンドの詳細な説明

目次1. ワークフローを実行する2. ミラーリングの基本コマンド1. ワークフローを実行するDock...

CSS で縦書きテキスト配置を実装する方法 (概要)

HTML でのテキストのデフォルトの配置は水平ですが、特殊な場合にはテキストを垂直に配置する必要が...

MySQL のインデックスとビューの使用方法と違いの詳細な説明

序文この記事では主に、MySQL のインデックスとビューの使用方法と違いを紹介し、参考と学習のために...

Vue ショッピングカートのケーススタディ

目次1. ショッピングカートの例2. コードの実装3. まとめ1. ショッピングカートの例一連の学習...

MySQL 8.0.23 メジャーアップデート (新機能)

著者: Guan Changlong は、Aikesheng の配送サービス部門の DBA です。主...

MySQL 権限とデータベース設計のケーススタディ

権限とデータベース設計ユーザー管理SQLyogを使用してユーザーを作成し、権限を付与する基本コマンド...

MySQLのスレッド実行の急増とクエリの遅延の問題を解決する

目次背景問題の説明原因分析CPUクエリが遅い接続数分析する拡大する総括する背景新年を迎える前は、一年...

スクロールバーを非表示にしながらもスクロール効果を維持する純粋な CSS (モバイルと PC)

携帯モバイル ページは Chrome および Safari とのみ互換性があればよいため、カスタム ...

Podmanはコンテナを自動的に起動し、Dockerと比較します

目次1. podmanの紹介2. Dockerと比較した利点3. 互換性4. バックグラウンド サー...

HTML ページにミュージック ビデオを追加する例

1. ビデオタグFirefoxでは自動再生をサポートしますが、GoogleとIEではサポートしません...

Docker コンテナを他のサーバーに移行する 5 つの方法

多くの場合、移行は避けられません。ハードウェアのアップグレード、データ センターの変更、古いオペレー...

Vue 3 カスタムディレクティブ開発の概要

指令とは何ですか? Angular と Vue はどちらもディレクティブの概念を持っており、これは通...

nginx がドメイン名アクセス用に設定されている場合にドメイン名の後に 2 つのスラッシュ // が表示される問題の解決方法

最近、個人のウェブサイトを書き直しました。Alibaba Cloudで新しいサーバーを購入しました。...

Vue ベースの Excel 解析とエクスポートの詳細な説明

目次序文基本的な紹介コードの実装基本構造アップロード分析Excel にエクスポート基本構造Excel...