1、Flutter设置横屏
// 强制横屏
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight
]);
// 强制竖屏
SystemChrome.setPreferredOrientations(
[DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
另外建议
1、把所有横竖屏调用封装到一个方法中,便于维护
2、开启放super后面,关闭放super前面
void initState() {
super.initState();
AppUtil().setScreenLandscape(true);
}
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下为普通页面配置