编写一个自己的listview的demo
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class FlistViewPush extends StatefulWidget {
@override
__FlistViewPushState createState() => __FlistViewPushState();
}
class __FlistViewPushState extends State<FlistViewPush> {
var functionLists = [];
@override
void initState() {
// TODO: implement initState
super.initState();
initData();
}
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.lightBlue,
title: Text(" 目录"),
),
body: Center(
child: ListView.builder(
padding: const EdgeInsets.all(15.0),
itemCount: functionLists.length,
itemBuilder: (context, index) {
var func = functionLists[index];
return ListTile(
contentPadding: const EdgeInsets.all(10.0),
title: Text(
"${func["name"]}",
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
subtitle: Text(
"${func["desc"]}",
style: TextStyle(
fontSize: 15,
color: Colors.grey,
),
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return FlistViewPush();
}),
);
},
);
},
),
),
),
);
}
void initData() {
functionLists.add({"name": "Text", "desc": "文本显示和样式。"});
functionLists.add({"name": "Assets、图片、Icons", "desc": "管理assets, 显示图片和Icon。"});
print(functionLists);
//更新状态
setState(() {
});
}
}
2.页面传值：
2.1简单的在定义的dart文件写传参类
class FlistViewPush extends StatefulWidget {
String data = '';
FlistViewPush({this.data='null'});
@override
__FlistViewPushState createState() => __FlistViewPushState(data: data);
}
class __FlistViewPushState extends State<FlistViewPush> {
var functionLists = [];
String data = '';
var da;
__FlistViewPushState({this.data = 'null'});
@override
void initState() {
// TODO: implement initState
super.initState();
// da = ModalRoute.of(context)?.settings.arguments;
initData();
}
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.lightBlue,
title: Text(" 目录"),
),
body: Center(
child: ListView.builder(
padding: const EdgeInsets.all(15.0),
itemCount: functionLists.length,
itemBuilder: (context, index) {
var func = functionLists[index];
return ListTile(
contentPadding: const EdgeInsets.all(10.0),
title: Text(
"${func["name"]}",
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
subtitle: Text(
"${func["desc"]}",
style: TextStyle(
fontSize: 15,
color: Colors.grey,
),
),
onTap: () {
// Navigator.push(
// context,
// MaterialPageRoute(builder: (context) {
// return FlistViewPush();
// }),
// );
Navigator.pop(context);
},
);
},
),
),
),
);
}
void initData() {
functionLists.add({"name": "Text", "desc": "文本显示和样式。"});
functionLists.add({"name": "Assets、图片、Icons", "desc": "管理assets, 显示图片和Icon。"});
print(functionLists);
print(data);
// print(da);
//更新状态
setState(() {
});
}
}
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return FlistViewPush(data: '测试',);
},
),
2.2 需要分离路由，pushNamed传参数
分离路由：
import 'package:flutter/material.dart';
import '../FlistViewDemo/FlistView.dart';
import '../FlistViewDemo/FlistViewPushPage.dart';
import '../FlistViewDemo/MYDetailPage.dart';
import '../FlistViewDemo/MYUnknownPage.dart';
import '../MYHomePage.dart';
class MYRouter {
static final Map<String, WidgetBuilder> routes = {
RandomWords.routeName: (ctx) =>RandomWords(), // 记得在页面里面 声明静态变量 static const String routeName = "/";
FlistViewPush.routeName: (ctx) => FlistViewPush(),// 声明静态变量 static const String routeName = "/about";
FMListVC.routeName: (ctx) => FMListVC()// 声明静态变量 static const String routeName = "/about";
};
static final String initialRoute = RandomWords.routeName;
static final RouteFactory generateRoute = (settings) {
if (settings.name == MYDetailPage.routeName) {
return MaterialPageRoute(
builder: (ctx) {
return MYDetailPage(settings.arguments.toString());
}
);
}
return null;
};
static final RouteFactory unknownRoute = (settings) {
return MaterialPageRoute(
builder: (ctx) {
return MYUnknownPage();
}
);
};
}
RandomWords、FlistViewPush、FMListVC修改为自己的dart
MYDetailPage、MYUnknownPage修改为自己的dart
其中,routes(map对象):是项目的各个页面路由配置
initialRoute:是项目的根路由，初始化的时候最先展示的页面
onGenerateRoute(RouteFactory类型函数):路由拦截判断，可以对某些指定的路由进行拦截，有时候不想改变页面结构，但是又想要求跳转到这个页面的时候可以用到，比如，页面设定了传参你进行跳转的时候。
onUnknownRoute(RouteFactory类型函数):在路由匹配不到的时候用到，一般都返回一个统一的错误页面或404页面
MYUnknownPage.dart文件：
import 'package:flutter/material.dart';
class MYUnknownPage extends StatefulWidget {
static const String routeName = "/mYUnknownPage";
@override
FMHomeState createState() => FMHomeState();
}
class FMHomeState extends State<MYUnknownPage> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.lightBlue,
title: Text(" 404"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children:<Widget> [
Text('404')
],
),
),
),
);
}
}
在主入口文件main.dart中尽量是做到简洁
void main() => runApp(
MyApp()
);
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Startup Name Generator',
theme: ThemeData(
primaryColor: Colors.white,
),
routes: MYRouter.routes,
initialRoute: MYRouter.initialRoute,
onGenerateRoute: MYRouter.generateRoute,
onUnknownRoute: MYRouter.unknownRoute,
);
}
}
跳转传入参数
Navigator.pushNamed(context, "/flistViewPush",arguments: {
"id":102,
});
接收参数
第一种在initState拿参数可以采用
Future.delayed(Duration.zero, () {
Object? message = ModalRoute.of(context)?.settings.arguments ;
print( message);
});
第二种 build中取参数
Object? message = ModalRoute.of(context)?.settings.arguments ;
print( message);
