首页 > 解决方案 > 如何从颤动的 URL 中获取价值

问题描述

在 Flutter 中,我正在构建一个 Web 应用程序。在这种情况下,我需要一个可以从 URL 获取数据的函数,就像在 Javascript 中获取数据一样。我该怎么做?

例如,假设我在加载 Web 应用程序时将以下内容附加到我的 URL:/#/5a9c14ca-06bf-4c3d-b41e-a1317ea1ae79.如何将它们作为原始字符串(首选)或其他格式在 Dart 中获取?

到目前为止我尝试过的

  void initState() {
        GetUrl();
  }

  void GetUrl(){

    var uri = Uri.dataFromString(window.location.href); //converts string to a uri
    Map<String, String> params = uri.queryParameters; // query parameters automatically populated
    var param1 = params['param1']; // return value of parameter "param1" from uri
    print(jsonEncode(params));//can use returned parameters to encode as json
    setState(() {});
  }

但我没有得到任何结果。先感谢您

标签: flutterhttpdartflutter-weburl-parameters

解决方案


在这种uuid情况下,您要获得的是路径段而不是参数,因此您可以做到

  var uri = Uri.dataFromString('http://localhost:59786/#/5a9c14ca-06bf-4c3d-b41e-a1317ea1ae79-0.6869740326627118');
  var uuid = uri.pathSegments[4];
  print(uuid); // 5a9c14ca-06bf-4c3d-b41e-a1317ea1ae79-0.6869740326627118

或者你可以使用一个包来帮助你,比如qlevar_router。一个完整的例子

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:qlevar_router/qlevar_router.dart';

void main() {
  runApp(MyApp());
}

class AppRoutes {
  final routes = <QRouteBase>[
    QRoute(
      path: '/',
      page: (c) => PageOne(),
    ),
    QRoute(path: '/:uuid', page: (c) => PageTwo(c))
  ];
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: QR.router(AppRoutes().routes),
      routeInformationParser: QR.routeParser(),
    );
  }
}

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(children: [
          Text('This is page one'),
          TextButton(
              onPressed: () => QR.to(
                  '/5a9c14ca-06bf-4c3d-b41e-a1317ea1ae79-${Random().nextDouble()}'),
              child: Text('To uuid')),
        ]),
      ),
    );
  }
}

class PageTwo extends StatelessWidget {
  final QRouteChild child;
  PageTwo(this.child);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(children: [
          Text(QR.params['uuid'].toString()),
          TextButton(onPressed: () => QR.back(), child: Text('Back'))
        ]),
      ),
    );
  }
}


推荐阅读