Flutter路由导航(2):使用路由页面进行跳转
一、程序入口
main.dart
// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';
import 'widgets/routes.dart'; // 添加路由页面
main(List<String> args) {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo', // 标题
debugShowCheckedModeBanner: false, // 不显示debug标识
theme: ThemeData(
// 主题
primarySwatch: Colors.blue,
),
routes: routes, // 指定路由页面
initialRoute: 'home', // 指定路由导航的首页名称
);
}
}
二、路由页面创建
在 lib 目录下创建 widgets 目录,然后在 widgets 目录下创建 routes.dart 文件。
routes.dart
import 'package:flutter/material.dart';
import 'home.dart';
import 'textDemo.dart';
import 'listViewDemo.dart';
// 路由导航页面
Map<String, WidgetBuilder> routes = {
'home': (context) => const Home(),
'textDemo': (context) => const TextDemo(),
'listViewDemo': (context) => const ListViewDemo(),
};
三、主页面创建
home.dart
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const Scaffold(
body: MyHomeBody(),
);
}
}
class MyHomeBody extends StatelessWidget {
const MyHomeBody({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
flex: 1,
child: Container(color: Colors.transparent, width: 200),
),
// 按钮1
SizedBox(
height: 80,
width: 200,
child: ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, 'textDemo'); // 路由跳转到textDemo页面
},
child: const Text("textDemo"),
),
),
Expanded(
flex: 1,
child: Container(color: Colors.transparent, width: 200),
),
// 按钮2
SizedBox(
height: 80,
width: 200,
child: ElevatedButton(
onPressed: () {
Navigator.pushNamed(
context, 'listViewDemo'); // 路由跳转到listViewDemo页面
},
child: const Text("listViewDemo"),
),
),
Expanded(
flex: 1,
child: Container(color: Colors.transparent, width: 200),
),
],
);
}
}
四、页面1(文本页面)
textDemo.dart
// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';
class TextDemo extends StatelessWidget {
const TextDemo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("textDemo"),
),
body: MyHomeBody(),
);
}
}
class MyHomeBody extends StatelessWidget {
const MyHomeBody({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Text(
"《定风波》 苏轼 \n莫听穿林打叶声,何妨吟啸且徐行。\n竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生。",
style: TextStyle(fontSize: 20, color: Colors.purple),
);
}
}
五、页面2(列表页面)
listViewDemo.dart
// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';
class ListViewDemo extends StatelessWidget {
const ListViewDemo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('listViewDemo'),
),
body: MyHomeBody(),
);
}
}
class MyHomeBody extends StatelessWidget {
MyHomeBody({Key? key}) : super(key: key);
final TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.redAccent);
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("人的一切痛苦,本质上都是对自己无能的愤怒。", style: textStyle),
),
Padding(
padding: const EdgeInsets.all(8.0),
child:
Text("人活在世界上,不可以有偏差;而且多少要费点劲儿,才能把自己保持到理性的轨道上。", style: textStyle),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("我活在世上,无非想要明白些道理,遇见些有趣的事。", style: textStyle),
)
],
);
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库