一种调节组件边距的方法、装置、设备及存储介质与流程

本技术涉及计算机，具体涉及一种调节组件边距的方法、装置、设备及存储介质。

背景技术：

1、在页面设计中，为了使页面中各个组件、元素、文字的布局清晰，使用户使用页面的观感较好，需要为各个组件设置合适的间距，包括组件本身的内外间距、以及不同组件之间的间距等。其中，每个组件的间距调整可以分为内间距和外间距，通过内间距和外间距的设置定义页面中组件所占的空间大小。其中，内边距(padding)可以表示组件的内容区域与组件的边框之间的距离，外边距(margin)可以表示组件的边框与其他的组件、或者页面边缘之间的距离。例如，组件的内边距和外边距存在四个方向的边距值，即分别对应上-内边距、下-内边距、左-内边距、右-内边距、上-外边距、下-外边距、左-外边距、右-外边距。

2、目前在页面编辑器中调节组件的内边距和外边距时，需要通过“选择”方式进行调整，即分别选择每个方向所对应的边距具体数值，类似于word文档中调整字体大小时需要选择字体的大小值。由于在实际的页面设计过程中，用户通常想要将四个方向的内边距的边距值设置为相同的数值，或者将四个方向的外边距的边距值设置为相同的数值，目前针对每个方向的边距值进行选择的方式，会导致调整内边距、外边距的次数过多，用户每次调整边距值的操作路径长，用户操作起来不够方便，影响用户的使用体验。

技术实现思路

1、有鉴于此，本技术提供一种调节组件边距的方法、装置、设备及存储介质，以便改善用户调节组件边距的操作方式，改善用户体验。

2、为实现上述目的，本技术提供的技术方案如下：

3、在本技术第一方面，提供了一种调节组件边距的方法，所述方法包括：

4、响应于针对目标组件的触发操作，显示所述目标组件的边距调节器；

5、响应于激活所述边距调节器的第一区域的操作，控制所述边距调节器的内边距调节区域的多个有效内边距调节区域处于可编辑状态；

6、响应于激活所述边距调节器的第二区域的操作，控制所述边距调节器的外边距调节区域的多个有效外边距调节区域处于可编辑状态。

7、在一种可能的实现方式中，所述内边距调节区域包括多个有效内边距调节区域以及无效内边距调节区域，且所述多个有效内边距调节区域以及所述无效内边距调节区域为互不重叠的区域，若所述第一区域属于所述无效内边距调节区域，所述响应于激活所述边距调节器的第一区域的操作，控制所述边距调节器的内边距调节区域的多个有效内边距调节区域处于可编辑状态，包括：

8、响应于激活所述无效内边距调节区域的操作，控制所述多个有效内边距调节区域均处于可编辑状态。

9、在一种可能的实现方式中，所述外边距调节区域包括多个有效外边距调节区域以及无效外边距调节区域，且所述多个有效外边距调节区域以及所述无效外边距调节区域为互不重叠的区域，若所述第二区域属于所述无效外边距调节区域，所述响应于激活所述边距调节器的第二区域的操作，控制所述边距调节器的外边距调节区域的多个有效内边距调节区域处于可编辑状态，包括：

10、响应于激活所述无效外边距调节区域的操作，控制所述多个有效外边距调节区域均处于可编辑状态。

11、在一种可能的实现方式中，所述方法还包括：

12、响应于激活所述多个有效内边距调节区域中任一有效内边距调节区域的操作，控制所激活的有效内边距调节区域处于可编辑状态。

13、在一种可能的实现方式中，所述方法还包括：

14、响应于激活所述多个有效外边距调节区域中任一有效外边距调节区域的操作，控制所激活的有效外边距调节区域处于可编辑状态。

15、在一种可能的实现方式中，所述方法还包括：

16、当所述有效内边距调节区域处于可编辑状态时，通过输入所述有效内边距调节区域所对应的内边距绝对值或者内边距相对值来调整内边距。

17、在一种可能的实现方式中，所述方法还包括：

18、当所述有效外边距调节区域处于可编辑状态时，通过输入所述有效外边距调节区域所对应的外边距绝对值或者外边距相对值来调整外边距。

19、在一种可能的实现方式中，所述响应于激活所述多个有效内边距调节区域中任一有效内边距调节区域的操作，控制所激活的有效内边距调节区域处于可编辑状态，包括：

20、响应于激活所述有效内边距调节区域的操作，在所述有效内边距调节区域显示有效内边距的可选项编辑控件。

21、在一种可能的实现方式中，所述方法还包括：

22、响应于控制鼠标悬停在所述无效内边距调节区域的操作，控制所述多个有效内边距调节区域进行突出显示。

23、在一种可能的实现方式中，所述方法还包括：

24、响应于控制鼠标悬停在所述无效外边距调节区域的操作，控制所述多个有效外边距调节区域进行突出显示。

25、在一种可能的实现方式中，所述方法还包括：

26、响应于控制鼠标悬停在所述有效内边距调节区域的操作，控制所述有效内边距调节区域进行突出显示。

27、在一种可能的实现方式中，所述方法还包括：

28、响应于控制鼠标悬停在所述有效外边距调节区域的操作，控制所述有效外边距调节区域进行突出显示。

29、在一种可能的实现方式中，所述多个有效内边距调节区域包括第一内边距调节区域、第二内边距调节区域、第三内边距调节区域、第四内边距调节区域，所述响应于激活所述无效内边距调节区域的操作，控制所述多个有效内边距调节区域均处于可编辑状态，包括：

30、响应于激活所述无效内边距调节区域的操作，控制所述第一内边距调节区域、所述第二内边距调节区域、所述第三内边距调节区域、所述第四内边距调节区域均处于可编辑状态。

31、在一种可能的实现方式中，所述多个有效外边距调节区域包括第一外边距调节区域、第二外边距调节区域、第三外边距调节区域、第四外边距调节区域，所述响应于激活所述无效外边距调节区域的操作，控制所述多个有效外边距调节区域均处于可编辑状态，包括：

32、响应于激活所述无效外边距调节区域的操作，控制所述第一外边距调节区域、所述第二外边距调节区域、所述第三外边距调节区域、所述第四外边距调节区域均处于可编辑状态。

33、在本技术第二方面，提供了一种调节组件边距的装置，所述装置包括：

34、显示单元，用于响应于针对目标组件的触发操作，显示所述目标组件的边距调节器；

35、第一控制单元，用于响应于激活所述边距调节器的第一区域的操作，控制所述边距调节器的内边距调节区域的多个有效内边距调节区域处于可编辑状态；

36、第二控制单元，用于响应于激活所述边距调节器的第二区域的操作，控制所述边距调节器的外边距调节区域的多个有效外边距调节区域处于可编辑状态。

37、在本技术第三方面，提供了一种电子设备，所述设备包括：处理器和存储器；

38、所述存储器，用于存储指令或计算机程序；

39、所述处理器，用于执行所述存储器中的所述指令或计算机程序，以使得所述电子设备执行上述第一方面所述的方法。

40、在本技术第四方面，提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令在设备上运行时，使得所述设备执行上述第一方面所述的方法。

41、在本技术第五方面，提供了一种计算机程序产品，所述计算机程序产品包括计算机程序/指令，所述计算机程序/指令被处理器执行时实现第一方面所述的方法。

42、由此可见，本技术具有如下有益效果：

43、在本技术的上述实现方式中，响应于针对目标组件的触发操作，显示目标组件的边距调节器，可以通过该边距调节器调节目标组件的内边距和外边距。当激活边距调节器的第一区域时，可以控制边距调节器的内边距调节区域的多个有效内边距调节区域处于可编辑状态。响应于激活边距调节器的第二区域的操作，控制边距调节器的外边距调节区域的多个有效外边距调节区域处于可编辑状态。通过本技术所提供的方法，当用户激活边距调节器的特定区域时，可以同时调整目标组件的内边距调节区域，或者同时调整目标组件的外边距调节区域，无需用户一一激活各个边距调节区域进行选择，减少用户调节边距的次数，改善用户调节组件边距的方式，改善用户体验。