我的应用程序中有一个SingleChildScrollView
小部件,其中包含Column
作为子级。Column
有许多子项,滚动屏幕最底部的最后一个是StreamBuilder
,我用它来更改子子Image
问题是,当我点击图像时,StreamBuilder的逻辑起作用并且图像被更改,但是SingleChildScrollView然后向上滚动一点,以使图像不可见,并迫使用户再次向下滚动以能够查看新加载的图片。
Widget _buildScroll() => SingleChildScrollView(
child: Container(
width: 2080,
child: Column(
children: <Widget>[
_buildTopBar(),
_buildMainContent(),
SizedBox(height: 30),
Container(
child: Image.asset(
"assets/images/chart_legend.png",
width: 300,
),
),
SizedBox(height: 30),
Image.asset("assets/images/road_map.png", width: 600),
StreamBuilder<int>(
initialData: 1,
stream: _compareStream,
builder: (context, snapshot) {
if (snapshot.hasData) {
if (snapshot.data == 1) {
return Padding(
padding: const EdgeInsets.only(right: 10),
child: GestureDetector(
child: Image.asset("assets/images/compare1.png"),
onTap: () => _compareSubject.add(2),
),
);
} else if (snapshot.data == 2) {
return Padding(
padding: const EdgeInsets.only(right: 10),
child: GestureDetector(
child: Image.asset("assets/images/compare2.png"),
onTap: () => _compareSubject.add(3),
),
);
} else {
return Padding(
padding: const EdgeInsets.only(right: 10),
child: GestureDetector(
child: Image.asset("assets/images/compare3.png"),
onTap: () => _compareSubject.add(1),
),
);
}
}
return Padding(
padding: const EdgeInsets.only(right: 10),
child: GestureDetector(
child: Image.asset("assets/images/compare1.png"),
onTap: () {},
),
);
}),
],
),
),
);
但是,更奇怪的是,一旦我点击了所有图像,它们将按预期显示而不向上滚动……这意味着,如果我第二次点击图像,则第二次显示图像。替换了没有发生的向上滚动。
最佳答案
这里的问题是 child 的大小发生了变化,而SingleChildScrollView
无法处理。
我认为这里可能有两种解决方案:
SizedBox
强制执行。这样,滚动位置将保持不变:SizedBox(
width: 300,
height: 120,
child: StreamBuilder<int>(...),
)
ensureVisible
,它使您可以精确控制应在何处显示图像。您需要将
ScrollController
分配给 SingleChildScrollView
( controller
parameter)。然后,您还需要为要显示的GlobalKey
(StreamBuilder
参数)添加一个 key
。如果已将两者的实例保存到变量,则在图像加载后就可以调用以下命令:
scrollController.position.ensureVisible(
globalKey.currentContext.findRenderObject(),
alignment: 0.5, // Aligns the image in the middle.
duration: const Duration(milliseconds: 120), // So it does not jump.
);
关于flutter - SingleChildScrollView不保持滚动位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58624799/