电容屏幕方向插件
锁定/解锁屏幕方向的电容插件 .
特征
Capacitor Screen取向插件是Capacitor应用最完整的取向控制解决方案之一. 以下是一些关键特征:
- 🖥️ 跨平台:支持Android,iOS,和Web.
- 🔒 方向锁定:将屏幕锁定到特定方向.
- 🔓 方向解锁:解锁并恢复自动取向.
- 📱 多重取向:支持肖像,地貌,以及特定取向.
- 🔄 定向检测: 获取当前屏幕方向.
- 📢 活动听众: 听取取向变化事件.
- 📐 精细的控制:初级和二级定向模式.
- 🍎 iPad 支持:iPad方向锁定的特殊配置.
- 🤝 兼容性: 与 家庭指标, (中文(简体) ), 保持清醒 财务报告和审定财务报表 导航栏 插件 .
- 🔁 最新数据:总是支持最新的Capacitor版本.
缺少一个功能? 刚刚 打开一个问题 我们看看!
使用大小写
屏幕定向插件通常用于应用程序的某些屏幕只在特定方向上运行良好时,例如:
- 视频播放器: 将屏幕锁定到地平面上进行全屏视频回放.
- 游戏:无论设备如何持有,游戏都保持固定方向.
- 相机和扫描屏:在捕捉相片或扫描代码时将屏幕锁定为肖像.
- 格式和阅读视图:在用户输入或读取时防止意外旋转.
- 响应布局: 对方向变化的反应
screenOrientationChange事件以调整您的用户界面.
兼容性
| 插件版本 | 电容版本 | 状态 |
|---|---|---|
| 8.x.x (英语) | >=8.x.x | 积极支持 |
| 7.x.x (中文(简体) ) | 7.x.x (中文(简体) ) | 折旧 |
| 6.x.x (中文(简体) ) | 6.x.x (中文(简体) ) | 折旧 |
| 5.x.x (中文(简体) ) | 5.x.x (中文(简体) ) | 折旧 |
演示
这里有一个实例: robingenz/电容器-插管-demo
安装
你可以用我们的 AI 辅助设置 以安装插件. 添加数据 超级技能 至您的 AI 工具,使用以下命令:
npx skills add capawesome-team/skills --skill capacitor-plugins
然后使用下列提示:
Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capawesome/capacitor-screen-orientation` plugin in my project.
如果你喜欢 手动设置,通过运行以下命令来安装插件,并遵循下面的平台特定指令:
npm install @capawesome/capacitor-screen-orientation
npx cap sync
iOS系统
常规
在iOS上,您必须在您的应用程序中添加以下内容: AppDelegate.swift数字 :
+ import ScreenOrientationPlugin
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
+ func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask {
+ return ScreenOrientation.getSupportedInterfaceOrientations()
+ }
如果您的工程仍然使用CocoaPods而不是 Swift 软件包管理器( SPM) , 导入 CapawesomeCapacitorScreenOrientation 而不是说 ScreenOrientationPlugin数字 :
+ import CapawesomeCapacitorScreenOrientation
iPad 方向锁定
在iPad上,您必须在应用程序中添加以下内容: Info.plist数字 :
<key>UIRequiresFullScreen</key>
<true/>
配置
此插件不需要配置 .
使用量
以下例子显示如何锁定,解锁,并读取当前屏幕取向.
锁定屏幕方向
将设备锁定到特定的方向, 例如地貌 。 再说 LANDSCAPE 财务报告和审定财务报表 PORTRAIT,也可以锁定初级或二级模式,例如 LANDSCAPE_PRIMARY 用于精细控制:
import { ScreenOrientation, OrientationType } from '@capawesome/capacitor-screen-orientation';
const lock = async () => {
await ScreenOrientation.lock({ type: OrientationType.LANDSCAPE });
};
解锁屏幕方向
删除方向锁并恢复自动旋转 :
import { ScreenOrientation } from '@capawesome/capacitor-screen-orientation';
const unlock = async () => {
await ScreenOrientation.unlock();
};
获取当前屏幕方向
读取设备当前方向类型 :
import { ScreenOrientation } from '@capawesome/capacitor-screen-orientation';
const getCurrentOrientation = async () => {
const result = await ScreenOrientation.getCurrentOrientation();
return result.type;
};
API 密码
lock(...)unlock()getCurrentOrientation()addListener('screenOrientationChange', ...)removeAllListeners()- 接口
- 类型异名
- 数字
锁定(...)
lock(options?: LockOptions | undefined) => Promise<void>
锁定设备方向 .
| 参数 | 类型 |
|---|---|
options | LockOptions |
解锁( )
unlock() => Promise<void>
解锁设备取向.
获取当前方向( C)
getCurrentOrientation() => Promise<GetCurrentOrientationResult>
获得当前设备方向类型.
回返情况: Promise<GetCurrentOrientationResult>
添加倾听器( “ 屏幕方向变化 ” ,...)
addListener(eventName: 'screenOrientationChange', listenerFunc: ScreenOrientationChangeListener) => Promise<PluginListenerHandle>
听取屏幕方向变化.
| 参数 | 类型 |
|---|---|
eventName | 'screenOrientationChange' |
listenerFunc | ScreenOrientationChangeListener |
回返情况: Promise<PluginListenerHandle>
删除所有收听器( )
removeAllListeners() => Promise<void>
删除此插件的所有听众 .
接口
锁定选项
| Prop | 类型 | 说明 |
|---|---|---|
type | OrientationType | 取向锁型. |
获取当前定向结果
| Prop | 类型 | 说明 |
|---|---|---|
type | OrientationType | 当前取向类型. |
插件听筒
| Prop | 类型 |
|---|---|
remove | () => Promise<void> |
屏幕定向变化
| Prop | 类型 | 说明 |
|---|---|---|
type | OrientationType | 当前取向类型. |
类型异名
屏幕定向变换倾听器
回调收到屏幕方向更改通知 .
(change: ScreenOrientationChange): void
数字
方向类型
| 成员 | 数值 | 说明 |
|---|---|---|
LANDSCAPE | 'landscape' | 其取向要么是景观第一,要么是景观第二. |
LANDSCAPE_PRIMARY | 'landscape-primary' | 取向为主地貌模式. |
LANDSCAPE_SECONDARY | 'landscape-secondary' | 取向为二级地貌模式. |
PORTRAIT | 'portrait' | 方向要么是肖像初级,要么是肖像二级. |
PORTRAIT_PRIMARY | 'portrait-primary' | 取向为主肖像模式. |
PORTRAIT_SECONDARY | 'portrait-secondary' | 取向为二级肖像模式. |
财务问题
为什么方向锁在iPad上不起作用?
要在 iPad 上工作,必须添加 UIRequiresFullScreen 键与值 true 你的应用程序 Info.plist 文件,如 安装 节。 同时要确保您已经对您的 AppDelegate.swift。 。 。 .
我需要在iOS上修改我的AppDelegate吗?
对 您必须执行 supportedInterfaceOrientationsFor 应用中的方法 AppDelegate.swift 返回时 ScreenOrientation.getSupportedInterfaceOrientations(),如 安装 节。 没有这种改变,方向锁对iOS没有影响.
LandSCAPE和LandSCAPE PRIMARI有什么区别?
这个 LANDSCAPE 类型覆盖两种地平面模式,因此设备在锁定时可以在地平面主和地平面次要之间旋转. 这个 LANDSCAPE_PRIMARY 财务报告和审定财务报表 LANDSCAPE_SECONDARY 类型将屏幕锁定在两个景观模式中。 这同样适用于 PORTRAIT, (中文(简体) ), PORTRAIT_PRIMARY 财务报告和审定财务报表 PORTRAIT_SECONDARY。 。 。 .
锁定方向后如何恢复自动旋转??
随便叫它 unlock() 方法。 它会去除取向锁,这样设备就可以根据用户的设备设置自动地再次旋转.
我对方向变化有什么反应?
为您添加一个收听器 screenOrientationChange 使用 addListener(...) 方法。 收听者每次屏幕取向变化时都会收到新的取向类型. 使用 removeAllListeners() 在你不再需要时删除所有听众.
我能用这个插件吗? 有Ionic、React、Vue或Angular?
是的,插件是框架不可知的。 它在任意网络框架的Capacitor app中工作,包括有Angular,React,或Vue的Ionic,以及平版JavaScript等项目.
相关插件
通讯
随时更新有关卡帕韦索姆、Capacitor和Ionic生态系统的最新消息和最新消息,因为我们 《卡帕索克通讯》。 。 。 .
更改日志
见 变动情况。 。 。 .
许可证
见 自由主义。 。 。 .
贷项
此插件基于 电容屏幕方向 插件 . 感谢所有为这个项目捐款的人!