-1

我正在颤振中构建一个 WebApp，并且SingleChildScrollView里面有一些小部件。appbar当我按下按钮时，我希望按钮将我带到相应的小部件。那可能吗？这里我附上部分代码。

    Widget build(BuildContext context) {
        return Scaffold(
          extendBodyBehindAppBar: true,
          appBar: CustomAppBar(),
          backgroundColor: Colors.white,
          body: SingleChildScrollView(
            controller: widget.homeController,
            child: Column(
              children: [
                Inicio(),
                Services(),
                QuienesSomos(),
                ContactForm(),
                BottomInfo(),
              ],
            ),
          ),
        );
       }

所以我在appbar每个孩子上都有一个按钮SingleChildScrollView，我希望当我按下对应的按钮时，它会向下滚动到小部件上的对应部分。我试过了，Navigator.of().PushNamed但它会打开一个新屏幕而不是向下滚动。有任何想法吗？提前致谢！

4

3 回答 3

1

要控制位置，您必须管理SingleChildScrollView .

如果您想顺利进入某个部分，您可以将控制SingleChildScrollView 控制器的功能附加到按钮：

widget.homeController.animateTo(
  0.0, // change 0.0 {double offset} to corresponding widget position
  duration: Duration(seconds: 1),
  curve: Curves.easeOut,
);

如果你只想立即跳转到该位置：

  widget.homeController.jumpTo(0.0); // change 0.0 {double value} to corresponding widget position
于 2021-03-01T02:05:37.920 回答
0

我可以通过使用来实现我的目标，

                onPressed: () {
                  Scrollable.ensureVisible(servicesKey.currentContext,
                      duration: Duration(seconds: 1),
                      curve: Curves.easeOut);
                },

并通过在每个小部件中分配相应的键。

于 2021-03-02T20:55:16.683 回答
0

制作一个滚动控制器：

  ScrollController myController = ScrollController();

并将其附加到您的 SingleChildScrollView 小部件：

  SingleChildScrollView(
     controller: myController,
     child: ...

现在创建一个 GlobalKey：

  final anchor = GlobalKey();

将其附加到您的任何小部件：

  Container(
    key: anchor,
    child: ...
  ),

就是这样，现在您可以使用滚动控制器以编程方式滚动到此小部件：

myController.position.ensureVisible(
   anchor.currentContext.findRenderObject(),
   alignment: 0.5,
   duration: const Duration(seconds: 1),
);
于 2022-01-22T19:57:01.923 回答