Question

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

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

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

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

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具有两个参数，一个是context，第二个是constraints。有了这些限制，您可以为不同的屏幕设置显示不同的布局。

检查此示例：

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

Flutter Widget of the Week - Layout Builder

Documentation

如何为响应屏幕调整行的大小？

1 个答案: