Flutter横屏实践

在这里插入图片描述

1、Flutter设置横屏

// 强制横屏
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft,DeviceOrientation.landscapeRight
]);
// 强制竖屏
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);

另外建议

1、把所有横竖屏调用封装到一个方法中，便于维护

2、开启放super后面，关闭放super前面

@override
void initState() {super.initState();AppUtil().setScreenLandscape(true);
}@override
void dispose() {AppUtil().setScreenLandscape(false);super.dispose();
}

2、原生设置横屏

在实践过程中发现ios偶尔有横屏转不过来的现象，如果你也遇到了可以考虑原生设置横屏。

android原生

if (screenLandscape) {// 设置屏幕为横向activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
} else {// 设置屏幕为纵向activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
}

如果需要相机、相册等系统应用也能横屏，可以打开允许自动旋转权限

// 检查是否打开自动屏幕旋转
public static boolean checkAutoRotate(Activity activity) {// android系统设置权限if (!Settings.System.canWrite(activity)) {activity.runOnUiThread(() -> Toast.makeText(activity, "请允许修改系统设置权限！", Toast.LENGTH_SHORT).show());// 没有系统设置权限 -> 跳转到系统设置页面new Thread(() -> {try {sleep(500);} catch (InterruptedException e) {throw new RuntimeException(e);}Intent intent = new Intent(Settings.ACTION_MANAGE_WRITE_SETTINGS);intent.setData(Uri.parse("package:" + activity.getPackageName()));activity.startActivityForResult(intent, 1);}).start();return false;} else {// 有系统设置权限 -> 打开手机屏幕方向自动旋转（参数备注：1为开，0为关）Settings.System.putInt(activity.getContentResolver(), Settings.System.ACCELEROMETER_ROTATION, 1);return true;}
}

ios原生

NSDictionary *dict = call.arguments;
bool screenLandscape = [dict[@"screenLandscape"] boolValue];
UIInterfaceOrientation val = screenLandscape ? UIInterfaceOrientationLandscapeLeft : UIInterfaceOrientationPortrait;
[weakSelf ll_interfaceOrientation:val];
result([JYJUtils dictionaryToJson:@{}]);

3、横竖屏适配

横竖屏适配在flutter端实现，我这里只需要横屏，因此检测到竖屏会再次调用切换横屏

OrientationBuilder(builder: (context, orientation) {if (orientation == Orientation.portrait) {return PortraitPage();} else {return LandscapePage();}},
)// 竖屏
PortraitPage() {AppUtil().setScreenLandscape(true);return Column(mainAxisSize: MainAxisSize.max,children: [CustomBar(title: _titleString(longTitle: true),),Expanded(child: Center(child: Text('请旋转横屏使用'),),),],);
}// 横屏
LandscapePage() {final double statusBarHeight =Platform.isIOS ? 35 : MediaQuery.of(context).padding.top;return Container(margin: EdgeInsets.only(top: statusBarHeight, left: 30, right: 30),);
}

4、flutter 横屏android没有铺满

解决办法
打开项目下android/app/src/main/res/values/styles.xml

添加

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

<?xml version="1.0" encoding="utf-8"?>
<resources><style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar"><item name="android:windowBackground">@drawable/launch_background</item></style><style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar"><item name="android:windowBackground">?android:colorBackground</item><item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item></style>
</resources>LaunchTheme下为启动页配置，NormalTheme下为普通页面配置