颤振：具有固定高度的响应式设计

Question

我正在创建一个管理俱乐部的部分。

我遇到的问题与设计有关。

我尝试表明它在水平面上具有相同的垂直高度，但我仍然不明白为什么机器人不会根据它们的尺寸比率进行调整。

我一直在考虑如何做超过4个小时，我无法做到，我希望有人可以帮助我。

我的目标：垂直边的设计与水平面相同

在这里，我向您展示我的代码

return Scaffold(
      key: _scaffoldKey,
      appBar: new AppBar(
        title: new Text("LINE UP"),
        centerTitle: true,
        backgroundColor: Colors.lightBlue[500],
      ),
      body: LayoutBuilder(
          builder: (context, constraints) {
            return new Container(
                color: Colors.blue[800],
                child: new Stack(
                    children: <Widget>[
                      new Positioned.fill(
                          child: new SingleChildScrollView(
                              scrollDirection: Axis.vertical,
                              child: new Column(
                                  children: <Widget>[
                                    new Container(
                                        decoration: new BoxDecoration(
                                          image: new DecorationImage(
                                              image: new AssetImage(imgStadium),
                                              fit: BoxFit.fitWidth
                                          ),
                                        ),
                                        height: 411.4,
                                        width: constraints.maxWidth,
                                        child: new Stack(
                                          children: <Widget>[
                                            // BOT1
                                            Positioned(
                                                top: 120.0,
                                                left: 168.0,
                                                child: new GestureDetector(
                                                  child: new Column(
                                                    children: <Widget>[
                                                      new Container(
                                                        decoration: BoxDecoration(
                                                          image: new DecorationImage(
                                                            image: new AssetImage(
                                                                imgPlayer1),
                                                            fit: BoxFit.fill,
                                                          ),
                                                        ),
                                                        height: 40.0,
                                                        width: 30.0,
                                                      ),
                                                      new Container(
                                                        width: 70.0,
                                                        decoration: BoxDecoration(
                                                          shape: BoxShape
                                                              .rectangle,
                                                          color: Colors.black
                                                              .withOpacity(0.5),
                                                        ),
                                                        child: new Text(
                                                          "${textPlayer1}",
                                                          style: new TextStyle(
                                                              color: Colors
                                                                  .white,
                                                              fontWeight: FontWeight
                                                                  .bold,
                                                              fontSize: 12.0),
                                                          textAlign: TextAlign
                                                              .center,),
                                                      )
                                                    ],
                                                  ),
                                                  onTap: () {
                                                    setState(() {
                                                      _showModalSheet(1);
                                                    });
                                                  },
                                                )
                                            ),
                                            //BOT2
                                            Positioned(
                                                top: topPositionPlayer2,
                                                left: leftPositionPlayer2,
                                                child: new GestureDetector(
                                                  child: new Column(
                                                    children: <Widget>[
                                                      new Container(
                                                        decoration: BoxDecoration(
                                                          image: new DecorationImage(
                                                            image: new AssetImage(
                                                                imgPlayer2),
                                                            fit: BoxFit.fill,
                                                          ),
                                                        ),
                                                        height: 40.0,
                                                        width: 30.0,
                                                      ),
                                                      new Container(
                                                        width: 70.0,
                                                        decoration: BoxDecoration(
                                                          shape: BoxShape
                                                              .rectangle,
                                                          color: Colors.black
                                                              .withOpacity(0.5),
                                                        ),
                                                        child: new Text(
                                                          "${textPlayer2}",
                                                          style: new TextStyle(
                                                              color: Colors
                                                                  .white,
                                                              fontWeight: FontWeight
                                                                  .bold,
                                                              fontSize: 12.0),
                                                          textAlign: TextAlign
                                                              .center,),
                                                      )
                                                    ],
                                                  ),
                                                  onTap: () {
                                                    setState(() {
                                                      _showModalSheet(2);
                                                    });
                                                  },
                                                )
                                            ),
                                            //BOT3
                                            Positioned(
                                                top: topPositionPlayer3,
                                                left: leftPositionPlayer3,
                                                child: new GestureDetector(
                                                  child: new Column(
                                                    children: <Widget>[
                                                      new Container(
                                                        decoration: BoxDecoration(
                                                          image: new DecorationImage(
                                                            image: new AssetImage(
                                                                imgPlayer3),
                                                            fit: BoxFit.fill,
                                                          ),
                                                        ),
                                                        height: 40.0,
                                                        width: 30.0,
                                                      ),
                                                      new Container(
                                                        width: 70.0,
                                                        decoration: BoxDecoration(
                                                          shape: BoxShape
                                                              .rectangle,
                                                          color: Colors.black
                                                              .withOpacity(0.5),
                                                        ),
                                                        child: new Text(
                                                          "${textPlayer3}",
                                                          style: new TextStyle(
                                                              color: Colors
                                                                  .white,
                                                              fontWeight: FontWeight
                                                                  .bold,
                                                              fontSize: 12.0),
                                                          textAlign: TextAlign
                                                              .center,),
                                                      )
                                                    ],
                                                  ),
                                                  onTap: () {
                                                    setState(() {
                                                      _showModalSheet(3);
                                                    });
                                                  },
                                                )
                                            ),
                                          ],
                                        )
                                    )
                                  ]
                              )
                          )
                      )
                    ]
                )
            );
          }
      )
    );

在这里，我向您展示一些截图。

垂直模式 - 完美。

水平模式 - 我移动它并且背景图像不适应。

Answer 1

您提供与垂直模式相关的所有高度和宽度，因此它们在水平视图中存在问题。我认为您必须尝试MediaQuery.of（context）.size.width并获取宽度并设置您想要为填充设置的任何比率或将玩家图像设置为居中，以便它适用于水平和垂直。

Answer 2

通常，在您在屏幕中间缩进的那一刻，我会将其重构为单独的方法，甚至是单独的Widget类。