1. 两分钟带你掌握Flutter的路由与导航

              Posted by 本的秘密博客 on March 31, 2019

              StatelessWidget-StatefulWidget

              为大家倾力打造的课程《Flutter从入门到进阶-实战携程网App》上线了,点我Get!!!

              在这篇文章中,将带着大家一起认识什么是Flutter的路由与导航如何完成不同页面跳转?如何获取路由跳转的返回记过?,以及如何跳转到其他APP?

              首先我们来学习在Flutter中如何实现不同页面跳转(导航)?

              在Flutter中如何实现不同页面跳转(导航)?

              Android:

              要在Flutter中切换屏幕,我们可以访问路由以绘制新的Widget。 管理多个屏幕有两个核心概念和类:Route 和 Navigator。Route是应用程序的“屏幕”或“页面”的抽象(可以认为是Activity), Navigator是管理Route的Widget。Navigator可以通过pushpop route以实现页面切换。

              和Android相似,我们可以在AndroidManifest.xml中声明Activities,在Flutter中,我们可以将具有指定Route的Map传递到顶层MaterialApp实例,但这不是必须的。

              iOS:

              在 iOS 中,可以使用管理了 view controller 栈的 UINavigationController 来在不同的 view controller 之间跳转。

              React Native:

              在React Native中,可以使用react-navigation来实现页面之间的导航。

              Flutter 也有类似的实现,使用了 NavigatorRoutes。一个路由是 App 中“屏幕”或“页面”的抽象,而一个 Navigator 是管理多个路由的 widget 。你可以粗略地把一个路由对应到一个 UIViewController。Navigator 的工作原理和 iOS 中 UINavigationController 非常相似,当你想跳转到新页面或者从新页面返回时,它可以 push() 和 pop() 路由。

              在Flutter中,有两个主要的widget用于在页面之间导航:

              • Route 是一个应用程序抽象的屏幕或页面;
              • Navigator 是一个管理路由的widget;

              以上两种widget对应Flutter中实现页面导航的有两种选择:

              • 具体指定一个由路由名构成的 Map。(MaterialApp)
              • 直接跳转到一个路由。(WidgetApp)

              下面是构建一个 Map 的例子:

              void main() {
                runApp(MaterialApp(
                  home: MyAppHome(), // becomes the route named '/'
                  routes: <String, WidgetBuilder> {
                    '/a': (BuildContext context) => MyPage(title: 'page A'),
                    '/b': (BuildContext context) => MyPage(title: 'page B'),
                    '/c': (BuildContext context) => MyPage(title: 'page C'),
                  },
                ));
              }
              

              以上代码片段的完整部分可以在课程源码中查找。

              通过把路由的名字 push 给一个 Navigator 来跳转:

              Navigator.of(context).pushNamed('/b');
              

              您还可以使用Navigatorpush方法,该方法将给定route添加到导航器的历史记录中。 在以下示例中,MaterialPageRoute widget是一种模版路由,它根据平台自适应替换整个页面。 在以下示例中,widget是一种模版路由,它使用平台自适应替换整个页面。它需要一个WidgetBuilder作为必需参数。

              Navigator.push(context, MaterialPageRoute(builder: (BuildContext context)
               => UsualNavscreen()));
              

              以上代码片段的完整部分可以在课程源码中查找。

              如何获取路由跳转返回的结果?

              在Android中有startActivityForResult来获取跳转页面后返回的结果,那么在FlutterNavigator 类不仅用来处理 Flutter 中的路由,还被用来获取你刚 push 到栈中的路由返回的结果。通过 await等待路由返回的结果来达到这点。

              举个例子,要跳转到“位置”路由来让用户选择一个地点,你可能要这么做:

              Map coordinates = await Navigator.of(context).pushNamed('/location');
              

              之后,在 location 路由中,一旦用户选择了地点,携带结果一起 pop() 出栈:

              Navigator.of(context).pop({"lat":43.821757,"long":-79.226392});
              

              以上代码片段的完整部分可以在课程源码中查找。

              如何在Flutter中处理来自外部应用程序传入的Intents?(Android)

              Flutter可以通过直接与Android层通信并请求共享的数据来处理来自Android的Intents

              在这个例子中,我们注册文本共享Intent,所以其他应用程序可以共享文本到我们的Flutter应用程序

              这个应用程序的基本流程是我们首先处理Android端的共享文本数据,然后等待Flutter请求数据,然后通过MethodChannel发送。

              如果你对MethodChannel还不熟悉的话可以通过第8章 Flutter进阶提升:Flutter混合开发教程进行详细的学习

              首先在在AndroidManifest.xml中注册我们想要处理的Intent

              <activity
                android:name=".MainActivity"
                android:launchMode="singleTop"
                android:theme="@style/LaunchTheme"
                android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection"
                android:hardwareAccelerated="true"
                android:windowSoftInputMode="adjustResize">
                <!-- ... -->
                <intent-filter>
                  <action android:name="android.intent.action.SEND" />
                  <category android:name="android.intent.category.DEFAULT" />
                  <data android:mimeType="text/plain" />
                </intent-filter>
              </activity>
              

              以上代码片段的完整部分可以在课程源码中查找。

              然后,在MainActivity中,您可以处理intent,一旦我们从intent中获得共享文本数据,我们就会持有它,直到Flutter在完成准备就绪时请求它。

              ...
              
              public class MainActivity extends FlutterActivity {
              
                private String sharedText;
              
                @Override
                protected void onCreate(Bundle savedInstanceState) {
                  super.onCreate(savedInstanceState);
                  GeneratedPluginRegistrant.registerWith(this);
                  Intent intent = getIntent();
                  String action = intent.getAction();
                  String type = intent.getType();
              
                  if (Intent.ACTION_SEND.equals(action) && type != null) {
                    if ("text/plain".equals(type)) {
                      handleSendText(intent); // Handle text being sent
                    }
                  }
              
                  new MethodChannel(getFlutterView(), "app.channel.shared.data").setMethodCallHandler(
                    new MethodCallHandler() {
                      @Override
                      public void onMethodCall(MethodCall call, MethodChannel.Result result) {
                        if (call.method.contentEquals("getSharedText")) {
                          result.success(sharedText);
                          sharedText = null;
                        }
                      }
                    });
                }
              
                void handleSendText(Intent intent) {
                  sharedText = intent.getStringExtra(Intent.EXTRA_TEXT);
                }
              }
              

              以上代码片段的完整部分可以在课程源码中查找。

              最后,在Flutter中,您可以在渲染Flutter视图时请求数据。

              ...
              class SampleAppPage extends StatefulWidget {
                SampleAppPage({Key key}) : super(key: key);
              
                @override
                _SampleAppPageState createState() => _SampleAppPageState();
              }
              
              class _SampleAppPageState extends State<SampleAppPage> {
                static const platform = const MethodChannel('app.channel.shared.data');
                String dataShared = "No data";
              
                @override
                void initState() {
                  super.initState();
                  getSharedText();
                }
              
                @override
                Widget build(BuildContext context) {
                  return Scaffold(body: Center(child: Text(dataShared)));
                }
              
                getSharedText() async {
                  var sharedData = await platform.invokeMethod("getSharedText");
                  if (sharedData != null) {
                    setState(() {
                      dataShared = sharedData;
                    });
                  }
                }
              }
              

              以上代码片段的完整部分可以在课程源码中查找。

              怎么跳转到其他 App?

              在 iOS 中,要跳转到其他 App,你需要一个特定的 URL Scheme。对系统级别的 App 来说,这个 scheme 取决于 App。为了在 Flutter 中实现这个功能,你可以创建一个原生平台的整合层,或者使用现有的 plugin,例如 url_launcher

              大家可以通过《路由、Navigator与页面导航开发指南》来学习Flutter页面导航与路由的更多技巧和实战经验。

              未完待续

              参考



              16kou fushipifaw 1sysb 155217 293182 618632 229187 266793 782276 177152 598613 536683 658753 218325 896853 596113 675327 021sh6 278857 0551tt 0752cy 022ct ahcnjt 52lpw