flutter - SingleChildScrollView不保持滚动位置

Question

我的应用程序中有一个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: () {},
              ),
            );
          }),
    ],
  ),
),
);

但是，更奇怪的是，一旦我点击了所有图像，它们将按预期显示而不向上滚动……这意味着，如果我第二次点击图像，则第二次显示图像。替换了没有发生的向上滚动。

Answer 1

这里的问题是 child 的大小发生了变化，而SingleChildScrollView无法处理。

我认为这里可能有两种解决方案:

如果在加载图像之前知道图像的大小，则应使用SizedBox强制执行。这样，滚动位置将保持不变:

SizedBox(
  width: 300,
  height: 120,
  child: StreamBuilder<int>(...),
)

使用stream_builder更新后触发的 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.
);