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

Question

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

我目前使用断点来标记主要的屏幕变化，在这种情况下，布局 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 且与高度相同。您也可以以相同的方式在小部件之间设置 space。

@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,
          ),
        ),
      ),
    );
  }

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

How can I make my layout responsive according to design spec?

responsive-design

dart

flutter

flutter-layout

flutter-web