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

这里的问题是您的孩子的大小发生了变化，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.
);