如何让 Flutter 小部件适应不同的屏幕尺寸

Posted 2023-02-23

【中文标题】如何让 Flutter 小部件适应不同的屏幕尺寸

【英文标题】：How to make flutter widgets adaptive to different screen sizes

【发布时间】：2019-07-12 09:00:33

【问题描述】：

我正在使用 Container 的宽度和高度参数来确定小部件的大小。但如果在其他设备上测试，小部件不自适应。我来自原生 android，我曾经使用适应任何屏幕尺寸的密度无关像素（dp）。 flutter 中的 dp 等价于什么？ 我不想每次都使用 MediaQuery 来计算屏幕宽度和高度。

【问题讨论】：

一些示例代码会有所帮助，也许您的代码有问题。

好吧，任何示例代码都可以工作。只需使用容器并设置宽度和高度并在不同的屏幕尺寸上进行测试

【参考方案1】：

您可以通过这种方式设置 UI 小部件的大小：

 width: 100.0 * MediaQuery.of(context).devicPixelRatio ,

MediaQuery.of(context).devicPixelRatio 函数将返回每个逻辑像素中的实际像素数，因此您可以确保测试设备上相同的 100.0 像素对于用户来说是典型的，无论他们的屏幕密度如何。

【讨论】：

如果我想将小部件的高度和宽度分别设置为 100 、 50 。我应该如何使用您的解决方案来做到这一点

高度：100.0 * MediaQuery.of(context).devicPixelRatio ，宽度：50.0 * MediaQuery.of(context).devicPixelRatio ，

实际上这不是一个非常可靠的解决方案，因为设备每个逻辑像素可能有很多像素，而且空间可能太大。

感谢@OmarBoshra 的反馈！我会检查并返回给你。

【参考方案2】：

您可以使用 SizeBox.expand 小部件让您的小部件扩展以占用可用空间，而不管大小documentation

SizedBox.expand(

  child:MyButton(),
),

如果您想保持纵横比不受屏幕尺寸的影响，您可以使用 AspectRatio 小部件documentation

AspectRatio(

 aspectRatio: 3/2,

  child:MyButton(),
),

如果您的小部件只是在一行或一列中，并且您想在它们之间添加权重以填充空间，您可以使用扩展小部件

  Expanded(
            flex: 1,//weight for the widget
            child: Container(
              color: Colors.amber,
              height: 100,
            ),
          )

,

【参考方案3】：

我是这样申请的：

 class SizeConfig 
          static MediaQueryData _mediaQueryData;
          static double screenWidth;
          static double screenHeight;
          static double blockSizeHorizontal;
          static double blockSizeVertical;

          void init(BuildContext context) 
           _mediaQueryData = MediaQuery.of(context);
           screenWidth = _mediaQueryData.size.width;
           screenHeight = _mediaQueryData.size.height;
           blockSizeHorizontal = screenWidth / 100;
           blockSizeVertical = screenHeight / 100;
          
          

  class HomeScreen extends StatelessWidget   @override  Widget
 build(BuildContext context)   SizeConfig().init(context);  …   
     @override
     Widget build(BuildContext context) 
      return Center(
       child: Container(
        height: SizeConfig.blockSizeVertical * 20,
        width: SizeConfig.blockSizeHorizontal * 50,
        color: Colors.orange,
       ),
      );
     

https://medium.com/flutter-community/flutter-effectively-scale-ui-according-to-different-screen-sizes-2cb7c115ea0a