flutter - 如何为响应式屏幕调整行中的列大小？

Question

我正在 Flutter for web 中构建应用登录页面。我需要让页面响应不同的屏幕尺寸。

我MediaQuery用于更改小屏幕的布局，因此小部件是垂直布局。

但是对于中等尺寸的屏幕布局是水平的。因此，当屏幕变小时，我需要调整应用屏幕截图的大小。怎么做？

例如：reflectly.app

到目前为止，这是我的代码：

Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: <Widget>[
                              Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  CenterText(),
                                  SizedBox(height: 10),
                                  Row(
                                    children: <Widget>[
                                      DownloadButtons()                                    ],
                                  ),
                                ],
                              ),
                              Column(
                                children: <Widget>[
                                  Screenshot(),
                                ],
                              ),
                            ],
                          )

Answer 1

您需要知道LayoutBuilder组件，这是您想要的并解决您的需求。

LayoutBuilder接受两个参数，一个是 a context，第二个是 a constraints。使用这些约束，您可以为不同的屏幕设置显示不同的布局。

检查这个例子：

LayoutBuilder(
        builder: (context, constraints) {
          if(constraints.maxHeight < 768 && constraints.maxWidth < 1270) {
            return smallDesignContent();
          } else {
            return bigDefaultDesignContent();
          }
        },
      )

本周 Flutter 小部件 - 布局生成器

文档