[Flutter]页面跳转和传值
在Flutter中,页面跳转和传值可以通过多种方式实现,以下是两种常用的方式:
- 使用
Navigator
进行页面跳转,并通过构造函数传递简单的值。
// 第二个页面
class SecondPage extends StatelessWidget {
final String data;
SecondPage(this.data);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('第二个页面'),
),
body: Center(
child: Text(data),
),
);
}
}
// 第一个页面
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('第一个页面'),
),
body: Center(
child: RaisedButton(
child: Text('跳转到第二个页面'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage('Hello from FirstPage'),
),
);
},
),
),
);
}
}
- 使用
InheritedWidget
或者Provider
等状态管理方案进行全局状态管理和传递复杂的数据。
// 使用InheritedWidget
class DataModel extends InheritedWidget {
final String data;
DataModel({Key key, @required this.data, Widget child}) : super(key: key, child: child);
static DataModel of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<DataModel>();
}
@override
bool updateShouldNotify(DataModel oldWidget) {
return data != oldWidget.data;
}
}
// 第二个页面
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DataModel(
data: 'Hello from FirstPage',
child: Scaffold(
appBar: AppBar(
title: Text('第二个页面'),
),
body: Center(
child: Text(DataModel.of(context).data),
),
),
);
}
}
// 第一个页面
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('第一个页面'),
),
body: Center(
child: RaisedButton(
child: Text('跳转到第二个页面'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);
},
),
),
);
}
}
这两种方式分别适用于传递简单数据和复杂数据,以及全局状态管理。根据具体场景选择合适的方法。
评论已关闭