代码之家 › 专栏 › 技术社区 › FCR

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

flutter-layout dart web flutter

FCR · 技术社区 · 6 年前

我查看了flutter interact 19主题演讲视频,其中提到了一个即将推出的功能,即根据屏幕大小调整和重新排列用户界面。这是在这段视频中,第17:30分钟。

https://youtu.be/NfNdXgJZfFo

6个月前,它还处于“非常早期的阶段”,有人知道它是否已经推出了吗?我认为这不是LayoutBuilder或MediaQuery.of(),因为它们在视频主题演讲之前就已经存在了。

我知道其他开发人员也有其他软件包,但我对谷歌的软件包感兴趣。

0 回复 | 直到 6 年前

-1

josxha 6 年前

我正在使用 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,您可以请求有关设备屏幕的许多数据(大小、文本ScaleFactor、方向等)。

有关更多信息,请查看: