如何使我的布局根据设计规范做出响应

Question

我需要帮助使布局具有响应性。以下是我正在努力实现的目标：

https://i.stack.imgur.com/Dl5x4.jpg

我目前正在使用断点来标记主要的屏幕更改，在这种情况下，布局A和B在桌面断点范围内。桌面断点从1024开始。

布局A是页边空白的最大大小(用红色标记(，当屏幕宽度为1920或大于1920时，蓝色矩形需要为。布局B是页边空白的最小大小，当屏幕宽度为1024时，蓝色框需要为。

到目前为止，我已经尝试使用灵活约束和长方体约束的组合。问题是我无法获得布局B所需最小值的精确测量值。要么我折衷了蓝框的大小，要么折衷了边距。

这是我迄今为止拥有的代码：

Container(
height: height,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
fit: FlexFit.loose,
flex: 5,
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 298.67,
minHeight: 439,
maxWidth: 352,
maxHeight: 517),
child: AspectRatio(
aspectRatio: 352 / 517,
child: Container(
color: Colors.blue,
child: LayoutBuilder(
builder: (context, size) =>
Center(child: Text('$size'))),
)))),
Flexible(
fit: FlexFit.loose,
flex: 1,
child: FractionallySizedBox(
widthFactor: 0.6,
child: Container(
width: 64,
))),
Flexible(
fit: FlexFit.loose,
flex: 5,
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 298.67,
minHeight: 439,
maxWidth: 352,
maxHeight: 517),
child: AspectRatio(
aspectRatio: 352 / 517,
child: Container(
color: Colors.blue,
child: LayoutBuilder(
builder: (context, size) =>
Center(child: Text('$size'))),
)))),
Flexible(
fit: FlexFit.loose,
flex: 1,
child: FractionallySizedBox(
widthFactor: 0.6,
child: Container(
width: 64,
))),
Flexible(
fit: FlexFit.loose,
flex: 5,
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 298.67,
minHeight: 439,
maxWidth: 352,
maxHeight: 517),
child: AspectRatio(
aspectRatio: 352 / 517,
child: Container(
color: Colors.blue,
child: LayoutBuilder(
builder: (context, size) =>
Center(child: Text('$size'))),
)))),
],
),
SizedBox(height: 96),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Spacer(flex: 6),
Flexible(
fit: FlexFit.loose,
flex: 9,
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 298.67,
minHeight: 439,
maxWidth: 352,
maxHeight: 517),
child: AspectRatio(
aspectRatio: 352 / 517,
child: Container(
color: Colors.blue,
child: LayoutBuilder(
builder: (context, size) =>
Center(child: Text('$size'))),
)))),
Flexible(
flex: 1,
child: ConstrainedBox(
constraints: BoxConstraints(minWidth: 24, maxWidth: 64),
child: Container())),
Flexible(
fit: FlexFit.loose,
flex: 9,
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 298.67,
minHeight: 439,
maxWidth: 352,
maxHeight: 517),
child: AspectRatio(
aspectRatio: 352 / 517,
child: Container(
color: Colors.blue,
child: LayoutBuilder(
builder: (context, size) =>
Center(child: Text('$size'))),
)))),
Spacer(flex: 6),
],
)
],
),
);

Answer 1

您可以使用MediaQuery获取屏幕大小，这样您就可以根据它构建小部件。

在下面的例子中，如果屏幕尺寸大于1900，则宽度将为352，否则宽度将为298.67，并且与高度相同。您也可以用同样的方式设置小部件之间的空间。

@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
final double width = size.width > 1900 ? 352 : 298.67;
final double height = size.width > 1900 ? 517 : 439;
return Scaffold(
body: Container(
child: Center(
child: Container(
width: width,
height: height,
),
),
),
);
}