Flutter--路由(页面跳转)
  45VoiS2mj7n5 2023年11月02日 36 0


基本路由的使用

import 'package:flutter/material.dart';
import 'package:flutter_app/pages/info.dart'; // 将页面引入

class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text("信息页面"),
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => InfoPage()));
}),
],
);
}
}
import 'package:flutter/material.dart';

class InfoPage extends StatefulWidget {
InfoPage({Key key}) : super(key: key);
_InfoPageState createState() => _InfoPageState();
}

class _InfoPageState extends State<InfoPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("信息"),
),
body: Text("信息"),
);
}
}

跳转传值

import 'package:flutter/material.dart';
import 'package:flutter_app/pages/Form.dart';

class MinePage extends StatefulWidget {
MinePage({Key key}) : super(key: key);
_MinePageState createState() => _MinePageState();
}

class _MinePageState extends State<MinePage> {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text("跳转传值"),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context)=>FormPage(title: '跳转传值',)
)
);
},
)
],
);
}
}
import 'package:flutter/material.dart';

class FormPage extends StatelessWidget {

String title;
FormPage({this.title="表单"});

@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Text('返回'),
onPressed: (){
Navigator.of(context).pop();
},
),
appBar: AppBar(
title: Text(this.title),
),
);
}
}

Flutter--路由(页面跳转)_Text


Flutter--路由(页面跳转)_flutter_02

Flutter中的命名路由

import 'package:flutter/material.dart';
import 'res/listData.dart';
import 'pages/tabs.dart';
import 'package:flutter_app/pages/Form.dart';
import 'package:flutter_app/pages/info.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Tabs(),
// 必须在MaterialApp下进行路由配置,命名路由
routes: {
'/form': (context) => FormPage(),
'/info': (context) => InfoPage()},
);
}
}
  • 路由跳转
import 'package:flutter/material.dart';
// 无需引入相关页面可以直接使用Navigator.pushNamed进行跳转

class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text("信息页面"),
onPressed: () {
// 路由跳转
Navigator.pushNamed(context, '/info');
}),
],
);
}
}

使用官方路由配置方式对命名路由跳转进行改写

  • 配置路由以及路由跳转方法
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/Form.dart';
import 'package:flutter_app/pages/info.dart';
import 'package:flutter_app/pages/tabs.dart';

// 增加要跳转的页面只需要在此处添加
final routes = {
// 配置根路由
'/': (context, {argumment}) => Tabs(),
// 配置需要跳转的页面
'/form': (context) => FormPage(),
'/info': (context, {arguments}) => InfoPage(arguments: arguments),
};

// 配置路由, 在官方代码上的优化,为固定写法
var onGenerateRoute = (RouteSettings settings) {
// ignore: missing_return
final String name = settings.name;
final Function pageContentBuilder = routes[name];
if (pageContentBuilder != null) {
// 路由配置不为空
if (settings.arguments != null) {
final Route route = MaterialPageRoute(
// 进行跳转,传参
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments));
return route;
} else {
final Route route =
MaterialPageRoute(builder: (context) => pageContentBuilder(context));
return route;
}
}
};
  • 初始化根路由
import 'package:flutter/material.dart';
import 'pages/tabs.dart';
import 'package:flutter_app/routes/routes.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Tabs(),
// 初始化根路由
initialRoute: '/',
onGenerateRoute: onGenerateRoute);
}
}
  • 进行页面跳转和参数接受
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text("信息页面"),
onPressed: () {
// 路由跳转
Navigator.pushNamed(context, '/info', arguments: {"id": 123});
}),
],
);
}
}


import 'package:flutter/material.dart';

class InfoPage extends StatelessWidget {
final arguments;
InfoPage({this.arguments});


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("信息"),
),
body: Text("路由传值${arguments != null ? arguments["id"] : '0'}"),
);
}
}

Flutter--路由(页面跳转)_dart_03


Flutter--路由(页面跳转)_flutter_04


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  b1UHV4WKBb2S   2023年11月13日   34   0   0 裁剪ideflutter
  b1UHV4WKBb2S   2023年11月13日   27   0   0 flutterDart
45VoiS2mj7n5