如何根据设计规范使布局具有响应性？

Question

我需要帮助以使布局响应式。这是我想要达到的目标：

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),
        ],
      )
    ],
  ),
);

我需要帮助以使布局响应式。这是我要实现的目标：https://imgur.com/a/kQvLCiZ我目前正在使用断点来标记主要的屏幕更改，在这种情况下，布局A ...

Answer 1

您可以使用MediaQuery获取屏幕大小，以便可以根据它来构建窗口小部件。