我正在创建一个管理俱乐部的部门。
我遇到的问题与设计有关。
我试图指出它在水平面上有相同的垂直高度,但我仍然不明白为什么机器人不根据它们的大小比例进行调整。
我已经想了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);
});
},
)
),
],
)
)
]
)
)
)
]
)
);
}
)
);
这里我给你看一些截图。
垂直模式
-太好了。
-我移动它和背景图像不适应。
