如何避免在 Flutter 分屏模式下调整大小？答案

【问题标题】：How to avoid resizing on the split screen mode in Flutter?如何避免在 Flutter 分屏模式下调整大小？
【发布时间】：2020-08-20 07:06:31
【问题描述】：

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

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

在全屏模式下没问题：

有什么办法可以解决。

我的代码：

main.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;

}

【问题讨论】：

标签： android ios flutter web dart

【解决方案1】：

解决方案是偶然出现的，我不知道为什么，但它确实有效。我用 ScreenUtil().setWidth 替换了 ScreenUtil().setHeight 来表示 HEIGHT，这真的很奇怪，但效果很好。

【讨论】：

但是你怎么知道什么时候做呢？