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)。然后，您还需要为要显示的StreamBuilder提供一个GlobalKey（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.
);

SingleChildScrollView不保持滚动位置

1 个答案: