【第一章编辑器开发基础第二节编辑器布局_3间距控制(4/4)】

间距控制

​​用途​​:精确控制UI元素间隔

​​核心类​​:GUILayout

​​调用位置​​:布局容器内

​​两种空间类型​​:

csharp 复制代码
// 1. 固定像素间距
GUILayout.Space(20f); // 20像素间隔

// 2. 弹性填充空间
GUILayout.FlexibleSpace();
​​经典布局应用​​:

// 左右按钮居中布局
GUILayout.BeginHorizontal();
GUILayout.FlexibleSpace(); // 左侧弹性空间
GUILayout.Button("确定");
GUILayout.Space(10);       // 固定间距
GUILayout.Button("取消");
GUILayout.FlexibleSpace(); // 右侧弹性空间
GUILayout.EndHorizontal();

// 底部按钮固定
GUILayout.BeginVertical();
// ... 主内容 ...
GUILayout.FlexibleSpace(); // 压到最下方
GUILayout.Button("提交");
GUILayout.EndVertical();

​​经验原则​​:

FlexibleSpace会占用所有可用空间

多个Space会线性累计

适用于按钮组对齐等精细布局

示例代码和效果图

csharp 复制代码
using UnityEngine;
using UnityEditor;

/// <summary>
/// 创建自定义编辑器,作用于Example组件
/// </summary>
[CustomEditor(typeof(Example))]
public class ExampleEditor : Editor
{
    

    // ================= 核心方法 - 绘制编辑器界面 =================
    public override void OnInspectorGUI()
    {
        // 1. 先绘制默认Inspector内容
        base.OnInspectorGUI();

        // 2. 依次绘制各种自定义控件
        Space();       // 间距控制

      
    }



    // ================= 10. 间距控制 =================
    private void Space()
    {
        // 水平布局中的固定间距
        GUILayout.BeginHorizontal();
        GUILayout.Button("btn1", GUILayout.Width(80f));
        GUILayout.Space(100f); // 100像素的水平间距
        GUILayout.Button("btn2", GUILayout.Width(80f));
        GUILayout.EndHorizontal();

        // 垂直布局中的弹性间距
        GUILayout.BeginVertical();
        GUILayout.Button("btn3", GUILayout.Width(80f)); // 顶部按钮

        /*
        弹性空间说明:
        1. btn3会固定在顶部
        2. FlexibleSpace会占据所有剩余垂直空间
        3. btn4会固定在底部
        */
        GUILayout.FlexibleSpace();

        GUILayout.Button("btn4", GUILayout.Width(80f)); // 底部按钮
        GUILayout.EndVertical();
    }
}
相关推荐
夜流冰1 天前
VSCode - 显示EOL字符的插件
ide·vscode·编辑器
云堆客栈1 天前
基于vscode的markdown编辑器部署方案
ide·vscode·编辑器
滑稽的1 天前
sublime merge汉化
编辑器·sublime text
dust_and_stars1 天前
ubuntu24 安装vscode
ide·vscode·编辑器
Destiny_where1 天前
Claude VSCode插件版接入强大的GLM(无需登录注册claude code)
ide·人工智能·vscode·编辑器·claude code
猫头虎1 天前
Claude Code 2026 年1月9日迎来大更新:Agent 能力增强(2.1.0 详解 + 升级指南)
ide·人工智能·macos·langchain·编辑器·aigc·ai编程
向上的车轮1 天前
AI编辑器的兴起:如何用好AI编辑器解决实际问题?
人工智能·编辑器
痞老板21 天前
【Cmder】VSCode设置Cmder为内置终端
ide·vscode·编辑器
吞掉星星的鲸鱼2 天前
VScode安装codex
ide·vscode·编辑器
claider2 天前
Vim User Manual 阅读笔记 User_03.txt move around
笔记·编辑器·vim