如何在 flutter 中的单页 Web 应用程序中实现导航?

How to implement navigation in a single page web application in flutter?

我在 flutter 中创建的 UI 单页 Web 应用程序有点复杂。 作为最后一篇文章,我正在努力实现导航,所有可在线找到的示例都集中在多页用例上。

AppBar(
 Row(
   children: [
     Button("Gallery"),
     Button("Faq"),
    Button("Contact"), #after clicking this button
   ]
  ),
),
SingleChildScrollView(
  child: Column( 
    children: [
      GallerySection(...),
      FaqSection(...), 
      ContactSection(...), #scroll to this section/container
    ]
  ),
);

这个想法是实现导航,在按下一个 appBar 按钮后,用户将滚动到请求的部分。 我不太在意 url 格式,它可以保留 www.flutter-single-page.com/# 但有后退导航会很出色 :-),但可选。

您知道如何实现这一点吗?

您可以使用 scrollController 通过它的 ensureVisible 方法滚动到小部件。然后你只需为每个部分分配一个键并调用 ensureVisible 进行导航。

为例