Flutter路由跳轉(zhuǎn)參數(shù)處理技巧詳解

更新時(shí)間：2023年08月03日 10:17:30 作者：龍之音

這篇文章主要為大家介紹了Flutter路由跳轉(zhuǎn)參數(shù)處理技巧示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

需求

我們?cè)陂_(kāi)發(fā)應(yīng)用中，經(jīng)常會(huì)出現(xiàn)一個(gè)界面跳轉(zhuǎn)到另外一個(gè)界面并帶有參數(shù)傳遞，在Android中大家都知道使用Intent傳遞參數(shù)，在第二個(gè)Activity中onCreate中可以獲取到這個(gè)參數(shù)。

實(shí)現(xiàn)

那么在Flutter中，我們經(jīng)常會(huì)使用路由跳轉(zhuǎn)到另外一個(gè)界面，那么如果這個(gè)時(shí)候需要傳參。

代碼如下：

/// 路由跳轉(zhuǎn)并帶參數(shù)
 Navigator.pushNamed(
            context,
            RouteConst.routeNext,
            arguments: (TestArguments("一笑輪回", "江蘇省徐州市")),
);       
/// 測(cè)試數(shù)據(jù)模型
class TestArguments {
  String? name;
  String? address;
  TestArguments(this.name, this.address);
}

賦值arguments字段

沒(méi)錯(cuò)，直接賦值arguments字段就可以了,那么我們?nèi)绾潍@取呢？

在第二個(gè)頁(yè)面中

class TwoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 從路由設(shè)置中獲取傳遞的參數(shù)
    var arguments = ModalRoute.of(context)?.settings.arguments;
    // 其他部分的代碼...
  }
}

我們需要通過(guò) ModalRoute.of(context)?.settings.arguments獲取數(shù)據(jù)，那么我們直接在 initState方法中直接通過(guò) ModalRoute.of(context)?.settings.arguments獲取，會(huì)報(bào)錯(cuò)

這里出錯(cuò)原因，可以通過(guò)錯(cuò)誤并查看源碼可知，這里部講述。

我們有的時(shí)候需要在initState方法中獲取數(shù)據(jù)并處理一些事情，我們應(yīng)該怎么做呢？

下面提供一個(gè)小技巧。

路由定義

class RouteConst {
  static const routeNext = "/route_next";
}
class RoutePathConst {
  static var routePaths = <String, Widget Function(BuildContext context)>{
    RouteConst.routeNext: (context) => ArgumentsNextPage(),
  };
}

跳轉(zhuǎn)代碼

Navigator.pushNamed(
            context,
            RouteConst.routeNext,
            arguments: (TestArguments("一笑輪回", "江蘇省徐州市")),
          );
/// 測(cè)試數(shù)據(jù)模型
class TestArguments {
  String? name;
  String? address;
  TestArguments(this.name, this.address);
}

定義ArgumentsMixin

/// Arguments參數(shù)數(shù)據(jù)
mixin ArgumentsMixin {
  late final Object? arguments;
}
/// 路由拼接的參數(shù)數(shù)據(jù)
mixin RouteQueryMixin {
  final Map<String, String> routeParams = HashMap();
}

重寫(xiě)onGenerateRoute

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      ...
      onGenerateRoute: (settings) {
        var uri = Uri.parse(settings.name ?? "");
        var route = uri.path;
        var params = uri.queryParameters;
        if (!RoutePathConst.routePaths.containsKey(route)) {
          return null;
        }
        return MaterialPageRoute(
          builder: (context) {
            var widgetBuilder = RoutePathConst.routePaths[route];
            var widget = widgetBuilder!(context);
            if (widget is RouteQueryMixin) {
              (widget as RouteQueryMixin).routeParams.addAll(params);
            }
            if (widget is ArgumentsMixin) {
              (widget as ArgumentsMixin).arguments = settings.arguments;
            }
            return widget;
          },
          settings: settings,
        );
      },
    );
  }
}

創(chuàng)建ArgumentsNextPage

///第二頁(yè)
class ArgumentsNextPage extends StatefulWidget
    with ArgumentsMixin, RouteQueryMixin {
  ArgumentsNextPage({super.key});
  @override
  State<ArgumentsNextPage> createState() => _ArgumentsNextPageState();
}
class _ArgumentsNextPageState extends State<ArgumentsNextPage> {
  /// 傳參數(shù)據(jù)文本
  String get result {
    // Arguments傳參數(shù)據(jù)
    TestArguments? arguments;
    if (widget.arguments != null && widget.arguments is TestArguments) {
      arguments = widget.arguments as TestArguments;
    }
    // 路由拼接的數(shù)據(jù)
    var params = widget.routeParams;
    // 拼接結(jié)果數(shù)據(jù)
    return "arguments:name=${arguments?.name ?? ""} address=${arguments?.address ?? ""} \nrouteParams=$params";
  }
  @override
  void initState() {
    super.initState();
    print("result=$result}");
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: XYAppBar(
        title: "第二頁(yè)",
        onBack: () {
          Navigator.pop(context);
        },
      ),
      body: Center(
        child: Text(result),
      ),
    );
  }
}

這樣就OK了，好像沒(méi)講啥，直接看代碼吧。

詳細(xì)代碼見(jiàn)：github/yixiaolunhui/flutter_xy

以上就是Flutter路由跳轉(zhuǎn)參數(shù)處理技巧詳解的詳細(xì)內(nèi)容，更多關(guān)于Flutter路由跳轉(zhuǎn)參數(shù)處理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: