如何将HomePage页面中的绿色字符串发送到ContaPage页面?
我认为它是如此Navigator.of(context).pushNamed('/conta/green');
但我不知道如何进入页面conta
green
字符串
因此,通过获取字符串的值,我可以更改appBar
中ContaPage
的backgroundColor的颜色。
main.dart
import "package:flutter/material.dart";
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "MyApp",
home: new HomePage(),
routes: <String, WidgetBuilder> {
'/home': (BuildContext context) => new HomePage(),
'/conta': (BuildContext context) => new ContaPage()
},
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) => new Scaffold(
appBar: new AppBar(
backgroundColor: new Color(0xFF26C6DA),
),
body: new ListView (
children: <Widget>[
new FlatButton(
child: new Text("ok"),
textColor: new Color(0xFF66BB6A),
onPressed: () {
Navigator.of(context).pushNamed('/conta');
},
),
],
)
);
}
class ContaPage extends StatelessWidget {
@override
Widget build(BuildContext context) => new Scaffold(
appBar: new AppBar(
backgroundColor: new Color(0xFF26C6DA),
),
);
}
您可以根据需要创建MaterialPageRoute
并将参数传递给ContaPage
构造函数。
import "package:flutter/material.dart";
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "MyApp",
home: new HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) => new Scaffold(
appBar: new AppBar(
backgroundColor: new Color(0xFF26C6DA),
),
body: new ListView (
children: <Widget>[
new FlatButton(
child: new Text("ok"),
textColor: new Color(0xFF66BB6A),
onPressed: () {
Navigator.push(context, new MaterialPageRoute(
builder: (BuildContext context) => new ContaPage(new Color(0xFF66BB6A)),
));
},
),
],
)
);
}
class ContaPage extends StatelessWidget {
ContaPage(this.color);
final Color color;
@override
Widget build(BuildContext context) => new Scaffold(
appBar: new AppBar(
backgroundColor: color,
),
);
}
您总是可以在HomePage中创建一个绿色的静态变量String作为它的值,并在创建新的ContaPage时在路径中使用该值。像这样的东西:
import "package:flutter/material.dart";
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "MyApp",
home: new HomePage(),
routes: <String, WidgetBuilder> {
'/home': (BuildContext context) => new HomePage(),
'/conta': (BuildContext context) => new ContaPage(HomePage.color)
},
);
}
}
class HomePage extends StatelessWidget {
static String color = "green";
@override
Widget build(BuildContext context) => new Scaffold(
appBar: new AppBar(
backgroundColor: new Color(0xFF26C6DA),
),
body: new ListView (
children: <Widget>[
new FlatButton(
child: new Text("ok"),
textColor: new Color(0xFF66BB6A),
onPressed: () {
Navigator.of(context).pushNamed('/conta');
},
),
],
)
);
}
class ContaPage extends StatelessWidget {
ContaPage({this.color})
String color;
@override
Widget build(BuildContext context) => new Scaffold(
appBar: new AppBar(
backgroundColor: new Color(0xFF26C6DA),
),
);
}
可能有更好的解决方案,但这首先突然出现在我脑海中:)
Flutter网站上已经提供了一个更好的解决方案,如何使用:
参数
class ScreenArguments {
final String title;
final String message;
ScreenArguments(this.title, this.message);
}
提取参数
class ExtractArgumentsScreen extends StatelessWidget {
static const routeName = '/extractArguments';
@override
Widget build(BuildContext context) {
final ScreenArguments args = ModalRoute.of(context).settings.arguments;
return Scaffold(
appBar: AppBar(
title: Text(args.title),
),
body: Center(
child: Text(args.message),
),
);
}
}
注册路线
MaterialApp(
//...
routes: {
ExtractArgumentsScreen.routeName: (context) => ExtractArgumentsScreen(),
//...
},
);
导航
Navigator.pushNamed(
context,
ExtractArgumentsScreen.routeName,
arguments: ScreenArguments(
'Extract Arguments Screen',
'This message is extracted in the build method.',
),
);
代码从link复制。
这有点晚了,但它可能对某人有所帮助。我认为最好的方法是使用颤振路线项目fluro。
在全球定义一些:
final router = Router();
之后定义路线
var contaHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
return ContaPage(color: params["color"][0]);
});
void defineRoutes(Router router) {
router.define("/conta/:color", handler: contaHandler);
}
在onGenerateRoute
中设置MaterialApp
以使用路由器生成器:
new MaterialApp (
...
nGenerateRoute: router.generator
...
),
你必须在依赖项中添加fluro:
dependencies:
fluro: "^1.3.4"
并通过以下或IDE方式进行包升级。
flutter packages upgrade