Flutter强制某个页面横屏
1.问题描述在某个页面中使用flutter提供的方式来强制某个页面横屏:SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp,DeviceOrientation.portraitDown]);很遗憾!在Android上表现完美,但是在iOS中不能自动横屏,需要手动旋转手机。万幸!pub上有这样一个package,可以
·
1.问题描述
在某个页面中使用flutter提供的方式来强制某个页面横屏:
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown
]);
很遗憾!在Android上表现完美,但是在iOS中不能自动横屏,需要手动旋转手机。
万幸!pub上有这样一个package,可以完美解决:
2.使用orientation
2.1.在pubspec.yaml 中添加如下依赖:
dependencies:
orientation: ^1.2.0
2.2.使用flutter命令安装依赖:
切换到项目的根目录下执行如下命令。
$ flutter pub get
2.3.在dart文件中引用:
import 'package:orientation/orientation.dart';
2.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.'),
),
],
),
),
),
);
}
}
3.页面强制横屏
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("取消"),
),
],
),
],
),
);
}
}
更多推荐


所有评论(0)