当前位置：首页 > news >正文

Flutter - UIKit开发相关指南 - 导航

news 来源：原创 2025/5/14 1:16:08

import 'package:flutter/material.dart';
import 'package:navigation/second_route.dart';void main() {runApp(const MainApp());
}class MainApp extends StatelessWidget {const MainApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: "导航示例",home: Builder(builder:(context) => Scaffold(appBar: AppBar(title: Text("导航")),body: Center(child: ElevatedButton(onPressed: () {// 2. 跳转到SecondRouteNavigator.of(context).pushNamed('/second');},child: const Text("到第二个页面"),),),),),// 1.建立映射表 "/second"指向SecondRoute()routes: {'/second': (context) => const SecondRoute()},);}
}

import "package:flutter/cupertino.dart";
import "package:flutter/material.dart";class SecondRoute extends StatelessWidget {const SecondRoute({super.key});@override// 3. 显示Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("第二个路由页面")),body: Center(child: CupertinoButton(onPressed: () {// 4.点击返回Navigator.pop(context);},child: const Text("返回"),),),);}
}

返回 - pop

Flutter中使用如下代码实现pop功能

# 或 Navigator.pop()
SystemNavigator.pop()

在iOS上约等于如下的实现

UIViewController* viewController = [UIApplication sharedApplication].keyWindow.rootViewController;
if ([viewController isKindOfClass:[UINavigationController class]]) {[((UINavigationController*)viewController) popViewControllerAnimated:NO];
}

指定路由表 - push

在push方法中直接用builder跳转，而不需要通过路由表

import 'package:flutter/material.dart';
import 'package:navigation/second_route.dart';void main() {runApp(const MainApp());
}class MainApp extends StatelessWidget {const MainApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: "导航示例",home: Builder(builder:(context) => Scaffold(appBar: AppBar(title: Text("导航")),body: Center(child: ElevatedButton(onPressed: () {// 点击直接指定跳转的界面Navigator.of(context).push(MaterialPageRoute(builder: (context) => const SecondRoute(),),);},child: const Text("到另一个页面"),),),),),);}
}

指定路由表 - go_router

go_router是一个用于Flutter声明式的路由包,使用Router API为不同屏幕间进行切换

$ flutter pub add go_router

会在pubspec.yaml文件中添加go_router依赖包,并下载

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:navigation/second_route.dart';void main() {runApp(MaterialApp.router(title: '导航', routerConfig: _router));
}// 1.定义路由信息
final _router = GoRouter(routes: [GoRoute(path: '/', builder: (context, state) => const FirstScreen()),GoRoute(path: '/second', builder: (context, state) => const SecondRoute()),],
);class FirstScreen extends StatelessWidget {const FirstScreen({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('第一个界面')),body: Center(child: ElevatedButton(child: const Text('使用go_router跳转'),// 2.指定跳转界面onPressed: () => context.go('/second'),),),);}
}

import "package:flutter/cupertino.dart";
import "package:flutter/material.dart";
import "package:go_router/go_router.dart";class SecondRoute extends StatelessWidget {const SecondRoute({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("第二个路由页面")),body: Center(child: CupertinoButton(onPressed: () {// 3. 点击返回根目录context.go('/');},child: const Text("返回"),),),);}
}

导航到其它应用

在UIKit中使用URL scheme来实现。Flutter可以使用类似 url_launcher 的插件来实现。

	Android	iOS	Linux	macOS	Web	Windows
支持	SDK 16+	12.0+	Any	10.14+	Any	Window 10+

$ flutter pub add url_launcher

加载Web界面

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';final Uri _url = Uri.parse('https://flutter.cn');void main() => runApp(const MaterialApp(home: Material(child: Center(child: ElevatedButton(onPressed: _launchUrl,child: Text('Show Flutter homepage'),),),),),);Future<void> _launchUrl() async {if (!await launchUrl(_url)) {throw Exception('Could not launch $_url');}
}

加载其它应用

在Info.plist添加允许打开短信和电话的配置

<key>LSApplicationQueriesSchemes</key>
<array><string>sms</string><string>tel</string>
</array>

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';final Uri _url = Uri.parse('tel://10000');void main() => runApp(const MaterialApp(home: Material(child: Center(child: ElevatedButton(// 1. 绑定对应方法onPressed: _launchUrl,child: Text('Show Flutter homepage'),),),),),
);Future<void> _launchUrl() async {// 2. 确认是否能打开对应url,已添加到plist文件if (await canLaunchUrl(_url)) {if (!await launchUrl(_url)) {throw Exception('Could not launch $_url');}}
}