在 Flutter 中根据屏幕大小重新排列 UI 元素

Posted 2023-02-24

【中文标题】在 Flutter 中根据屏幕大小重新排列 UI 元素

【英文标题】：Rearranging UI elements according to screen size in Flutter

【发布时间】：2020-06-27 14:41:12

【问题描述】：

我查看了 Flutter Interactive 19 主题演讲视频，其中提到了一项即将推出的功能，可根据屏幕大小调整和重新排列 UI。在这个视频中，17:30 分钟。

https://youtu.be/NfNdXgJZfFo

6 个月前它还处于“非常早期的阶段”。有人知道它是否已经发布了吗？我相信不是 LayoutBuilder 或 MediaQuery.of()，因为它们在视频主题演讲之前可用。

我知道还有其他开发人员提供的其他软件包，但我对来自 Google 的软件包感兴趣。

【参考方案1】：

我在稳定通道的项目中使用MediaQuery.of(context).size; 来根据宽度更改布局。它对我有用，没有问题。我写了一个区分大屏幕（平板电脑）和小屏幕（智能手机）的小部件。

class ScreenWidthBuilder extends StatelessWidget 
  final Widget Function(BuildContext context, bool isAWideScreen)  builder;
  final int bigScreenUpFrom;

  const ScreenWidthBuilder(Key key, @required this.builder, this.bigScreenUpFrom = 600) : super(key: key);

  @override
  Widget build(BuildContext context) 
    Size screenSize = MediaQuery.of(context).size;
    // screenSize.width changes depending on screen orientation
    bool isAWideScreen = screenSize.width >= this.bigScreenUpFrom;
    return this.builder(context, isAWideScreen);
  

首先我尝试使用LayoutBuilder 小部件，但我能够使用MediaQuery.of(context).size; 获得更好的结果。使用 MediaQuery，您可以请求有关设备屏幕的许多数据（大小、textScaleFactor、方向等）。

欲了解更多信息，请查看：

LayoutBuilder 的文档 从MediaQuery.of(context) 返回的MediaQuery 和MediaQueryData 的文档。