如何使背景图像在颤振中可滚动?

Question

我在我的应用程序上做了一个藏宝图。我成功地让地图上的点(棋盘)可滚动，但背景不能。因为我同时也在为地图本身创造美术，所以在此之前我必须确保一切正常。简而言之，我将演示(我还标记了参考以帮助您)。我得到了这个指纹，当我向上滚动时，我得到了这个。看到了吗?背景图像没有跟随板子，没有移动。我已经尝试过用SingleChildScrollView放这个背景图像，但变得更糟，甚至板都不能正常移动，最后一个被裁剪了。我试图把图像与一个子滚动视图在堆栈的开始，但没有工作太。这是我的代码(我认为你不必关注这些容器(他们只是显示板和他们的位置)，我几乎可以肯定，问题是在身体的开始):

body: LayoutBuilder(builder: (context, constraints) {
return Container(
width: constraints.maxWidth,
height: constraints.maxHeight,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://i.imgur.com/z1GHi45.png'),
fit: BoxFit.fitWidth)),
child: SingleChildScrollView(
child: Stack(children: [
Wrap(
children: [
Container(
margin:
EdgeInsets.symmetric(horizontal: 30, vertical: 20),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin: EdgeInsets.only(left: 115, top: 220),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin:
EdgeInsets.symmetric(horizontal: 25, vertical: 55),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin:
EdgeInsets.symmetric(horizontal: 60, vertical: 120),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin:
EdgeInsets.symmetric(horizontal: 20, vertical: 15),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin: EdgeInsets.only(left: 140, top: 120),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin: EdgeInsets.only(left: 80, top: 100),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin: EdgeInsets.only(left: 20, top: 300),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin: EdgeInsets.only(left: 150, top: 200),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
],
),
]),
),
);
}),
);

Thanks in advance

Answer 1

嗯，没有人帮助我，所以我自己解决了这个问题。我找到了解决方案，将背景的高度相乘，并在Wrap小部件上方添加容器。所以，下面是为我工作的代码:

body: LayoutBuilder(builder: (context, constraints) {
return Container(
child: SingleChildScrollView(
child: Stack(children: [
Container(
width: constraints.maxWidth,
height: constraints.maxHeight * 2.4,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://i.imgur.com/z1GHi45.png'),
fit: BoxFit.cover))),
Wrap(
children: [
Container(
margin:
EdgeInsets.symmetric(horizontal: 30, vertical: 20),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin: EdgeInsets.only(left: 115, top: 220),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin:
EdgeInsets.symmetric(horizontal: 25, vertical: 55),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin:
EdgeInsets.symmetric(horizontal: 60, vertical: 120),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin:
EdgeInsets.symmetric(horizontal: 20, vertical: 15),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin: EdgeInsets.only(left: 140, top: 120),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin: EdgeInsets.only(left: 80, top: 100),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin: EdgeInsets.only(left: 20, top: 300),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin: EdgeInsets.only(left: 150, top: 200),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
],
),
]),
),
);
}),