Flutter：更快地使用 MediaQuery答案

【问题标题】：Flutter: faster way to use MediaQueryFlutter：更快地使用 MediaQuery
【发布时间】：2021-07-07 11:30:18
【问题描述】：

我想知道有什么快捷方式可以用于 MediaQuery。

例如，当我想要屏幕宽度时，我确实喜欢

final width = MediaQuery.of(context).size.width;

现在我每次都必须将所需宽度除以屏幕宽度，例如100/375 =0.266，然后执行此操作width * 0.266

有什么捷径可以避免dividing 部分，这样我就可以编写所需的像素，它会自动计算所有内容？

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

有一个你可以使用的颤振包，它以百分比有效地划分屏幕。包名是sizer。在这个包中，您有一些预定义的参数，例如：

.h - (double) 小部件高度
.w - (double) 小部件宽度
.sp - (double) 字体大小

无论你定义一个小部件的大小，它都会占它的一个百分比，例如：

Container(
  height: 20.0.h,  //It will take a 20% of screen height
  width: 40.0.w    //It will take a 40% of screen width
)

【讨论】：

但是如果我想要5/375，我不需要记住5/375 的百分比，因为在设计中我们得到的是像素而不是百分比

【解决方案2】：

您可以使用FractionallySizedBox 小部件使您的子小部件占用一小部分可用空间。

FractionallySizedBox(
  widthFactor: 0.5,
  heightFactor: 0.4
  child:  RaisedButton(
    child: Text('Click'),
    color: Colors.green,
    textColor: Colors.white,
    onPressed: () {
    },
  ),
),

【讨论】：

【解决方案3】：

final width = MediaQuery.of(context).size.width;
double calculated (int pixels) {
return width * pixels/375;
}

//in your code:

Container ( width: calculated (100),
                    child: Text('hi')
                   )

【讨论】：