Flutter筆記 - 螢幕顯示方向 Screen View Orientation

更新 發佈閱讀 3 分鐘

今天來寫點FLutter的筆記吧

如果我們想要在APP中限制使用者的畫面顯示方向,不支持使用者橫放造成畫面佈局異常,或是想要在全螢幕顯示強制變橫向顯示,該怎麼做呢?


其實很簡單

import 'package:flutter/services.dart';

再來只需要在需要的Widget中呼叫SystemChrome.setPreferredOrientations來限制許可的方向。

四個方向的參數分別為

  • 右傾 DeviceOrientation.landscapeRight
  • 左傾 DeviceOrientation.landscapeLeft
  • 直立 DeviceOrientation.portraitUp
  • 倒立 DeviceOrientation.portraitDown


下面範例為某個Widget產生後開始限制只能橫向顯示,離開後恢復全方向顯示。

import 'package:flutter/services.dart';

@override
void initState() {
super.initState();

SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
]);
}

@override
void dispose() {
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
super.dispose();
}


如果需要一進入APP就全局限制,可以加在Main()中,如下列範例允許上下直立顯示,不允許左右橫向顯示。

import 'package:flutter/services.dart';

void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown
]).then((_) {
runApp(const MyApp());
});
}

上面全局限制範例中很重要很重要很重要的一點是要在呼叫設定前加上WidgetsFlutterBinding.ensureInitialized()

確保Flutter已經先初始化完成,否則一啟動就會crash囉!


以上就是APP中螢幕顯示方向限制的方法,聰明的你學會了嗎?




留言
avatar-img
Amos的沙龍
5會員
7內容數
Amos的沙龍的其他內容
2022/11/12
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們來探討第三種必要功能:OAuth登入。
Thumbnail
2022/11/12
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們來探討第三種必要功能:OAuth登入。
Thumbnail
2022/09/09
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們來探討第二種必要功能:APP跳轉,透過一組文字連結能夠點選開啟APP並跳轉到正確功能頁面。
Thumbnail
2022/09/09
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們來探討第二種必要功能:APP跳轉,透過一組文字連結能夠點選開啟APP並跳轉到正確功能頁面。
Thumbnail
2022/08/17
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們先來探討其中重要的一項:推播〔Push Notification。
Thumbnail
2022/08/17
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們先來探討其中重要的一項:推播〔Push Notification。
Thumbnail
看更多
你可能也想看
Thumbnail
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
Thumbnail
本文介紹瞭如何在SwiftUI中調整元件的對齊方式,包括置中、向左/向右/向上/向下對齊的方法。透過調整HStack、VStack以及frame的maxWidth、maxHeight和alignment屬性,可以達到想要的對齊效果。
Thumbnail
本文介紹瞭如何在SwiftUI中調整元件的對齊方式,包括置中、向左/向右/向上/向下對齊的方法。透過調整HStack、VStack以及frame的maxWidth、maxHeight和alignment屬性,可以達到想要的對齊效果。
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
GestureDetector onTap、onDoubleTap和onLongPress class _GestureTestState extends State<GestureTest> { String _operation = "No detected!"; //事件名稱 @o
Thumbnail
GestureDetector onTap、onDoubleTap和onLongPress class _GestureTestState extends State<GestureTest> { String _operation = "No detected!"; //事件名稱 @o
Thumbnail
新增video_player 在pubspec.yaml中加入video_player。 設置權限 Android 在AndroidManifest.xml檔案中的<application>裡,加入下列代碼。 <uses-permission android:name="androi
Thumbnail
新增video_player 在pubspec.yaml中加入video_player。 設置權限 Android 在AndroidManifest.xml檔案中的<application>裡,加入下列代碼。 <uses-permission android:name="androi
Thumbnail
Container child:可以設定一個子元件 Container(child:Text('child')); color:背景顏色 Container(color: Color.fromARGB(255, 255, 255, 255)); alignment:對齊方式 Co
Thumbnail
Container child:可以設定一個子元件 Container(child:Text('child')); color:背景顏色 Container(color: Color.fromARGB(255, 255, 255, 255)); alignment:對齊方式 Co
Thumbnail
說明Flutter 骨架(skeleton)專案範例的架構與在各平台執行的顯示畫面
Thumbnail
說明Flutter 骨架(skeleton)專案範例的架構與在各平台執行的顯示畫面
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News