当前位置：首页 > news >正文

2025-04-06 Unity Editor 2 —— GUILayout

news 来源：原创 2025/6/19 19:04:38

文章目录

常用组件
- 1 Label 文本标签
- 2 TextField / TextArea / PasswordField 输入框
- 3 Butto / RepeatButton 按钮
- 4 Horizontal / Vertical 方向布局
- 5 Box 自动布局框
- 6 ScrollView 滚动视图
- 7 Horizontal / VerticalSlider 滑动条
- 8 Area GUI 区域
- 9 Window 窗口
- 10 Toolbar 工具栏
- 11 Toggle 开关按钮
- 12 Space / FlexibleSpace 空白
- 13 Width / Height / MinWidth / MinHeight / MaxWidth / MaxHeight 宽高控制
- 14 SelectionGrid 选择网格

常用组件

创建 GUILayoutExample.cs 脚本，继承 EditorWindow。

public class GUILayoutExample : EditorWindow
{
    ...

    [MenuItem("EditorExtension/02.IMGUI/01.GUILayoutExample")]
    static void OpenGUILayoutExample()
    {
        GetWindow<GUILayoutExample>().Show();
    }

    private void OnGUI()
    {
        ... // 在这里编写面板控件
    }
}

1 Label 文本标签

GUILayout.LabelField(string文本内容);

private void OnGUI()
{
    ...
        
    GUILayout.Label("Label: Hello IMGUI");
    
    ...
}

2 TextField / TextArea / PasswordField 输入框

string变量 = GUILayout.TextField(string变量);
- 单行输入，不可以 Enter 换行。
string变量 = GUILayout.TextArea(string变量);
- 多行输入，可以 Enter 换行。
string变量 = GUILayout.PasswordField(string变量, char掩码);
- 密码输入框，输入内容会显示 char 掩码。

private string _textfieldValue;
private string _textAreaValue;
private string _passwordFieldValue = "";

private void OnGUI()
{
    ...
        
    GUILayout.Label("TextField");
    _textfieldValue = GUILayout.TextField(_textfieldValue);

    GUILayout.Label("TextArea");
    _textAreaValue = GUILayout.TextArea(_textAreaValue);

    GUILayout.Label("PasswordField");
    _passwordFieldValue = GUILayout.PasswordField(_passwordFieldValue, '*');
    
    ...
}

3 Butto / RepeatButton 按钮

if (GUILayout.Button(string按钮名称)) { ... }

按下时触发。
if (GUILayout.RepeatButton(string按钮名称)) { ... }

按下和松开都会触发。

private void OnGUI()
{
    ...
        
    if (GUILayout.Button("Button"))
    {
        Debug.Log("Button Clicked");
    }
    
    // 按下松开都会触发一次
    if (GUILayout.RepeatButton("RepeatButton"))
    {
        Debug.Log("RepeatButton Clicked");
    }
    
    ...
}

4 Horizontal / Vertical 方向布局

使用 GUILayout.BeginHorizontal(); 和 GUILayout.EndHorizontal(); 包围代码块，使代码块的内容水平排列。

使用 GUILayout.BeginVertical (); 和 GUILayout.EndVertical (); 包围代码块，使代码块的内容垂直排列。

默认排列方式为垂直排列。

private void OnGUI()
{
    ...
        
    GUILayout.BeginHorizontal();
    { // 使用大括号缩进表明排列关系
        GUILayout.Label("TextField");
        _textfieldValue = GUILayout.TextField(_textfieldValue);
    }
    GUILayout.EndHorizontal();
    
    ...
}

5 Box 自动布局框

GUILayout.Box(string文本内容);

使用包围盒包裹文本内容（深色区域）。

private void OnGUI()
{
    ...
        
    GUILayout.BeginHorizontal();
    {
        GUILayout.Label("Box");
        GUILayout.Box("AutoLayout Box");
    }
    GUILayout.EndHorizontal();
    
    ...
}

6 ScrollView 滚动视图

Vector2布局 = GUILayout.BeginScrollView(Vector2布局); // 开启滚动视图
...
EditorGUILayout.EndScrollView(); // 结束滚动视图

当区域不够显示全部内容时，启用滑动条呈现滚动视图。

private Vector2 _scrollPosition;

private void OnGUI()
{
    ...
        
    _scrollPosition = GUILayout.BeginScrollView(_scrollPosition);
    {
        GUILayout.BeginHorizontal();
        {
            GUILayout.Label("TextField");
            _textfieldValue = GUILayout.TextField(_textfieldValue);
        }
        GUILayout.EndHorizontal();
        
        ...
    }
    GUILayout.EndScrollView();
    
    ...
}

