Flutter 控制屏幕旋转的实现

最近需要做个平板的项目,然后需要直接横屏,有2种实现方式。

1, 随着屏幕旋转,布局自动调整。做横竖屏适配

2,强制屏幕横屏,不随着屏幕去调整

第一种方式这里就不做说明了。代码做适配就可以。 下面说一下第二种实现方式

Flutter 自带方式

flutter 为我们提供了方法来控制系统的横竖屏显示

 SystemChrome.setPreferredOrientations([
   DeviceOrientation.landscapeLeft,
   DeviceOrientation.landscapeRight,
   DeviceOrientation.portraitUp,
   DeviceOrientation.portraitDown
  ]).then((_) {
  });

包含的方向类型。 !!!!但是但是但是这个方法只适用于android在iOS上没有效果,上网查资料有大神封装的 flutter插件orientation,flutter插件auto_orientation在iOS上都起不到效果,所以打算自己写一个原生文件与flutter进行通讯,实现屏幕旋转。也是笔者在查询资料之后做的一个整合和解释说明

iOS端实现屏幕旋转

创建iOS原生文件

创建iOS原生文件来实现交互,首先要创建个原生文件。命名为FlutterIOSDevicePlugin。 创建文件

创建一个命名为FlutterIOSDevicePlugin.h 和命名为FlutterIOSDevicePlugin.m文件,说明一下: FlutterIOSDevicePlugin.h文件选择图片里面的header File模块创建即可。

创建之后,一起看一下FlutterIOSDevicePlugin.h里面的代码

#ifndef FlutterIOSDevicePlugin_h
#define FlutterIOSDevicePlugin_h

#import <Flutter/Flutter.h>

@interface FlutterIOSDevicePlugin : NSObject<FlutterPlugin>
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar flutterViewController:(FlutterViewController*) controller;
- (instancetype)newInstance:(NSObject<FlutterPluginRegistrar>*)registrar flutterViewController:(FlutterViewController*) controller;
@end
#endif /* FlutterIOSDevicePlugin_h */

这个不需要过多说明了看一下FlutterIOSDevicePlugin.m的代码

#import <Foundation/Foundation.h>
#import "FlutterIOSDevicePlugin.h"

@interface FlutterIOSDevicePlugin () {
  NSObject<FlutterPluginRegistrar> *_registrar;
  FlutterViewController *_controller;
}
@end

static NSString* const CHANNEL_NAME = @"flutter_ios_device";
static NSString* const METHOD_CHANGE_ORIENTATION = @"change_screen_orientation";
static NSString* const ORIENTATION_PORTRAIT_UP = @"portraitUp";
static NSString* const ORIENTATION_PORTRAIT_DOWN = @"portraitDown";
static NSString* const ORIENTATION_LANDSCAPE_LEFT = @"landscapeLeft";
static NSString* const ORIENTATION_LANDSCAPE_RIGHT = @"landscapeRight";

@implementation FlutterIOSDevicePlugin
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
  FlutterMethodChannel* channel = [FlutterMethodChannel
                   methodChannelWithName:CHANNEL_NAME
                   binaryMessenger:[registrar messenger]];
  FlutterIOSDevicePlugin* instance = [[FlutterIOSDevicePlugin alloc] newInstance:registrar flutterViewController:nil];
  [registrar addMethodCallDelegate:instance channel:channel];
}

+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar flutterViewController:(FlutterViewController*) controller {
  FlutterMethodChannel* channel = [FlutterMethodChannel
                   methodChannelWithName:CHANNEL_NAME
                   binaryMessenger:[registrar messenger]];
  FlutterIOSDevicePlugin* instance = [[FlutterIOSDevicePlugin alloc] newInstance:registrar flutterViewController:controller];
  [registrar addMethodCallDelegate:instance channel:channel];
}

- (instancetype)newInstance:(NSObject<FlutterPluginRegistrar>*)registrar flutterViewController:(FlutterViewController*) controller{
  _registrar = registrar;
  _controller = controller;
  return self;
}

- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
  if ([METHOD_CHANGE_ORIENTATION isEqualToString:call.method]) {
    NSArray *arguments = call.arguments;
    NSString *orientation = arguments[0];
    NSNumber *index = [NSNumber numberWithInt: [call.arguments[0] intValue]];
    NSInteger iOSOrientation;
     if ([orientation isEqualToString:ORIENTATION_LANDSCAPE_LEFT]){
           iOSOrientation = UIDeviceOrientationLandscapeLeft;
         }else if([orientation isEqualToString:ORIENTATION_LANDSCAPE_RIGHT]){
           iOSOrientation = UIDeviceOrientationLandscapeRight;
         }else if ([orientation isEqualToString:ORIENTATION_PORTRAIT_DOWN]){
           iOSOrientation = UIDeviceOrientationPortraitUpsideDown;
         }else{
           iOSOrientation = UIDeviceOrientationPortrait;
         }

    [[UIDevice currentDevice] setValue:@(iOSOrientation) forKey:@"orientation"];
//    [[NSNotificationCenter defaultCenter] postNotificationName:@"FlutterIOSDevicePlugin" object:nil userInfo:@{@"orientationMask": index}];
//    [UIViewController attemptRotationToDeviceOrientation];

    result(nil);
  } else {
    result(FlutterMethodNotImplemented);
  }
}
@end

以上是全部的代码,其中尝试了用通知的方式去做屏幕旋转,后来发现其实没有那么麻烦,直接采用的是

[[UIDevice currentDevice] setValue:@(iOSOrientation) forKey:@"orientation"];

方式做的。其中遇到的问题:

问题1:iphone手机上可以正常旋转,ipad上不行

这个问题主要原因是info。plist文件里面的iphone和ipad不一致,且勾选Requires full screen 即可

回到正轨哈

注册原生插件文件

iOS 工程种有个GeneratedPluginRegistrant.m文件,直接注册就可以了。 如果你项目引入了其他第三方插件,也是统一在这个地方注册的

#import "GeneratedPluginRegistrant.h"

#if __has_include(<auto_orientation/AutoOrientationPlugin.h>)
#import <auto_orientation/AutoOrientationPlugin.h>
#else
@import auto_orientation;
#endif

#if __has_include(<orientation/OrientationPlugin.h>)
#import <orientation/OrientationPlugin.h>
#else
@import orientation;
#endif
#import "FlutterIOSDevicePlugin.h"

@implementation GeneratedPluginRegistrant

+ (void)registerWithRegistry:(NSObject<FlutterPluginRegistry>*)registry {
 [AutoOrientationPlugin registerWithRegistrar:[registry registrarForPlugin:@"AutoOrientationPlugin"]];
 [OrientationPlugin registerWithRegistrar:[registry registrarForPlugin:@"OrientationPlugin"]];
//  [registry registrarForPlugin:@"FlutterIOSDevicePlugin"];

  [FlutterIOSDevicePlugin registerWithRegistrar: [registry registrarForPlugin:@"FlutterIOSDevicePlugin"]];
}

@end

代码中的这个片段是自己写的插件注册的方法,其他的AutoOrientationPlugin,OrientationPlugin是引用第三方插件自动生成的代码。

[FlutterIOSDevicePlugin registerWithRegistrar: [registry registrarForPlugin:@"FlutterIOSDevicePlugin"]];

