Unity 实现拖放式 UI 窗口大小的方式
可以按照以下步骤完成： 步骤 1：添加 UI 元素 首先，我们需要将 UI 元素（例如 Panel）作为窗口容器添加到场景中，并在 UI 元素中添加一个拖放组件（例如可拖动）。步骤 2：编写脚本 接下来，我们需要编译一个脚本来实现拖放式 UI 窗口大小函数。在此脚本中，我们需要获取键盘的位置并将其与窗口的初始位置进行比较，以估计窗口的大小。步骤 3：实现拖放逻辑 在拖放脚本中，我们可以通过在更新函数中使用 Input.mousePosition 来获取键盘的位置。然后，我们可以使用 RectTransform 组件来获取 UI 元素的初始位置和大小，并估计 UI 元素的新位置和大小。步骤 4：更新 UI 元素 最后，在拖放逻辑中html5拖动，我们需要将估计的新位置和大小应用于 UI 元素。这可以通过设置 RectTransform 组件的位置和大小增量属性来实现。通过以上步骤html5拖动，我们可以实现UI窗口大小的拖拽功能。当我们在场景中操作这个 UI 元素时，它会根据键盘的位置手动调整其大小。这样，我们可以轻松地调整UI窗口的大小以满足不同的需求。
背景
在最近的一个HybridApp项目中，我实现的H5有以下两个需求：
使用quill.js实现富文本编辑器。 不过，工具栏需要固定在顶部。 当输入法弹出时，工具栏需要悬浮在输入法按钮上方，如右图所示：
它是一个普通表单，不仅有文本输入，而且还有下拉选项。 弹出下拉选项时，无法覆盖焦点输入框。 如右图，当点击左侧的ComplexLabels时，弹出下拉选项，下拉选项被挡住了ComplexLabels到位后，产品所需的疗效为：当弹出下拉选项，当前焦点表单项无法被遮挡，即Complexlabels
quill.js工具栏定位问题
工具栏采用固定定位，css如下：
#ql-toolbar {
position: fixed;
bottom: 10px;
left: 0;
right: 0;
z-index: 200;
}
固定定位元素相对于屏幕图元（视口）定位。 当H5嵌入到app的webview中进行显示时，可以理解为fixed是相对于webview定位的。
当光标聚焦在编辑区域输入文字时，会弹出系统级输入法按钮。 这时鼠标的弹出会对webview的高度产生一定的影响，而且android和ios对webview的处理是不同的。 简单来说，就是：
综上所述，当工具栏使用fixed定位时，在android上，当按钮弹出时html5 弹出框，webview的高度会降低，因此工具栏会浮动在按钮上方，也就是说在android上的实现是满足要求的。而且，ios不会改变webview的高度，所以当鼠标弹出时，工具栏仍然位于屏幕顶部，因此被按钮遮挡，不符合要求，所以需要特殊处理对于 iOS
ios上的解决方案
解决方案有以下三种：
更改设计：将工具栏放在底部，这样更改成本最小html5 弹出框，兼容性最好。 如果能说服产品，建议在iosapp端使用这些方法。 当按钮弹出时，将webview的高度配置为屏幕的高度-按钮的高度。 和android的处理方式是一样的。 不推荐使用这些方法。 第一个原因是这样处理之后ios默认的处理机制发生了改变。 当H5在其他ios应用中使用时，仍然会出现相同的遮挡。 问题; 第二个激励是H5业务与端强耦合。 在iosapp端，当按钮弹出时，会通过storm告知H5按钮的高度，然后H5会根据webview的高度和鼠标的高度动态估计工具栏。 定位到鼠标上方。当H5页面只需要在我们的应用程序中使用，不需要与其他应用程序兼容时，这是可行的。 如果需要兼容其他app的话，还是不可行，因为其他app不会通过暴风雨告知我们按钮的高度
一般来说，对于这个问题没有很好的处理办法，或多或少都会存在一定的问题。 最终我们确定的方案是在终端实现富文本编辑器，并实现用H5编辑后的预览页面
下拉选项挡住输入框的问题
文本输入框不被遮挡的原因是，当文本输入框输入时，会弹出系统级输入法按钮，因此不会被遮挡。 而对于下拉选项，弹出框的下拉选项是我们自己实现的，不是系统级别的，所以系统不会处理，比如：将焦点输入框带入可见范围，因此，可能会出现遮挡问题。
该问题的解决需要分为以下几个步骤：
如果滚动区域的高度大于屏幕的高度，则意味着需要在顶部填充一个空的元素div来展开页面，形成垂直滚动条，方便上推输入框。 这个div的高度就是弹出框的高度，暂定为 popH ，对于这些情况，遮挡问题可以在这一步解决。 如果滚动区域的高度小于屏幕的高度，则需要按照以下流程处理：
源码疗效如下：
滚动区域大于屏幕高度
滚动区域的高度等于屏幕的高度
滚动区域高度小于屏幕高度
发表评论