Last Updated on 2021-10-18 by Clay
在開發 App 的過程中，我們可能因為需求不同，而希望能讓使用者的裝置螢幕能維持著『垂直』或是『水平』的螢幕方向（orientation）；或者，是能在 App 切換不同功能時自動轉向。
當然，這些操作我們都能在 Flutter 中實現。以下我就簡單記錄該如何操控螢幕的方向。
初始設置 & 按鈕設置
我們可以在 App 啟動階段就設定好允許的螢幕旋轉方向（也被用來設定只允許垂直或水平的佈局），當然，也可以透過按鈕設定成只允許特定的方向。
以下是個簡單的範例：
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
// Main
void main() {
SystemChrome.setPreferredOrientations([
// Orientations
// DeviceOrientation.landscapeLeft,
// DeviceOrientation.landscapeRight,
DeviceOrientation.portraitDown,
DeviceOrientation.portraitUp,
]);
runApp(MyApp());
}
// MyApp
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
// HomePage
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
// _HomePageState
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 200,
height: 100,
color: Colors.red,
),
RaisedButton(
child: Text("Portrait"),
onPressed: () {
setState(() {
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeLeft,
]);
});
})
],
);
}
}
Output:
單頁改變
若是只設定單頁，請在頁面的 initState() 和 dispose() 中設定初始方向與改變方向。
@override
void initState() {
super.initState();
// Init
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
]);
}
@override
void dispose() {
// Change
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
super.dispose();
}References
- https://mightytechno.com/screen-orientation-in-flutter/
- https://wst24365888.github.io/flutter-orientation/