1.问题描述

在某个页面中使用flutter提供的方式来强制某个页面横屏:

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

很遗憾!在Android上表现完美,但是在iOS中不能自动横屏,需要手动旋转手机。
万幸!pub上有这样一个package,可以完美解决:

orientation

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("取消"),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