7 Horizontal / VerticalSlider 滑动条

float变量 = GUILayout.HorizontalSlider(float变量, 最小值, 最大值);
float变量 = GUILayout.VerticalSlider(float变量, 最小值, 最大值);

private float _sliderValue;

private void OnGUI()
{
    ...
        
    GUILayout.BeginHorizontal();
    {
        GUILayout.Label("HorizontalSlider");
        _sliderValue = GUILayout.HorizontalSlider(_sliderValue, 0, 1);
    }
    GUILayout.EndHorizontal();

    GUILayout.BeginHorizontal();
    {
        GUILayout.Label("VerticalSlider");
        _sliderValue = GUILayout.VerticalSlider(_sliderValue, 0, 1);
    }
    GUILayout.EndHorizontal();
    
    ...
}

8 Area GUI 区域

GUILayout.BeginArea(Rect布局位置);

开启一块区域。

private void OnGUI()
{
    ...
        
    GUILayout.BeginArea(new Rect(0, 0, 100, 100));
    {
        // 显示重合了
        GUI.Label(new Rect(0, 0, 20, 20), "1");
    }
    GUILayout.EndArea();
    
    ...
}

9 Window 窗口

public static Rect Window(int标识ID, Rect布局位置, GUI.WindowFunction绘制函数, string窗口标题);

在 EditorWindow 中，该窗口无法显示。

可在 RunTime 模式下显示。

private void OnGUI()
{
    ...
        
    // 目前不可见
    GUILayout.Window(1, new Rect(0, 0, 100, 100), id => { }, "Window");
    
    ...
}

10 Toolbar 工具栏

int下标 = GUILayout.Toolbar(int下标, string[]显示名称);

private int _toolBarIndex;

private void OnGUI()
{
    ...
        
    _toolBarIndex = GUILayout.Toolbar(_toolBarIndex, new[] { "1", "2", "3", "4", "5" });
    
    ...
}

11 Toggle 开关按钮

bool开关 = GUILayout.Toggle(bool开关, string名称);

private bool _toggleValue;

private void OnGUI()
{
    ...
        
    _toggleValue = GUILayout.Toggle(_toggleValue, "Toggle");
    
    ...
}

12 Space / FlexibleSpace 空白

GUILayout.Space(int间距);

空出给定间距。
GUILayout.FlexibleSpace();

向两边扩张，挤压中间区域

private void OnGUI()
{
    ...
        
     GUILayout.BeginHorizontal();
    {
        GUILayout.Label("TextField");
        _textfieldValue = GUILayout.TextField(_textfieldValue);
    }
    GUILayout.EndHorizontal();

    GUILayout.Space(100); // 间距 100

    ...

    GUILayout.BeginHorizontal();
    {
        GUILayout.Label("Button");

        GUILayout.FlexibleSpace(); // 挤压中间区域，将 Button 推到右边

        if (GUILayout.Button("Button"))
        {
            Debug.Log("Button Clicked");
        }
    }
    GUILayout.EndHorizontal();
    
    ...
}

下图 “1” 表示垂直布局间隔 100，“2” 表示 Button 被水平挤压到最小。

13 Width / Height / MinWidth / MinHeight / MaxWidth / MaxHeight 宽高控制

GUILayout.MinWidth(int值);
GUILayout.MaxWidth(int值);
GUILayout.MinHeight(int值);
GUILayout.MaxHeight(int值);

private void OnGUI()
{
    ...
        
    GUILayout.BeginHorizontal();
    {
        GUILayout.Label("Button");

        GUILayout.FlexibleSpace(); // 挤压中间区域，将 Button 推到右边

        if (GUILayout.Button(
                "Button",
                GUILayout.MinWidth(100), GUILayout.MaxWidth(150),
                GUILayout.MinHeight(100), GUILayout.MaxHeight(150)))
        {
            Debug.Log("Button Clicked");
        }
    }
    GUILayout.EndHorizontal();
    
    ...
}

14 SelectionGrid 选择网格

int下标 = GUILayout.SelectionGrid(int下标, string[]名称, int水平数量);

private int _selectedGridIndex;

private void OnGUI()
{
    ...
        
    _selectedGridIndex = GUILayout.SelectionGrid(_selectedGridIndex, new[] { "1", "2", "3", "4", "5" }, 3);
    
    ...
}