Skip to content

[Flutter] 控制螢幕維持垂直或是水平的方法

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

Read More

Tags:

Leave a Reply