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

Posted 2023-02-23

【中文标题】如何根据设计规范使我的布局响应？

【英文标题】：How can I make my layout responsive according to design spec?

【发布时间】：2020-06-05 11:27:35

【问题描述】：

我需要帮助来制作响应式布局。这是我想要实现的目标：

https://imgur.com/a/kQvLCiZ

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

布局 A 是边距的最大尺寸（标记为红色），蓝色矩形需要在屏幕宽度为 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),
        ],
      )
    ],
  ),
);

【参考方案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,
          ),
        ),
      ),
    );