AppDelegate文件中的设置

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
 var orientationMask: UIInterfaceOrientationMask = .all;

 override func application(
  _ application: UIApplication,
  didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
 ) -> Bool {
  NotificationCenter.default.addObserver(self, selector: #selector(changeLandscape(center:)), name:NSNotification.Name(rawValue: "FlutterIOSDevicePlugin"), object: nil)
  GeneratedPluginRegistrant.register(with: self);
  return super.application(application, didFinishLaunchingWithOptions: launchOptions)
 }
  override func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask {
    return orientationMask;
  }

  @objc func changeLandscape(center: Notification){
    let index: NSNumber = (center.userInfo?["orientationMask"] ?? 5) as! NSNumber
    var mask : UIInterfaceOrientationMask = .all
    switch index {
    case 0:
      mask = .portrait
      break
    case 1:
      mask = .landscapeLeft
      break
    case 2:
      mask = .landscapeRight
      break
    case 3:
      mask = .portraitUpsideDown
      break
    case 4:
      mask = .landscape
      break
    case 5:
      mask = .all
      break
    case 6:
      mask = .allButUpsideDown
      break

    default:
      mask = .all
      break
    }
    orientationMask = mask;
    _ = application(UIApplication.shared, supportedInterfaceOrientationsFor: UIApplication.shared.keyWindow)
  }
}

其中changeLandscape方法是控制监听的事件的方法,目前没什么用。 主要代码是这一段,这个是在发出屏幕旋转的时候回调的方法,这里面设置的是全部的方向都可以。

  override func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask {
    return orientationMask;
  }

问题2:程序不走该方法

具体原因是因为info.plist文件问题。参考上面设置就没问题

flutter 原生代码使用

这个地方是针对于iOS平台去做的区别。

MethodChannel _channel = const MethodChannel('flutter_ios_device');

@override
 void initState() {
  SystemChrome.setPreferredOrientations([
   DeviceOrientation.landscapeLeft,
   DeviceOrientation.landscapeRight,
   DeviceOrientation.portraitUp,
   DeviceOrientation.portraitDown
  ]).then((_) {
   if (Platform.isIOS) {
    this.changeScreenOrientation(DeviceOrientation.landscapeLeft);
   }
  });
  super.initState();
 }

Future<void> changeScreenOrientation(DeviceOrientation orientation) {
  String o;
  switch (orientation) {
   case DeviceOrientation.portraitUp:
    o = 'portraitUp';
    break;
   case DeviceOrientation.portraitDown:
    o = 'portraitDown';
    break;
   case DeviceOrientation.landscapeLeft:
    o = 'landscapeLeft';
    break;
   case DeviceOrientation.landscapeRight:
    o = 'landscapeRight';
    break;
  }
  return _channel.invokeMethod('change_screen_orientation', [o]);
 }

代码不用过多说明了, 有不了解的可以留言

问题3: 启动程序自动旋转

SystemChrome.setPreferredOrientations需要设置全部内容。不然会默认旋转。有点小坑,

