从 Gtk.FlowBox 中删除小部件

Question

我试图通过销毁小部件从 Gtk.FlowBox 中删除小部件，但是有一个灰色框留在原处。知道如何删除灰色框，以便在删除小部件后相邻的小部件就位。

以下是小部件的打包方式： 1- 将两个图像（来自 pixbuf）和标签添加到 OverlayImage 2- 叠加图像被添加到事件框 3- EventBox 添加到 FlowBox

我试过以下方法： 1- 销毁 EventBox 2-获取并销毁Overlay Image的所有children，然后销毁OverLay Image和EventBox

在这两种情况下，小部件都被删除了，但空白区域保留在其位置，单击时该区域为灰色，但什么也没做 - 见图。

如何删除这个空的space，以便下一个小部件自动落入该小部件被删除的位置，下一个小部件落入其位置等等。

代码在此处可用，"removeSelectedBooksFromLibrary" 是从 FlowBox

中删除用户选择的 EventBox 的方法

这是从 FlowBox 添加小部件的代码 https://github.com/babluboy/bookworm/blob/master/src/bookworm.vala#L589

这是从 FlowBox 中删除小部件的代码 https://github.com/babluboy/bookworm/blob/master/src/bookworm.vala#L512

提前致谢

这是一个添加了解决方案的工作示例，它删除了小部件及其父级。

public class FlowBoxIssue : Gtk.Window {

  public static int main (string[] args) {
      Gtk.init (ref args);
      FlowBoxIssue window = new FlowBoxIssue();
      window.show_all ();
      Gtk.main ();
      return 0;
  }

  public FlowBoxIssue () {
      this.title = "FlowBox Issue";
      this.window_position = Gtk.WindowPosition.CENTER;
      this.destroy.connect (Gtk.main_quit);
      this.set_default_size (800, 600);

      Gtk.FlowBox library_flowbox = new Gtk.FlowBox();
      Gtk.Box library_mainbox = new Gtk.Box (Gtk.Orientation.VERTICAL, 20);

      Gtk.ScrolledWindow library_scroll = new Gtk.ScrolledWindow (null, null);
            library_scroll.set_policy (Gtk.PolicyType.AUTOMATIC, Gtk.PolicyType.AUTOMATIC);
            library_scroll.add (library_flowbox);

      Gtk.Overlay aOverlayImage1 = new Gtk.Overlay();
      Gtk.EventBox aEventBox1 = new Gtk.EventBox();
      Gtk.EventBox aEventBox2 = new Gtk.EventBox();
      Gtk.EventBox aEventBox3 = new Gtk.EventBox();
      try{
        Gdk.Pixbuf aBookCover1 = new Gdk.Pixbuf.from_file_at_scale("cover.png", 200, 250, false);
        Gtk.Image aCoverImage1 = new Gtk.Image.from_pixbuf(aBookCover1);

        aOverlayImage1.add(aCoverImage1);
        Gtk.Label overlayTextLabel1 = new Gtk.Label("Label 1");
        aOverlayImage1.add_overlay(overlayTextLabel1);
        aEventBox1.add(aOverlayImage1);
        library_flowbox.add (aEventBox1);
      }catch(Error e){

      }

      Gtk.Overlay aOverlayImage2 = new Gtk.Overlay();
      try{
        Gdk.Pixbuf aBookCover2 = new Gdk.Pixbuf.from_file_at_scale("cover.png", 200, 250, false);
        Gtk.Image aCoverImage2 = new Gtk.Image.from_pixbuf(aBookCover2);

        aOverlayImage2.add(aCoverImage2);
        Gtk.Label overlayTextLabel2 = new Gtk.Label("Label 2");
        aOverlayImage2.add_overlay(overlayTextLabel2);
        aEventBox2.add(aOverlayImage2);
        library_flowbox.add (aEventBox2);
      }catch(Error e){

      }

      Gtk.Overlay aOverlayImage3 = new Gtk.Overlay();
      try{
        Gdk.Pixbuf aBookCover3 = new Gdk.Pixbuf.from_file_at_scale("cover.png", 200, 250, false);
        Gtk.Image aCoverImage3 = new Gtk.Image.from_pixbuf(aBookCover3);

        aOverlayImage3.add(aCoverImage3);
        Gtk.Label overlayTextLabel3 = new Gtk.Label("Label 3");
        aOverlayImage3.add_overlay(overlayTextLabel3);
        aEventBox3.add(aOverlayImage3);
        library_flowbox.add (aEventBox3);
      }catch(Error e){

      }

      Gtk.Button delete_button = new Gtk.Button.with_label("Delete Pix");
      delete_button.clicked.connect (() => {
          //This is the line which resolved the issue - get the parent of the widget and destroy it and then destroy the widget
          aEventBox2.get_parent().destroy();
                aEventBox2.destroy();
          });

      library_mainbox.pack_start(library_scroll, true, true, 0);
      library_mainbox.pack_end(delete_button, true, false, 0);
      this.add(library_mainbox);
  }

}

Answer 1

每次您将子小部件添加到 GtkFlowBox 时，流框小部件都会在两者之间添加一个隐式子小部件，用于事件处理和样式设置 — 如 GtkFlowBox 的文档所述:

Although a GtkFlowBox must have only GtkFlowBoxChild children, you can add any kind of widget to it via gtk_container_add(), and a GtkFlowBoxChild widget will automatically be inserted between the box and the widget.

这意味着行：

library_grid.add(aEventBox);

实际上等同于：

var flowbox_child = new Gtk.FlowBoxChild();
flowbox_child.add(aEventBox);
library_grid.add(flowbox_child);

如果您想从 GtkFlowBox 中删除一个小部件，并且只保留对您添加的子项的引用，则需要检索其父项并将其从 GtkFlowBox 中删除：

aEventBox.get_parent().destroy();
// or
library_grid.remove(aEventBox.get_parent());

从 Gtk.FlowBox 中删除小部件

Remove widget from Gtk.FlowBox

gtk

vala