Unity OnGUI：解决可滚动表格中按钮标签与颜色无法共存问题

嘿，我懂你在Unity OnGUI系统里遇到的麻烦了——想给滚动表格里的按钮同时加上文字标签和自定义颜色，结果试来试去好像只能实现其中一项，对吧？别慌，咱们一步步把这个问题解决掉。

核心问题原因 #

默认的GUI.Button如果直接传文字标签，就只能用内置的按钮样式；如果传自定义GUIStyle，新手容易误以为没法同时加文字，但其实只要自定义样式时保留文字渲染的设置，再同时传递标签和样式就行。另外滚动表格的实现需要用GUILayout.BeginScrollView来包裹内容区域。

完整实现代码 #

首先在你的脚本里添加必要的变量和样式初始化逻辑：

using UnityEngine;
using System.Linq; // 用到Skip()方法遍历数组

public class MeetingRequestViewer : MonoBehaviour
{
    private Rect windowRect = new Rect(20, 20, 600, 400);
    private Vector2 scrollPosition = Vector2.zero;
    private GUIStyle coloredButtonStyle; // 自定义按钮样式

    void Awake()
    {
        // 初始化自定义按钮样式：复制默认按钮的交互逻辑，再修改外观
        coloredButtonStyle = new GUIStyle(GUI.skin.button);
        
        // 设置按钮文字颜色
        coloredButtonStyle.normal.textColor = Color.white;
        coloredButtonStyle.hover.textColor = Color.white; // hover时文字保持白色
        
        // 创建纯色背景纹理（这里用深蓝色当例子，你可以改成任意颜色）
        coloredButtonStyle.normal.background = CreateSolidTexture(Color.blue);
        coloredButtonStyle.hover.background = CreateSolidTexture(Color.cyan); // hover时的背景色
        coloredButtonStyle.active.background = CreateSolidTexture(Color.darkBlue); // 点击时的背景色
        
        // 可选：调整按钮内边距，让文字不贴边
        coloredButtonStyle.padding = new RectOffset(10, 10, 5, 5);
    }

    // 辅助方法：创建纯色纹理
    private Texture2D CreateSolidTexture(Color color)
    {
        Texture2D texture = new Texture2D(1, 1);
        texture.SetPixel(0, 0, color);
        texture.Apply();
        return texture;
    }

    public void OnGUI()
    {
        // 绘制可拖动的窗口
        windowRect = GUI.Window(0, windowRect, WindowFunction, "Meeting Request Viewer");
    }

    public void WindowFunction(int windowID)
    {
        // 获取用户数据
        string[][] userArray = GetComponent<Userdata>().CallDetail();
        
        // 开始滚动视图：设置合适的宽高，超出时自动出现滚动条
        scrollPosition = GUILayout.BeginScrollView(scrollPosition, GUILayout.Width(580), GUILayout.Height(360));
        
        // 遍历数据创建表格行
        foreach (string[] userRow in userArray)
        {
            GUILayout.BeginHorizontal(); // 开始一行的横向布局
            
            // 绘制带标签和自定义颜色的按钮
            if (GUILayout.Button(userRow[0], coloredButtonStyle, GUILayout.Width(150)))
            {
                // 按钮点击后的逻辑，比如处理会议请求
                Debug.Log($"处理会议请求：{userRow[0]}");
            }
            
            // 绘制表格其他列（假设每行除了按钮外还有其他数据）
            foreach (string cellContent in userRow.Skip(1))
            {
                GUILayout.Label(cellContent, GUILayout.Width(100));
            }
            
            GUILayout.EndHorizontal(); // 结束一行的布局
            GUILayout.Space(5); // 行与行之间的间距
        }
        
        GUILayout.EndScrollView(); // 结束滚动视图
        
        // 允许窗口拖动
        GUI.DragWindow();
    }
}

关键细节解释 #

1. 自定义GUIStyle：

   • 我们复制了默认按钮的样式，这样保留了按钮的hover、active等交互状态，不会因为自定义外观丢失交互反馈。
   • 通过CreateSolidTexture方法生成纯色背景，替代默认的按钮纹理，实现自定义颜色。
   • 同时设置了文字颜色，确保文字和背景对比明显，可读性强。

2. 滚动表格实现：

   • 用GUILayout.BeginScrollView和EndScrollView包裹整个表格内容，scrollPosition变量会自动记录滚动的位置。
   • 用GUILayout.BeginHorizontal/EndHorizontal来组织每一行的元素，实现表格的横向布局，不用手动计算每个元素的Rect位置，更适合动态数据。

3. 多颜色按钮扩展：

   • 如果需要给不同行的按钮设置不同颜色，可以创建多个GUIStyle实例（比如approveButtonStyle、rejectButtonStyle），或者在遍历数据时动态修改样式的背景纹理（注意频繁创建纹理会影响性能，建议提前预制好常用颜色的纹理）。

内容的提问来源于stack exchange，提问作者Oscar