dart - Flutter:具有固定高度的响应式设计

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

您提供了与垂直模式相关的所有高度和宽度，因此它们在水平 View 中是个问题。我认为你必须尝试 MediaQuery.of(context).size.width 并获取 width 并设置你想要为填充设置的任何比率或让播放器图像居中，以便它适用于水平和垂直。