Routage dans Flutter
De manière générale, le routage dans Flutter consiste à sauter de page et la navigation par routage est gérée via le composant Navigator de Flutter. Et il fournit une méthode pour gérer la pile, telle que : Navigator.pushet Navigator.pop
Flutter propose deux façons de configurer les sauts de routage : 1. Routage de base 2. Routage nommé
L'utilisation du routage de base dans Flutter
Par exemple, nous devons bottonaccéder à la page après avoir cliqué sur
RaisedButton(
onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(
builder:(context){
return SearchPage();//返回需要启动的页面
}
)
);
},
),
Si nous devons quitter la page actuelle
//悬浮button
floatingActionButton: FloatingActionButton(
child: Text('返回'),
onPressed: (){
Navigator.of(context).pop(); //退出当前页面
},
),
Utilisez Navigatorla page pour transmettre la valeur
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _HomePageState();
}
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RaisedButton(
child: Text('跳转到搜索页面'),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => SeachPage(),
));
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
),
SizedBox(
height: 10,
),
RaisedButton(
child: Text('跳转至表单页面，并传值'),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context)=>FromPage(title: '这是传递的title') //因为此处向构造参数值传递，也可以通过get set去传递值
)
);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
)
],
);
}
}
class FromPage extends StatelessWidget{
String title;
FromPage({this.title='默认From'});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title), //在此处，将传递的数据进行引用
),
body: ListView(
children: <Widget>[
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
],
),
);
}
}
Utilisation d'itinéraires nommés dans Flutter
Lorsque nous naviguons avec des itinéraires nommés, nous devons d'abord déclarer les itinéraires. Autrement dit, nous voulons configurer le routage MaterialAppdansroutes
Il est à noter que la valeur des itinéraires est
Map<String, WidgetBuilder>de type
main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Tabs(),
routes: {
'/form':(context)=>FromPage(),//表单页面
'/Seach':(context)=>SeachPage(),//搜索页面
},
);
}
}
Lors du saut, il suffit d'effectuer de telles opérations
RaisedButton(
child: Text('跳转到搜索页面'),
onPressed: () {
Navigator.pushNamed(context, '/Seach');//这里的第二个参数就是我们的routes的Map集合中的key即可。
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
),
Passage par valeur pour les itinéraires nommés
Tout d'abord, nous devons créer le nôtre Roustes.dartpour la gestion du routage
final routes={
'/':(context)=>Tabs(),
'/search':(context,{arguments})=>SeachPage(arguments:arguments),
"/from":(context)=>FromPage(),
};
//固定写法
var onGenerateRoute=(RouteSettings settings) {
// 统一处理
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;
}
}
};
onGenerateRouteIl s'agit d'une manière fixe d'écrire les paramètres des routes nommées. Lors du passage de paramètres dans des routes nommées, nos paramètres de construction de page doivent être modifiés.
MaterialAppIl y a un attribut dans onGenerateRoute, qui est ce que nous définissons onGenerateRouteet transmettons.
main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
// home: Tabs(),等同于 initialRoute: '/',
initialRoute: './',
onGenerateRoute: onGenerateRoute,
);
}
}
Par exemple, notre SeachPagepage doit ajouter un paramètre facultatif « arguments »
class SeachPage extends StatelessWidget{
final arguments;
SeachPage({this.arguments});
}
Alors, comment devons-nous transmettre des paramètres ? Supposons que nous transmettions des paramètres à la page
dans notre page ,HomePageSeachPage
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _HomePageState();
}
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RaisedButton(
child: Text('跳转到搜索页面'),
onPressed: () { //此处进行参数传递,arguments
Navigator.pushNamed("/search",arguments: {
"id":"213123"
});
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
),
SizedBox(
height: 10,
),
RaisedButton(
child: Text('跳转至表单页面，并传值'),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context)=>FromPage(title: '这是传递的title',)
)
);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
)
],
);
}
}
SeachPageGérer les paramètres sur la page
class SeachPage extends StatelessWidget{
final arguments;
SeachPage({this.arguments});
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
//悬浮button
floatingActionButton: FloatingActionButton(
child: Text('返回'),
onPressed: (){
Navigator.of(context).pop();
},
),
appBar: AppBar(
title: Text('搜索'),
),
body: Text("搜索页面区域${arguments['id']}")//进行参数的使用
);
}
}