创建响应式布局的最佳实践是什么?例如桌面,平板电脑,电话的不同屏幕。
在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(),
),
]
)
我认为使用此命令获得屏幕大小更好,
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
还有一个叫做size_configure的包,可以帮助你使Flutter应用程序响应,