Flutter 颤振Web：单击后滚动到特定小部件

在上面的gif中，我有一个简单的布局，左侧有图标按钮，另一侧有一些颜色的容器

当我点击图标按钮时，我不知道如何滚动到容器。在javascript/jquery中，我们可以对特定内容使用id，然后当单击按钮时，我们可以使用偏移量转到特定内容

我怎么能做同样的事情，但在颤振网页方面

布局

类WelcomeScreen扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
final mqHeight=MediaQuery.of（context）.size.height；
返回脚手架(
正文：布局生成器(
生成器：（BuildContext上下文，BoxConstraints）{
返回行(
儿童：[
if（size.checkLayoutBuilder（约束）=TypeLayout.Mobile）
SizedBox（）
其他的
灵活的(
适合：FlexFit.tight，
子：容器(
装饰：盒子装饰（颜色：颜色。紫色），
子：列(
mainAxisAlignment:mainAxisAlignment.space，
儿童：[
装配箱(
孩子：我的钮扣(
按下：（）=>''，
图标：图标(
我的家，
颜色：颜色，白色，
),
工具提示：“欢迎”，
),
),
图标按钮(
按下：（）=>''，
图标：图标(
明星，
颜色：颜色，白色，
),
工具提示：“公文包”，
),
图标按钮(
按下：（）=>''，
图标：图标(
一个人，
颜色：颜色，白色，
),
工具提示：“想了解我吗？”，
),
],
),
),
),
灵活的(
适合：FlexFit.tight，
弹性：10，
子：SingleChildScrollView(
子：列(
crossAxisAlignment:crossAxisAlignment.stretch，
儿童：[
容器（高度：mqHeight，颜色：Colors.orange），
容器（高度：mqHeight，颜色：Colors.indigo），
容器（高度：mqHeight，颜色：Colors.lime），
],
),
),
),
],
);
},
),
);
}
TypeLayout checkLayoutBuilder（框约束）{
最终maxWidth=constraints.maxWidth；
排版排版；
如果（最大宽度<600）{
typeLayout=typeLayout.Mobile；
}否则如果（maxWidth>600&&maxWidth<768）{
typeLayout=typeLayout.LargeMobile；
}否则如果（maxWidth>768&&maxWidth<992）{
typeLayout=typeLayout.Tablet；
}否则如果（maxWidth>992&&maxWidth<1200）{
typeLayout=typeLayout.Laptop；
}否则如果（最大宽度>1200）{
typeLayout=typeLayout.Desktop；
}
返回式布局；
}
}

@pskink成功了！但我有另一个简单的例子。滚动时是否可能检测到我们已到达小部件？在上面的gif示例中，我默认使用橙色容器，然后滚动到靛蓝/石灰容器，有可能检测到它吗？

ensurerevible

返回一个

未来

-他们在官方文档中没有提到它，但我的内心声音告诉我，当滚动结束时，它就完成了-尝试一下滚动时你的意思是什么

完成了

？正如您所说，

ensurerevible

return

Future void

这并没有提供信息anymore@pskink这是工作！但我有另一个简单的例子。滚动时是否可能检测到我们已到达小部件？在上面的gif示例中，我默认使用橙色容器，然后滚动到靛蓝/石灰容器，有可能检测到它吗？

ensurerevible

返回一个

未来

-他们在官方文档中没有提到它，但我的内心声音告诉我，当滚动结束时，它就完成了-尝试一下滚动时你的意思是什么

完成了

？正如您所说，

ensurerevible

return

Future void

这不再提供信息

class WelcomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final mqHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          return Row(
            children: [
              if (sizes.checkLayoutBuilder(constraints) == TypeLayout.Mobile)
                SizedBox()
              else
                Flexible(
                  fit: FlexFit.tight,
                  child: Container(
                    decoration: BoxDecoration(color: Colors.purple),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        FittedBox(
                          child: IconButton(
                            onPressed: () => '',
                            icon: Icon(
                              Icons.home,
                              color: Colors.white,
                            ),
                            tooltip: 'Welcome',
                          ),
                        ),
                        IconButton(
                          onPressed: () => '',
                          icon: Icon(
                            Icons.star,
                            color: Colors.white,
                          ),
                          tooltip: 'Portfolio',
                        ),
                        IconButton(
                          onPressed: () => '',
                          icon: Icon(
                            Icons.person,
                            color: Colors.white,
                          ),
                          tooltip: 'Want know about me ?',
                        ),
                      ],
                    ),
                  ),
                ),
              Flexible(
                fit: FlexFit.tight,
                flex: 10,
                child: SingleChildScrollView(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Container(height: mqHeight, color: Colors.orange),
                      Container(height: mqHeight, color: Colors.indigo),
                      Container(height: mqHeight, color: Colors.lime),
                    ],
                  ),
                ),
              ),
            ],
          );
        },
      ),
    );
  }
  TypeLayout checkLayoutBuilder(BoxConstraints constraints) {
    final maxWidth = constraints.maxWidth;
    TypeLayout typeLayout;
    if (maxWidth < 600) {
      typeLayout = TypeLayout.Mobile;
    } else if (maxWidth > 600 && maxWidth < 768) {
      typeLayout = TypeLayout.LargeMobile;
    } else if (maxWidth > 768 && maxWidth < 992) {
      typeLayout = TypeLayout.Tablet;
    } else if (maxWidth > 992 && maxWidth < 1200) {
      typeLayout = TypeLayout.Laptop;
    } else if (maxWidth > 1200) {
      typeLayout = TypeLayout.Desktop;
    }
    return typeLayout;
  }
}