从 Gtk.FlowBox 中删除小部件

Question

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

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

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

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

我如何移除这个空白空间，以便下一个小部件自动落入小部件被移除的位置，下一个小部件落入它的位置等等。

代码在此处可用，“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 的文档所述：

虽然 GtkFlowBox 必须只有 GtkFlowBoxChild 子级，但您可以通过 gtk_container_add() 向其添加任何类型的小部件，GtkFlowBoxChild 小部件将自动插入到盒子和小部件之间。

这意味着该行：

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());