- 如何获得响应式Flutter布局？

Question

创建响应式布局的最佳实践是什么？例如桌面，平板电脑，电话的不同屏幕。

Answer 1

在Flutter中，有多种方法可以让你的UI响应，但只需命名一些经验规则，这些规则将主要完成以下任务：

媒体查询

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

SizedBox(


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


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


)

在MediaQuery中还有其他一些属性，比如safe area视口中的padding等，

布局生成器

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

LayoutBuilder(


 builder: (BuildContext context, BoxConstraints constraints){


 return SizedBox(


 width: constraints.maxWidth


 );}


)

使用Flex小部件，例如Expanded和Flexible，当在Row或Column中使用时，根据强加的约束和Column和Row的大小调整。

Row(


 children: <Widget>[


 Expanded(


 flex: 1,


 child: Container(),


 ),


 Expanded(


 flex: 3,


 child: Container(),


 ),


 ]


)

Answer 2

我认为使用此命令获得屏幕大小更好，

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


double height = MediaQuery.of(context).size.height;

还有一个叫做size_configure的包，可以帮助你使Flutter应用程序响应，

• 使用textSizeMultiplier设置文本大小
• 使用imageSizeMultiplier设置图像大小
• 使用heightMultiplier设置高度大小
• 使用weightMultiplier设置权重大小
  例如：如果要将文本大小设置为28除28到7.9 (因为这是文字，所以我们用'垂直块大小乘以textSize ')