GTK 开发博客

我之前关于列表中的拖放操作的文章为了展示最简单、功能齐全的实现做了一些妥协。其中之一就是我们只能在整行周围绘制拖放目标高亮，而实际上拖放操作是在行之间插入拖放的行。让我们尝试做得更好！

更改目标

在简化版本中，我们将每一行都设为拖放目标。这一次，我们将更改此设置，只让列表本身接受拖放。

gtk_drag_dest_set (list,
                   GTK_DEST_DEFAULT_MOTION|GTK_DEST_DEFAULT_DROP, 
                   entries, 1,
                    GDK_ACTION_MOVE);
g_signal_connect (list, "drag-data-received",
                  G_CALLBACK (drag_data_received), NULL);

如果你将此与之前所做的进行比较，你可能会注意到另一个变化：我们现在只请求移动和拖放的默认行为，而不是 GTK_DEST_DEFAULT_ALL。我们不再请求高亮的默认行为，因为我们希望自己处理它。

为了做到这一点，我们需要连接到 drag-motion 和 drag-leave 信号。这些信号在拖放目标（即列表）上发出。

 g_signal_connect (list, "drag-motion",
                   G_CALLBACK (drag_motion), NULL);
 g_signal_connect (list, "drag-leave",
                   G_CALLBACK (drag_leave), NULL);

注意间隙

我们改进的拖动高亮的基本思想是，我们跟踪拖放将要发生的两个相邻行，并使用 GTK+ CSS 机制来创建合适的间隙高亮。

这需要太多代码才能在此处完整显示，但思路如下：使用 gtk_list_box_get_row_at_y() 查找当前位于光标下的行。查看其分配以找出光标是在该行的上半部分还是下半部分。根据这一点，我们选择后续行或前一行作为我们的行对中的另一个成员。

row = gtk_list_box_get_row_at_y (list, y);
gtk_widget_get_allocation (row, &alloc);
if (y < alloc.y + alloc.height/2)
  {
    row_after = row;
    row_before = get_row_before (list, row);
  }
else
  {
    row_before = row;
    row_after = get_row_after (list, row);
  }

这里省略了一些特殊情况，例如当悬停的行是第一行或最后一行，或者当我们悬停在列表中的“空白区域”时。

CSS 高亮

我说过我们将使用 CSS 来创建高亮。最简单的方法是将样式类添加到我们找到的两行中

gtk_style_context_add_class (
                      gtk_widget_get_style_context (row_before),
                      "drag-hover-bottom");
gtk_style_context_add_class (
                      gtk_widget_get_style_context (row_after),
                      "drag-hover-top");

然后我们将使用一些自定义 CSS 来创建我们的高亮。如果您想知道：#4e9a06 是 Adwaita 主题中使用的拖动高亮颜色。

.row.drag-hover-top {
  border-top: 1px solid #4e9a06; 
}
.row.drag-hover-bottom {
  border-bottom: 1px solid #4e9a06; 
}

这再次省略了我之前提到过的特殊情况。

我们是怎么到这里的？

将行拖放到它原来的位置没有任何作用。以某种方式标记拖动开始的位置以使其显而易见是有意义的。我们可以再次使用 CSS 来实现这一点，并在我们的 drag_begin() 方法中将样式类添加到拖动的行中

gtk_style_context_add_class (gtk_widget_get_style_context (row),
                             "drag-row");

为了在鼠标悬停在其上时给行添加一点高亮，我们在 drag_motion() 处理程序中向其添加一个额外的样式类

if (row == drag_row)
  {
    gtk_style_context_add_class (gtk_widget_get_style_context (row),
                                 "drag-hover");
    row_before = get_row_before (row);
    row_after = get_row_after (row);
  }
else …

这是这些类的 CSS

.row.drag-row {
  color: gray;
  background: alpha(gray,0.2);
 }
 .row.drag-row.drag-hover {
  border-top: 1px solid #4e9a06;
  border-bottom: 1px solid #4e9a06;
  color: #4e9a06;
}

将它们放在一起

（抱歉，光标已损坏。我们真的应该在 gnome-shell 的屏幕录像机中修复此问题。）

参考

1. 完整的示例，testlist3.c
2. GTK+ DND 文档

我最近花了一些时间追踪 GTK+ 容器和绘图问题。以下是我发现的。

CSS 绘图

在 GTK+ 3.22 中，大多数（如果不是全部）容器都支持具有多层背景和边框的完整 CSS 绘图模型。例如，GtkFrame 现在就是这样绘制其框架的。但是，通常只排列其子项的容器（例如 GtkBox）可以绘制背景和边框。可能性是无限的！

例如，我们可以使用 GtkBox 将框架放置在列表框和标签周围，使标签在视觉上看起来像是列表的一部分。您甚至可以使用一些 CSS 让它变得丰富多彩且有趣，例如

box.frame {
 border: 5px solid magenta;
}

分配和调整大小

传统上，GTK+ 中的大多数容器都不进行自己的绘制，而只是排列它们的子项，因此当它们的大小发生变化时，它们实际上不需要进行完全重绘 - 重绘子项就足够了。这就是 gtk_container_set_reallocate_redraws() 的作用。它在 GTK+ 3 中默认为 FALSE，因为我们不想在分配发生变化时冒添加过多重绘的风险。

你可以看到这种情况的走向：如果我使用删除按钮从配料列表中删除黄油和盐，则列表的分配（以及它周围的框）将缩小，并且会出现重绘问题。

解决方案

如果你计划使普通的布局容器绘制背景或边框，请确保为正确的 widget 设置 reallocate-redraws 为 TRUE（在本例中为有趣框的父级）。

gtk_container_reallocate_redraws (GTK_CONTAINER (parent), TRUE);

请注意，gtk_container_reallocate_redraws() 在 GTK+ 3.22 中已弃用，因为我们将在 GTK+ 4 中将其删除并自动执行正确的操作。但这不应该阻止你使用它来解决此问题。

另一种（也许更好）的选择是使用旨在绘制边框的容器，例如 GtkFrame。