以上基本上可以实现屏幕旋转的问题,如果有小伙伴还是不行,可以试一下用iOS原生通知的方式去完成。这个我做的是平板的项目,暂时没有问题,更多相关Flutter 控制屏幕旋转内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • flutter RotationTransition实现旋转动画

    本文实例为大家分享了flutter RotationTransition实现旋转动画的具体代码,供大家参考,具体内容如下 flutter 动画状态监听器 AnimationController //动画控制器 AnimationController controller; //AnimationController是一个特殊的Animation对象,在屏幕刷新的每一帧,就会生成一个新的值, // 默认情况下,AnimationController在给定的时间段内会线性的生成从0.0到1.0的数字

  • Flutter 控制屏幕旋转的实现

    最近需要做个平板的项目,然后需要直接横屏,有2种实现方式. 1, 随着屏幕旋转,布局自动调整.做横竖屏适配 2,强制屏幕横屏,不随着屏幕去调整 第一种方式这里就不做说明了.代码做适配就可以. 下面说一下第二种实现方式 Flutter 自带方式 flutter 为我们提供了方法来控制系统的横竖屏显示 SystemChrome.setPreferredOrientations([ DeviceOrientation.landscapeLeft, DeviceOrientation.landscape

  • iOS开发中控制屏幕旋转的编写方法小结

    在iOS5.1 和 之前的版本中, 我们通常利用 shouldAutorotateToInterfaceOrientation: 来单独控制某个UIViewController的旋屏方向支持,比如: 复制代码 代码如下: - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation  {      return (interfaceOrientation == UIInter

  • 总结iOS App开发中控制屏幕旋转的几种方式

    在iOS6之前的版本中,通常使用 shouldAutorotateToInterfaceOrientation 来单独控制某个UIViewController的方向,需要哪个viewController支持旋转,只需要重写shouldAutorotateToInterfaceOrientation方法. 但是iOS 6里屏幕旋转改变了很多,之前的 shouldAutorotateToInterfaceOrientation 被列为 DEPRECATED 方法,查看UIViewController

  • iOS开发中使用屏幕旋转功能的相关方法

    加速计是整个IOS屏幕旋转的基础,依赖加速计,设备才可以判断出当前的设备方向,IOS系统共定义了以下七种设备方向:   复制代码 代码如下: typedef NS_ENUM(NSInteger, UIDeviceOrientation) { UIDeviceOrientationUnknown, UIDeviceOrientationPortrait,            // Device oriented vertically, home button on the bottom UIDe

  • swift4.0实现视频播放、屏幕旋转、倍速播放、手势调节及锁屏面板等功能实例

    前言 学习swift有段时间了,原来写过一个基于 swift 3.0 的视频播放,后来有同学联系我说,在音频锁屏的情况下,无法用控制面板拖动进度条调节播放进度,所以又将原来的代码拿过来重新整理了下也顺便更新到了4.0版本.在把原来的代码拿来的时候发现原来有好多地方都是错误的,原来在 OC 项目里面已经写过一遍关于视频播放的东西所以就按照原来的逻辑写了 swift 版本,其实里面很多代码我也是通过查找资料和看文档拼凑出来的,对于 swift 的语句也是一知半解,希望各位看官多多包涵. 先来看一下实

  • iOS屏幕旋转与锁屏的示例代码

    在做视频开发时遇到屏幕旋转问题,其中涉及到 StatusBar. UINavigationController.UITabBarController .UIViewcontroller . 在设备锁屏下的整体效果图 iOS-旋转.gif 主要涉及以下4点: 横竖屏的旋转 屏幕旋转相应改变视图位置 旋转时状态栏的隐藏与显示 锁屏 1.横竖屏旋转 第1步: -(UIInterfaceOrientationMask)application:(UIApplication *)application su

  • Android如何监听屏幕旋转

    背景 关于个人,前段时间由于业务太忙,所以一直没有来得及思考并且沉淀点东西:同时组内一个个都在业务上能有自己的思考和总结,在这样的氛围下,不由自主的驱使周末开始写点东西,希望自己除了日常忙于业务,可以沉淀点东西,加上自己的成长.. 关于切入点,最近在做应⽤内悬浮球功能时,需要监听屏幕旋转事件来对悬浮球的位置进⾏调整,发现有些情况下并不能收到系统回调,思考了⼀翻,做了⼀个屏幕旋转的模拟监听,基本上能达到⽬的. 问题 悬浮球在停⽌拖拽后,需要贴边到⼿机屏幕的左右两侧. 在竖屏状态下,x坐标为0即为左

  • iOS中滑动控制屏幕亮度和系统音量(附加AVAudioPlayer基本用法和Masonry简单使用)

    如图,左侧上下滑动改变亮度,右侧上下滑动改变音量. 1.改变屏幕亮度 //获得当前屏幕亮度 light = [UIScreen mainScreen].brightness; light = 0.5f; //直接赋值或者使用set方法皆可 [UIScreen mainScreen].brightness = light; 2.改变系统音量 使用的比较多的就是通过MPMusicPlayerController来改变系统音量,主要归功于MPMusicPlayerController的音量和系统的同步

  • C#控制图像旋转和翻转的方法

    本文实例讲述了C#控制图像旋转和翻转的方法.分享给大家供大家参考.具体实现方法如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; namespace WindowsApplication2 { public par

随机推荐