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并获取width，并设置要设置的填充率或将播放器图像居中放置的任何比率，以便它既可以水平放置也可以垂直放置。

Answer 2

通常，当您缩进屏幕的一半时，我会将其重构为一个单独的方法，甚至是一个单独的Widget类。

Flutter：具有固定高度的自适应设计

2 个答案: