android - 如何避免在 Flutter 的分屏模式下调整大小？

Question

在尝试开发响应式应用程序时，我遇到了应用程序在分屏模式下调整其组件大小时的问题。正如我检查的那样，这是由于上下文和窗口在切换到分屏模式时也改变了它们的值引起的。

它的外观(我的应用程序在下面)，当我使用 MediaQuery.of(context).height 时，标题通过调整大小而扭曲:

在全屏模式下没问题:

有什么办法可以解决吗

我的代码:

主 Dart :

import 'dart:ui';

import 'package:flutter/material.dart';
import 'screens/home.dart';
import 'package:flutter/services.dart';
import './sizing/Sizing.dart';

class Orient extends StatelessWidget{
    @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
       statusBarColor: Color.fromRGBO(9, 168, 48, 1), //or set color with: Color(0xFF0000FF)
    ));
    // TODO: implement build
    return MaterialApp(
        title: 'Orient tm',
        home: SafeArea(child: Home(dimensions: Sizing(),)),
    );
  } 
}

void main()=>runApp(Orient());

P.S 我试图在静态模式下获取窗口大小的值，而不是使用上下文。当应用程序是分屏模式下的第一个主要应用程序时，它部分工作，但当它显示为第二个应用程序时(见第一张图片)。

home.dart:

import 'dart:ui';

import 'package:flutter/material.dart';
import '../sizing/Sizing.dart';

class Home extends StatelessWidget{
  final Sizing dimensions;
  Home({this.dimensions});

  List<Widget> _nav() =>  <Widget>[
      Expanded(
        flex: 2,
        child: Icon(Icons.menu),
      ),
       Expanded(
         flex: 8,
         child: Padding(
            padding: EdgeInsets.symmetric(vertical: dimensions.height*0.01), 
            // child: Container(child: Image.asset('assets/images/orient1.png'),),
           )
      ),
      Expanded(
        flex: 2,
        child: Icon(Icons.search),
      ),
  ]; 


  Container _header(context) => 
      Container(
          child: Center( 
            child: Row(
              children: _nav(),
            )
          ),
          decoration: BoxDecoration(
            color: Color.fromRGBO(9, 168, 48, 1),
            borderRadius: BorderRadius.vertical(
                bottom: Radius.elliptical(
                    dimensions.width, dimensions.width*(7/75))),
          ),
  );

    @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return (
      Scaffold(
        extendBodyBehindAppBar: true,
         appBar: PreferredSize(
           preferredSize: Size.fromHeight(dimensions.height*0.07),
           child: _header(context),
         ),
         body: Container(
           decoration: BoxDecoration(
             color: Colors.white
           ),
         ),
      )
    );
  }
}

sizing .dart:

import 'dart:ui';

import 'package:flutter/material.dart';

var size = MediaQueryData.fromWindow(window).size;

class Sizing{

    final double height;
    final double width;

    Sizing(): height = size.height, width = size.width;

}

Answer 1

这个解决方案是我偶然想到的，我不知道为什么但它有效。我将 ScreenUtil().setHeight 替换为 ScreenUtil().setWidth 以获得 HEIGHT，这确实很奇怪，但效果很好。