如何获得响应式 Flutter 布局？

Question

创建响应式布局的最佳实践是什么？我知道你可以使用媒体查询来获取尺寸信息来决定做什么；例如桌面、平板电脑、手机的不同屏幕。

但是，使用Expanded或Flex属性来确保小部件增长或填充适当的屏幕尺寸是一种常见的做法吗？作为一个新的 Flutter 开发人员，试图了解如何在典型用例中取得平衡。

Answer 1

有多种方法可以使您的 UI 在 Flutter 中具有响应性，但仅举几条经验法则，它们通常可以完成工作：

媒体查询

您可以设置一些小部件height或width基于屏幕的一部分，例如，创建一个SizedBox将垂直和水平填充 50% 的屏幕：

SizedBox(
  height: MediaQuery.of(context).size.height * 0.5,
  width: MediaQuery.of(context).size.width * 0.5,
)

您可能会对其他属性感兴趣，MediaQuery例如padding从安全区域视口等。您还可以在此处找到一篇关于它的好文章。

布局生成器

构建布局时最有趣的小部件之一。它将为您提供父约束，以便您可以使用它来动态调整您的 UI。

例如，这将使您的孩子 ( SizedBox) 小部件采用父母的maxWidth.

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints){
   return SizedBox(
              width: constraints.maxWidth
          );
     }
)

一些有趣的文章LayoutBuilder可以在这里找到。

柔性

通过使用和Flex等小部件。当在 a or 中使用时，它们将根据它们施加的约束以及对齐方式/大小进行动态调整，它们非常强大，足以使您的 UI 具有响应性。ExpandedFlexibleRowColumnColumnRow

例如，您可以Container在一个Row中使用两个s，其中一个使用 1/4 的视图，另一个使用 3/4 的可用空间。

Row(
  children: <Widget>[
         Expanded(
           flex: 1,
           child: Container(),
         ),
         Expanded(
           flex: 3,
           child: Container(),
         ),
      ]
)

关于它的另一篇很棒的文章可以在这里找到。

平台

此外，您始终可以使用Platform类 getter查找底层平台以做出一些决定。

import 'dart:io';

if(Platform.isAndroid) {
   print('Running on Android');
}

TL;DR：有很多选项可以一起玩，您应该始终为每个场景寻找最佳方法。

Answer 2

在响应式 UI 中，我们不使用尺寸和位置的硬编码值。使用 Sizer插件获取窗口的实时大小。

任何屏幕尺寸设备和平板电脑中的响应式用户界面。检查它这个插件？
https://pub.dev/packages/sizer

.h  - for widget height
.w  - for widget width
.sp - for font size

使用.h，.w，.sp像这样的值之后？

例子：

Container(
  height: 10.0.h,  //10% of screen height
  width: 80.0.w,   //80% of screen width
  child: Text('Sizer', style: TextStyle(fontSize: 12.0.sp)),
);

我用这个插件构建了许多响应式 UI。