我正在创建一个管理俱乐部的部分。
我遇到的问题与设计有关。
我尝试表明它在水平面上具有相同的垂直高度,但我仍然不明白为什么机器人不会根据它们的尺寸比率进行调整。
我一直在考虑如何做超过 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);
});
},
)
),
],
)
)
]
)
)
)
]
)
);
}
)
);
这里我给你看一些截图.
垂直模式 - 完美。
水平模式 - 我移动它并且背景图像不适应。
2 回答
您提供与垂直模式相关的所有高度和宽度,因此它们在水平视图中存在问题。我认为你必须尝试 MediaQuery.of(context).size.width 并获得宽度并设置你想要为填充设置的任何比例或者将玩家图像设置为居中,这样它就适用于水平和垂直。
通常,在您在屏幕中间缩进的那一刻,我会将其重构为单独的方法,甚至是单独的 Widget 类。