问题 如何将非字符串数据传递到Flutter中的命名路由?


我正在为我的移动应用程序使用Flutter。我有很多屏幕,我正在使用导航器。我想使用“命名路由”,但我还需要将非字符串(如图像)传递给我的下一个路由。

我不能用 pushNamed() 因为我无法将非字符串数据传递给它。

如何使用命名路由+发送非字符串数据?


8696
2017-11-21 18:11


起源



答案:


原则上,命名路线应该是 自我描述。你不应该尝试做类似的事情 pushNamed("/myRoute", myObject)。相反,你应该做类似的事情 pushNamed("myRoute/${myObject.id}") 然后从路径路径中提取该id,并使用它来请求所需的数据。

哪个是哪里 onGenerateRoute 可用作 MaterialApp 财产被使用。 例如,您可以执行以下操作:

  onGenerateRoute: (routeSettings) {
    var path = routeSettings.name.split('/');
    if (path[0] == "myRoute") {
      final foo = path.length > 1 ? int.parse(path[1]) : null;
      return new MaterialPageRoute(
        builder: (context) => new MyPage(foo: foo),
        settings: routeSettings,
      );
    }
    // fallback route here
  },

14
2017-11-21 18:55



当路由是/ myRoute / $ {myID}时,路径拆分在列表中有3个项目,首先是空字符串“”。也许我们必须忽略路径[0]并使用路径[1]和路径[2]? - Gogu
我会删除路线中的第一个'/'。但这只是一个例子,你可以自由地使用你想要的任何东西。 - Rémi Rousselet
真正。我只是想为这些问题添加一些问题,以便稍后访问此人。 - Gogu


答案:


原则上,命名路线应该是 自我描述。你不应该尝试做类似的事情 pushNamed("/myRoute", myObject)。相反,你应该做类似的事情 pushNamed("myRoute/${myObject.id}") 然后从路径路径中提取该id,并使用它来请求所需的数据。

哪个是哪里 onGenerateRoute 可用作 MaterialApp 财产被使用。 例如,您可以执行以下操作:

  onGenerateRoute: (routeSettings) {
    var path = routeSettings.name.split('/');
    if (path[0] == "myRoute") {
      final foo = path.length > 1 ? int.parse(path[1]) : null;
      return new MaterialPageRoute(
        builder: (context) => new MyPage(foo: foo),
        settings: routeSettings,
      );
    }
    // fallback route here
  },

14
2017-11-21 18:55



当路由是/ myRoute / $ {myID}时,路径拆分在列表中有3个项目,首先是空字符串“”。也许我们必须忽略路径[0]并使用路径[1]和路径[2]? - Gogu
我会删除路线中的第一个'/'。但这只是一个例子,你可以自由地使用你想要的任何东西。 - Rémi Rousselet
真正。我只是想为这些问题添加一些问题,以便稍后访问此人。 - Gogu


这个包装很简单

链接: https://pub.dartlang.org/packages/navigate

这提供了很多你期望和易于使用

Navigate.navigate(context,
                      "home",
                      transactionType:TransactionType.fromLeft , // optional
                      replaceRoute: ReplaceRoute.thisOne, //optional
                      arg: {"transactionType":TransactionType.fromLeft,"replaceRoute":ReplaceRoute.thisOne} //optional
                      );

1
2017-08-23 06:54





我正在用相机拍摄图像,然后将它们传递到确认页面,如下所示:

   ImagePicker.pickImage(source: source).then((File file) {
    Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => MediaCaptured(file: file),
        ));
  });

您可以轻松地对任何类型的文件或非字符串数据执行相同操作。

var foo = "non-string data";
Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => MediaCaptured(foo: foo),
        ));

如上所述,通过它的类名调用路径中的下一页。

只需确保您的新页面在其构造函数中接受此内容即可。

 // Stateful Widget
class MediaCaptured extends StatefulWidget {
    MediaCaptured({ Key key, @required this.foo,}) : super(key: key);
    final var foo;
}

// StatelessWidget
class MediaCaptured extends StatelessWidget {
    MediaCaptured(this.foo);
    var foo;
}

0
2017-08-16 16:28





We can pass any type of arguments when declaring routes as constructor arguments as below,

For example to send a list of Strings,

List<String> titles = [];

void main() => runApp(
      new MaterialApp(
        home: new FirstPage(),
        routes: <String, WidgetBuilder>{
          "/SecondPage": (BuildContext context) => new SecondPage(titles),
        },
      ),
    );

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new RaisedButton(onPressed: () {
        Navigator.of(context).pushNamed('/SecondPage');
      }),
    );
  }
}

class SecondPage extends StatelessWidget {
  final List<String> titles;

  SecondPage(this.titles);

  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
      itemBuilder: (context, index) {
        return new ListTile(
          title: new Text(titles[index]),
        );
      },
    );
  }
}

-2
2018-05-21 12:21