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

我正在为web构建Flitter中的应用程序登录页。我需要使页面响应不同的屏幕大小

我使用

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

行(
mainAxisAlignment:mainAxisAlignment.space，
儿童：[
纵队(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
CenterText（），
尺寸箱（高度：10），
划船(
儿童：[
下载按钮（）]，
),
],
),
纵队(
儿童：[
屏幕截图（），
],
),
],
)

您需要了解

LayoutBuilder

组件，它是您所需要的，并且可以满足您的需要

LayoutBuilder

采用两个参数，一个是

上下文

，第二个是

约束

。通过这些约束，您可以设置为显示不同屏幕的不同布局

检查此示例：

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

LayoutBuilder(
生成器：（上下文、约束）{
if（constraints.maxHeight<768&&constraints.maxWidth<1270）{
返回smallDesignContent（）；
}否则{
返回bigDefaultDesignContent（）；
}
},
)

---

谢谢您的回复！我知道

LayoutBuilder

，但我的问题是我需要根据屏幕大小，而不仅仅是一个大小或另一个大小，将屏幕截图缩小。看看reflectly.app没问题，你可以设置多个条件，这取决于你，如果你想检查高度和宽度是否都小于300，你可以。我只举了一个例子，你可以拥有你应该拥有的