Flutter: จะป้องกันการเปลี่ยนแนวอุปกรณ์และบังคับแนวตั้งได้อย่างไร?

ฉันต้องการป้องกันไม่ให้แอปพลิเคชันของฉันเปลี่ยนการวางแนวและบังคับให้เค้าโครงติดกับ "แนวตั้ง"

ใน main.dart ฉันใส่:

void main(){
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown
  ]);
  runApp(new MyApp());
}

แต่เมื่อฉันใช้ปุ่มหมุนของ Android Simulator เค้าโครง "ตาม" การวางแนวอุปกรณ์ใหม่ ...

ฉันจะแก้ปัญหานี้ได้อย่างไร

ขอบคุณ

นำเข้าpackage:flutter/services.dartแล้ว

ใส่SystemChrome.setPreferredOrientationsภายในWidget build()วิธี

ตัวอย่าง:

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
      ]);
      return new MaterialApp(...);
    }
  }

อัปเดต

โซลูชันนี้อาจใช้ไม่ได้กับอุปกรณ์ IOS บางรุ่นตามที่ระบุไว้ในเอกสาร Flutter ที่อัปเดตเมื่อ ต.ค. 2019

พวกเขาแนะนำให้แก้ไขการวางแนวโดยตั้งค่า UISupportedInterfaceOrientations ใน Info.plist เช่นนี้

<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>

สำหรับข้อมูลเพิ่มเติมhttps://github.com/flutter/flutter/issues/27235#issuecomment-508995063

@boeledi หากคุณต้องการ "ล็อก" การวางแนวอุปกรณ์และไม่อนุญาตให้เปลี่ยนเมื่อผู้ใช้หมุนโทรศัพท์คุณสามารถตั้งค่าได้ง่ายๆดังนี้

// This did not work as requirement
void main() {
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
  runApp(new MyApp());
}

คุณต้องรอจนกว่าsetPreferredOrientationsจะเสร็จสิ้นจากนั้นจึงเริ่มแอพ

// This will works always for lock screen Orientation.
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
    .then((_) {
      runApp(new MyApp());
    });
}

iOS:

การโทรใช้SystemChrome.setPreferredOrientations()ไม่ได้สำหรับฉันและฉันต้องเปลี่ยนDevice Orientationในโครงการ Xcodeดังต่อไปนี้:

Android:

ตั้งค่าscreenOrientationแอตทริบิวต์เป็นportraitสำหรับกิจกรรมหลักในไฟล์android/app/src/main/AndroidManifest.xmlดังต่อไปนี้:

เมธอด 'setPreferredOrientations' ส่งคืนวัตถุในอนาคต ตามเอกสารประกอบอนาคตแสดงถึงคุณค่าบางอย่างที่จะมีให้ในอนาคต นั่นเป็นเหตุผลที่คุณต้องรอจนกว่าจะพร้อมใช้งานแล้วจึงดำเนินการต่อด้วยแอปพลิเคชัน ดังนั้นจะมีการใช้เมธอด 'แล้ว' ซึ่งตามคำจำกัดความ "ลงทะเบียนการเรียกกลับที่จะเรียกเมื่ออนาคตเสร็จสมบูรณ์" ดังนั้นคุณจะต้องใช้รหัสนี้:

  void main() {
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]).then((_) {
      runApp(new App());
    });
   }

นอกจากนี้ต้องนำเข้าไฟล์ต่อไปนี้:

'package: flutter / services.dart'

เปิด android / app / src / main / AndroidManifest.xml และเพิ่มบรรทัดต่อไปนี้ใน MainActivity:

android:screenOrientation="portrait"

หากคุณมีสิ่งนี้:

<activity
        android:name=".MainActivity"
        android:launchMode="singleTop"
        android:theme="@style/LaunchTheme"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
        android:hardwareAccelerated="true"
        android:windowSoftInputMode="adjustResize">

คุณควรลงเอยด้วยสิ่งนี้:

<activity
        android:name=".MainActivity"
        android:launchMode="singleTop"
        android:theme="@style/LaunchTheme"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
        android:hardwareAccelerated="true"
        android:screenOrientation="portrait"
        android:windowSoftInputMode="adjustResize">

สิ่งนี้ใช้ได้กับ Android ใน iOS คุณจะต้องเปลี่ยนสิ่งนี้จากหน้า Xcode: https://i.stack.imgur.com/hswoe.png (ตามที่ Hejazi กล่าว)

ใส่ WidgetsFlutterBinding.ensureInitialized () มิฉะนั้นคุณจะได้รับข้อผิดพลาดขณะสร้าง

import 'package:flutter/services.dart';

    void main() async => {
          WidgetsFlutterBinding.ensureInitialized(),

          await SystemChrome.setPreferredOrientations(
              [DeviceOrientation.portraitUp]), // To turn off landscape mode

          runApp(MainApp())
        };

ก่อนอื่นให้นำเข้าสิ่งนี้ในไฟล์main.dart

import 'package:flutter/services.dart';

จากนั้นอย่าคัดลอกวางแต่ให้ดู (จำ) และเขียนโค้ดด้านล่างในmain.dartไฟล์

วิธีบังคับในโหมดแนวตั้ง :

void main() {
  SystemChrome.setPreferredOrientations(
      [DeviceOrientation.portraitUp,DeviceOrientation.portraitDown])
      .then((_) => runApp(MyApp()),
  );

วิธีบังคับในโหมดแนวนอน :

   void main() {
      SystemChrome.setPreferredOrientations(
          [DeviceOrientation.landscapeLeft,DeviceOrientation.landscapeRight])
          .then((_) => runApp(MyApp()),
      );

setPreferredOrientationส่งคืน a Future<void>ดังนั้นจึงเป็นแบบอะซิงโครนัส แนวทางที่อ่านง่ายที่สุดคือการกำหนดmainแบบอะซิงโครนัส:

Future<void> main() async {
  await SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
  return runApp(new MyApp());
}

เพียงเพิ่มโค้ดบรรทัดต่อไปนี้ในไฟล์ main.dart

SystemChrome.setPreferredOrientations([
  DeviceOrientation.portraitUp,
]);

และอย่าลืมนำเข้าไฟล์ services.dart ตัวอย่างได้รับด้านล่าง!

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
    runApp(MyApp());
}


class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {

      SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
      ]);

      return MaterialApp(
        home: Scaffold(
          body: Center(child: Text("A Flutter Example!")),
     ),
   );
  }
}

ด้านล่างนี้คือตัวอย่างอย่างเป็นทางการของทีม Flutter https://github.com/flutter/samples/blob/master/veggieseasons/lib/main.dart

import 'package:flutter/services.dart' show DeviceOrientation, SystemChrome;

void main() {
    WidgetsFlutterBinding.ensureInitialized();
    SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
    ]);
    runApp(HomeScreen());
}

สำหรับเวอร์ชันใหม่ของการกระพือปีกพร้อมกับการตั้งค่าpreferred Orientationเราจำเป็นต้องเพิ่มบรรทัดพิเศษหนึ่งบรรทัดเช่น

 WidgetsFlutterBinding.ensureInitialized();

รหัสการทำงานสำหรับสิ่งนี้คือ -

import 'package:flutter/services.dart';
    void main() {
          WidgetsFlutterBinding.ensureInitialized();
          SystemChrome.setPreferredOrientations([
            DeviceOrientation.portraitUp,
            DeviceOrientation.portraitDown
          ]);
          runApp(MyApp());
        }

นำเข้า 'package: flutter / services.dart';

จากนั้นคุณรวมบรรทัดของโค้ดด้านล่างในไฟล์ main.dart ของคุณและในวิธีการหลักของคุณดังนี้:

WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitDown,
    DeviceOrientation.portraitUp,
  ]);

runApp(myApp());

สำหรับคนที่พวกเขากำลังอ่านคำถามนี้ในขณะนี้ วิธีที่ง่ายที่สุดที่ฉันพบและใช้ได้กับทั้งอุปกรณ์ Android และ ios

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

ลอง

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

คุณยังสามารถเปลี่ยนการตั้งค่าการวางแนวหน้าจอในไฟล์ manifest ของ android และ ios info.plist

หากคุณกำลังแก้ไขสิ่งนี้จากอินเทอร์เฟซ xcode จะไม่มีการเปลี่ยนแปลงสำหรับ ipad สำหรับส่วนของ ipad คุณต้องแก้ไขไฟล์ info.plist จาก android studio คุณจะเห็นในรายการอาร์เรย์เช่น "~ ipad" มีสองส่วนใน info.plist คุณต้องแก้ไขด้วยตนเองสำหรับทั้ง iphone และ ipad

โซลูชันนี้ได้ผลสำหรับฉันในสองโครงการที่แตกต่างกันสำหรับ Android ไม่สามารถรับประกันได้ว่าจะใช้งานได้กับ iOS ด้วย ฉันได้อ่านคำตอบก่อนหน้านี้ทั้งหมดแล้วและฉันคิดว่าทางออกที่ดีที่สุดและง่ายที่สุดคือทำดังนี้:

Android:

ด้วยวิธีนี้คุณจะหลีกเลี่ยง "รอ" "async" และ "จากนั้น" ทั้งหมดที่อาจยุ่งเกี่ยวกับรหัสของคุณ

/// this is in main.dart

main(){
  WidgetsFlutterBinding.ensureInitialized();

  runApp(
    MaterialApp(
      initialRoute: '/root',
      routes: {
        '/root': (context) => MyApp(),
      },
      title: "Your App Title",
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /// ENFORCE DEVICE ORIENTATION PORTRAIT ONLY
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown
    ]);

    /// RUN THE APP
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

iOS:

ฉันคิดว่าการอัปเดตคำตอบนี้เป็นทางออกที่ดีที่สุดสำหรับ iOS

!! การปฏิเสธความรับผิด !! ฉันได้ทำการวิจัยเล็กน้อยและเห็นได้ชัดว่าเอกสารที่นี่ระบุว่า:

setPreferredOrientations method Limitations:

"This setting will only be respected on iPad if multitasking is disabled."

นี่คือวิธีปิดใช้งานมัลติทาสก์ (AKA เปิดตัวเลือก "ต้องใช้เต็มหน้าจอ") จาก XCode

การแก้ไขที่เป็นไปได้อื่นสำหรับ iOS

คุณอาจลองใช้อันนี้ก็ได้ ฉันยังไม่ได้ลองใช้เป็นการส่วนตัวเนื่องจากฉันไม่มี iPad หรือ XCode บนพีซีของฉัน แต่มันก็คุ้มค่าที่จะยิง

ทางออกที่ดีที่สุดคือใช้ในวิธีการสร้างของ MyApp ()