Flutter强制某个页面横屏
【摘要】 １.问题描述
在某个页面中使用flutter提供的方式来强制某个页面横屏:
SystemChrome.setPreferredOrientations([ DeviceOrientation.portraitUp, DeviceOrientation.portraitDown
]);
1234
很遗憾！在Android上表现完美，但是在iOS中不能自动横屏，需...
１.问题描述
在某个页面中使用flutter提供的方式来强制某个页面横屏:
SystemChrome.setPreferredOrientations([ DeviceOrientation.portraitUp, DeviceOrientation.portraitDown
]);
很遗憾！在Android上表现完美，但是在iOS中不能自动横屏，需要手动旋转手机。
万幸！pub上有这样一个package，可以完美解决：
２.使用orientation
２.1.在pubspec.yaml 中添加如下依赖：
dependencies:
orientation: ^1.2.0
２.2.使用flutter命令安装依赖：
切换到项目的根目录下执行如下命令。
$ flutter pub get
２.3.在dart文件中引用：
import 'package:orientation/orientation.dart';
２.4.完整demo：
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:orientation/orientation.dart';
import 'package:flutter/services.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
OrientationPlugin.setPreferredOrientations(DeviceOrientation.values);
OrientationPlugin.setEnabledSystemUIOverlays(SystemUiOverlay.values);
runApp(MaterialApp(home: MyApp()));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
DeviceOrientation _deviceOrientation;
StreamSubscription<DeviceOrientation> subscription; @override
void initState() { super.initState(); subscription = OrientationPlugin.onOrientationChange.listen((value) { // If the widget was removed from the tree while the asynchronous platform // message was in flight, we want to discard the reply rather than calling // setState to update our non-existent appearance. if (!mounted) return; setState(() { _deviceOrientation = value; }); OrientationPlugin.forceOrientation(value); });
} @override
void dispose() { _dispose(); super.dispose();
} // https://github.com/flutter/flutter/issues/28134
void _dispose() { subscription?.cancel();
} @override
Widget build(BuildContext context) { return WillPopScope( onWillPop: () { _dispose(); return Future.value(true); }, child: Scaffold( appBar: AppBar( title: const Text('Orientation Example'), ), body: Center( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Text( 'Running on: ${_deviceOrientation ?? 'Unknown Orientation'}\n'), RaisedButton( child: Text('FullScreen'), onPressed: () { OrientationPlugin.setEnabledSystemUIOverlays([]); }), RaisedButton( child: Text('NormalScreen'), onPressed: () { OrientationPlugin.setEnabledSystemUIOverlays( SystemUiOverlay.values); }), Spacer(), Padding( padding: const EdgeInsets.all(8.0), child: Text( 'Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.'), ), ], ), ), ), );
}
}
３.页面强制横屏
import 'package:flutter/material.dart';
import 'package:orientation/orientation.dart';
import 'package:flutter/services.dart';
class SignPage extends StatefulWidget {
@override
_SignPageState createState() => _SignPageState();
}
class _SignPageState extends State<SignPage> {
@override
void initState() { super.initState(); // 直接强制横屏 OrientationPlugin.forceOrientation(DeviceOrientation.landscapeRight);
} @override
Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('签名'), ), body: Column( children: <Widget>[ Expanded( child: Container( color: Colors.blue, ), ), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ RaisedButton( onPressed: () {}, child: Text("确定"), ), RaisedButton( onPressed: () {}, child: Text("重写"), ), RaisedButton( onPressed: () {}, child: Text("撤销"), ), RaisedButton( onPressed: () {}, child: Text("取消"), ), ], ), ], ), );
}
}
文章来源: blog.csdn.net，作者：WongKyunban，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/weixin_40763897/article/details/108618882
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）