基于状态的 Flutter Web 更新 url/路由

Posted 2023-02-22

【中文标题】基于状态的 Flutter Web 更新 url/路由

【英文标题】：Flutter web update url/route base on state

【发布时间】：2021-10-03 10:57:12

【问题描述】：

我是 Flutter 的新手，我只想知道这个场景/功能在 Flutter/Flutter Web 中是否可行。我想根据屏幕状态更新 url/route。例如，在 9gag.com 中，有 Hot、Trending 和 Fresh 按钮。然后，如果我点击 Hot 按钮，其 url 将更新为 9gag.com/hot 及其内容，Trending 也是如此和新鲜按钮。这在颤动/颤动网络中可能吗？如果是这样，我该如何实现这个功能？（如果实现使用 bloc 会更好）

【问题讨论】：

尝试使用fluro 包它对flutter web 基于URL 的路由github.com/lukepighetti/fluro#navigating 非常有效

【参考方案1】：

完全可能并且很容易实现，只需在 onpressed/ontap 上使用 url_launcher Package

示例：将此代码添加到有状态管理的开头或代码末尾的某处

  _launchURL() async 
  const url = 'https://flutter.io';
  if (await canLaunch(url)) 
    await launch(url);
   else 
    throw 'Could not launch $url';
  

这样称呼它

RaisedButton(
        onPressed: _launchURL,
        child: new Text('Show Flutter homepage'),
      ),
    ),

现在，如果您有一些 9gag/hot 按钮或容器，只要输入该 url，当用户点击它时，它就会打开该 url。如果您想在应用程序 webview 中打开它，这也是可能的，但略有不同。

【讨论】：

这种情况下可以实现吗？例如在“HomePage()”（URL：“example.com”）中。有一个“Hot”按钮，当我单击该按钮时，URL 将更新为“example.com/hot”，“HomePage()”的内容也将更新/更改

当您打开一个新的 url 时，主页的内容将不可见，如上例所示，当您单击它时，您将被导航到新的空间/屏幕，如果您使用无需离开应用即可在应用内打开网址，否则您将进入手机浏览器。

那么上述场景在flutter web中是不可能的吗？我真正想要的是，例如，如果我将“example.com”（在 HomeScreen 中显示新帖子）更改为“example.com/hot”，它将在 HomeScreen 中显示热门帖子。

您定义的场景将与 url 启动器完美配合，即使在 Flutter Web 中该包支持 Web 完全取决于您是否想在 HomeScreen 或新屏幕上显示 /hot 帖子假设 HotScreen，您只需要通过调用导航器来导航页面并在新屏幕中调用函数，如果您希望用户被导航到专门针对 /hot 趋势的屏幕

【参考方案2】：

如果我理解正确的话 使用默认的导航和路由方式非常简单。 我不确定你提到的方法

我想根据屏幕状态更新 url/路由

和

然后，如果我点击 Hot 按钮，其 url 将更新为 9gag.com/hot 及其内容

如果我没记错的话，有一个内置功能可以导航到其他屏幕，一旦您登陆所需的屏幕，您就可以看到刷新的内容。如果您想尝试材料设计，代码将是这样的

    //within your stateful or stateless widget
     onPressed: () 
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => YourPage()),

您可以尝试这种内置方式来完成相同的工作，而不是使用包。但这取决于您要使用哪一个。查看 Flutter 官方文档https://flutter.dev/docs/cookbook/navigation 我希望这种方法也有助于回答您的问题。如果很高兴在您的颤振之旅中提供帮助，如果不分享您是如何解决的。

【讨论】：

我很抱歉造成混乱，但我想要的是，例如在“HomePage()”（URL：“example.com”）中。有一个“Hot”按钮，当我单击该按钮时，URL 将更新为“example.com/hot”，“HomePage()”的内容也将更新/更改。