gtk treeview

13. Tree and List Widgets - Python GTK+ 3 Tutorial 3.4 documentation

해당 내용을 해석해서 정리해봄

Tree와 List Widgets

gtk::TreeView는 데이터를 다양하게 표현할 수 있는 방법이다.

ListStore나 TreeStore의 데이터를 어떻게 표현할지 조정하는 것이 TreeView.

다음과 같은 기능을 제공한다.

ListStore안에 있는 데이터에 따라 자동적으로 데이터를 추가하거나 삭제 및 편집을 할 수 있다.

Drag and Drop 지원

데이터 정렬

check box나 progress bar같은 위젯을 추가할 수 있다.

컬럽에 대한 크기를 조절할 수 있다.

데이터 필터링

Model

TreeView는 관련된 TreeModel을 가지고 있고 TreeModel은 TreeView에서 보여줄 데이터를 가지고 있다.

TreeModel은 하나 이상의 TreeView에서 사용할 수 있다.

즉, 같은 데이터들에 대해서 여러 가지로 표현을 할 수 있다.

자신만의 모델을 정의를 할 수 있지만, 일반적으로 ListStore나 TreeStore를 사용한다.

ListStore는 자식이 없는 일반적인 Row를 가지고 있는 형태이다.

TreeStore는 자식들을 가지고 있는 Row의 형태를 가지고 있다.

ListStore

ListStore에 데이터를 넣는 방법은 다음과 같다.


let data: [(u32, &dyn ToValue); 2] = [(0, &true), (1, &"shalom".to_owned())];
model.insert_with_values(Some(0), &data);
model.insert_with_values(Some(1), &data);

TreeStore

TreeStore에 데이터를 넣는 방법은 다음과 같다.


let model = gtk::TreeStore::new(&[glib::Type::BOOL, glib::Type::STRING]);
let iter = model.insert_with_values(None, None, &[(0, &true), (1, &"shalom".to_owned())]);
model.insert_with_values(
    Some(&iter),
    None,
    &[(0, &true), (1, &"shalom_child1".to_owned())],
);

model.insert_with_values(
    Some(&iter),
    None,
    &[(0, &true), (1, &"shalom_child2".to_owned())],
);

let path = gtk::TreePath::from_indicesv(&[0, 1]);
if let Some(iter) = model.iter(&path) {
		// shalom_child2
    dbg!(model.value(&iter, 1).get::<String>().unwrap());
};

<aside> 💡 이외의 value를 넣어주는 방법은 여러가지가 있지만 현재는 이해하기 쉬운 insert만 예제를 듭니다.

</aside>

View

Treeview는 Model을 보여주기 위한 view의 역할을 합니다.

생성할 때 model을 지정하거나, set_model api를 통해 model을 지정할 수 있습니다.

Treeview는 하나의 model을 가지고 있습니다.

TreeView는 model을 어떻게 display 할지 알고 있습니다.

TreeView는 컬럼정보와 CellRenderer를 가지고 있습니다.

Header를 표시할지 말지 결정할 수 있습니다.

CellRenderer

Cellrenderer는 데이터를 어떻게 그려줄지에 대한 방법을 가지고 있는 객체입니다.

gtk에서 제공하는 Renderer를 사용하거나 CellRenderer를 상속받아 직접 커스터마이징한 Renderer를 사용하기도 합니다.

Gtk에서 기본적으로 제공하는 Renderer는 다음과 같습니다.

gtk::CellRendererText

gtk::CellRendererToggle

gtk::CellRendererPixbuf

TreeViewColumn

Column은 TreeView에서 각 열에대해 renderer를 관리하고 유지하는 객채입니다.

Column은 타이틀을 가지고 있고 TreeView에서 사용한다면 title을 헤더에서 보여줄 수 있습니다.

모델의 인덱스를 맵핑하여 데이터를 넣을수 있습니다.


let treeview = gtk::TreeView::new();
let col = gtk::TreeViewColumn::new();
let renderer = CellRendererToggle::new();

col.pack_start(&renderer, true);
col.set_title("some title");
col.add_attribute(&renderer, "bool", 0);
treeview.append_column(&col);

전체 예제코드


let treeview = gtk::TreeView::new();

// 모델을 정의하고 데이터를 넣는다.
let model = gtk::ListStore::new(&[glib::Type::BOOL, glib::Type::STRING]);
let data: [(u32, &dyn ToValue); 2] = [(0, &true), (1, &"shalom".to_owned())];
model.insert_with_values(Some(0), &data);
model.insert_with_values(Some(1), &data);
treeview.set_model(Some(&model));

// 컬럼에 렌더러를 만들어 treeview에 저장
let col = gtk::TreeViewColumn::new();
let renderer = CellRendererToggle::new();
col.pack_start(&renderer, true);
col.set_title("some title(boolean)");
col.add_attribute(&renderer, "active", 0);
treeview.append_column(&col);

// 컬럼에 렌더러를 만들어 treeview에 저장
let col = gtk::TreeViewColumn::new();
let renderer = CellRendererText::new();
col.pack_start(&renderer, true);
col.set_title("some title(text)");
col.add_attribute(&renderer, "text", 1);
treeview.append_column(&col);