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

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

时间: 作者:

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

媒体查询

你可以基于屏幕的一部分设置一些小部件heightwidth,例如创建一个水平填充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小部件,例如ExpandedFlexible,当在Row或Column中使用时,根据强加的约束和Column和Row的大小调整。


Row(


 children: <Widget>[


 Expanded(


 flex: 1,


 child: Container(),


 ),


 Expanded(


 flex: 3,


 child: Container(),


 ),


 ]


)



作者:

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


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 ')

作者:
...