2025年12月11日更新

top_panel.pivot = new Vector2(0.5f, 0.5f);
top_panel.anchorMin = new Vector2(0, 0);
top_panel.anchorMax = new Vector2(1, middleY);
top_panel.sizeDelta = Vector2.zero;
top_panel.anchoredPosition = Vector2.zero;

红色2行忘记写了，导致适配完全没生效（或者只感觉生效了一半！我丢）

对齐胶囊体中心方案（可用）

下方脚本可以如果需要将按钮保持和胶囊体一样那就将buttonRectTrans相关代码执行。
思路：将一个面板的顶部对齐微信胶囊体中心点，然后将面板内部的按钮对齐面板顶部，并设置按钮Y值为0（让按钮中心对准面板顶部），也就是按钮中心对齐胶囊体中心。

注意：由于是中心对齐，所以按钮的上下部分可能会超出胶囊体上下范围（如果按钮比较大就会超出），如果不想超出，可以自行改为上对齐（或下对齐）

    //top_panel.anchorMax = new Vector2(1, maxY); //上对齐
    top_panel.anchorMax = new Vector2(1, middleY);//中对齐
    //top_panel.anchorMax = new Vector2(1, minY); //下对齐

每种对齐的面板内部按钮的对齐方式不一样，例如：上对齐，按钮就要将按钮中心调到顶部，再上对齐；下对齐，按钮要将中心点调到底部，再上对齐；中对齐如上；

上对齐：

下对齐：

建议是中对齐或上对齐；避免刘海屏挡住按钮，下对齐大概率会被刘海屏挡住按钮一部分，不过下对齐是最美观的，毕竟相当于全部按钮和胶囊体保持同一个水平线上，中对齐相对美观 但有部分被遮挡可能性，顶部对齐是绝对不会被挡的一种，但不美观。

using UnityEngine;
using WeChatWASM;

public class TopPanelAdapt : MonoBehaviour
{
    //开发阶段自定义posY
    public float posY = 0f;

    //一个按钮
    //public RectTransform buttonRectTrans;

    void Start()
    {
        //微信宏(具体项目可能不同)
#if UNITY_WEBGL || WEIXINMINIGAME || UNITY_EDITOR
        InitTop();
#endif
    }

    void InitTop()
    {
        var top_panel = GetComponent<RectTransform>();
        //胶囊控件区域信息
        var rect = WX.GetMenuButtonBoundingClientRect();        
        //屏幕信息
        var _sInfo = WeChatWASM.WX.GetWindowInfo();
        if (rect != null && _sInfo != null)
        {
            var sHeight = _sInfo.windowHeight;
            var sWidth = _sInfo.windowWidth;
            top_panel.sizeDelta = Vector2.zero;
            
            float minY = 1 - (float)(rect.bottom / sHeight);
            float maxY = 1 - (float)(rect.top / sHeight);
            float middleY = (maxY + minY) / 2; //取到中间值, 此时TopPanel顶部会对齐胶囊体中间（将顶层按钮上对齐 Y设置为0，让按钮中间对齐面板顶部线）

            top_panel.pivot = new Vector2(0.5f, 0.5f);
            top_panel.anchorMin = new Vector2(0, 0);
            top_panel.anchorMax = new Vector2(1, middleY);

            //测试：修改一个按钮UI将它的宽高设置为胶囊体一致
            //float width = (float)(rect.right - rect.left);
            //float height = (float)(rect.bottom - rect.top);
            //float x = FindObjectOfType<Canvas>().transform.localScale.x;
            //buttonRectTrans.sizeDelta = new Vector2(width * x, height * x);

            //测试: 将top_panel完全重叠胶囊体 （如果适配异常，可以测试这段代码查看API是否正常）
            //top_panel.anchorMin = new Vector2((float)(rect.left * 1.0f / sWidth), 1- (float)(rect.bottom / sHeight));
            //top_panel.anchorMax = new Vector2((float)(rect.right * 1.0f / sWidth), 1 - (float)(rect.bottom - rect.top));
        }
        else
        {
            top_panel.offsetMax = new Vector2(top_panel.offsetMax.x, -posY);
        }
    }
}

（如下是失败方案，当时以为是有适配问题的，做了各种修正处理）

面板保持如下RectTransform数据配置，挂上脚本，然后其子UI都要向上对齐，即

如下脚本是控制将面板的上边界与胶囊控件（圆心设置按钮）上边界水平对齐。

var topSize = rect.top;  这一行代码是获取到胶囊控件上边界，改为其他的就可以与其他位置水平对齐。
例如： var topSize = rect.bottom; 与胶囊控件下边界对齐
例如： var topSize = _sInfo.safeArea.top; 与安全区域上边界对齐（刘海屏下边界）
... ...

using System;
using Newtonsoft.Json;
using UnityEngine;
using WeChatWASM;

public class TopPanelAdapt : MonoBehaviour
{
    //开发阶段自定义posY
    public float posY = 0f;
    
    void Start()
    {
    //微信宏(具体项目可能不同)
#if UNITY_WEBGL || WEIXINMINIGAME || UNITY_EDITOR
        InitTop();
#endif
    }

    void InitTop()
    {
        var top_panel = GetComponent<RectTransform>();
        //胶囊控件区域信息
        var rect = WX.GetMenuButtonBoundingClientRect();
        //屏幕信息
        var _sInfo = WeChatWASM.WX.GetWindowInfo();
        if (rect != null && _sInfo != null)
        {
            var sHeight = _sInfo.windowHeight;
            top_panel.sizeDelta = Vector2.zero;
            
            var topSize = rect.top;
            //开发分辨率: 750 x 1334 （具体项目可能不同）
            //垂直px to rpx操作 从微信获取的是px像素尺寸 需转为Unity的rpx尺寸
            float newSize = (float)topSize * (1334f / UnityEngine.Screen.height);
            //PS: 如果是水平px 则是  px * (750f / UnityEngine.Screen.width);
            topSize = newSize;

            double t = 0;
            if (topSize > 0)
            {
                t = topSize / sHeight;
            }

            top_panel.pivot = new Vector2(0.5f, 0.5f);
            top_panel.anchorMin = new Vector2(0, 0);
            top_panel.anchorMax = new Vector2(1, 1 - (float)t);
        }
        else
        {
            top_panel.offsetMax = new Vector2(top_panel.offsetMax.x, -posY);
        }
    }
}