我是Flutter的新手,试图根据上一个屏幕上被点击的卡片练习名称动态改变输入屏幕的appBar标题。
例如,如果用户点击Barbell Row卡(见下面的图片链接)--输入屏幕appBar标题将变成Barbell Row。
怎样才能实现这个功能呢?
谢谢你
这是一个很好的传递数据的方法
class PreviousScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: () {
navigate(context, "Hello");
},
child: Text("Hello"),
),
RaisedButton(
onPressed: () {
navigate(context, "Bar Bell");
},
child: Text("Bar bell"),
)
],
),
);
}
void navigate(BuildContext context, String text){
Navigator.push(context, MaterialPageRoute(builder: (context) => SignleCardInputScreen(text: text,)));
}
}
class SignleCardInputScreen extends StatelessWidget {
final String text;
const SignleCardInputScreen({Key key, this.text}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(text),
),
);
}
}
最好的做法是创建一个能接受字符串的navigate方法,因为你会不止一次地这样做。
试试下面的代码。它工作得非常好。
第一个屏幕
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'First Screen'
),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => SecondScreen('Babel Row'),
),
);
},
child: Card(
child: Container(
height: 100,
width: MediaQuery.of(context).size.width,
child: Center(child: Text('Babel Row')),
),
),
),
SizedBox(height: 20,),
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => SecondScreen('Bench Press'),
),
);
},
child: Card(
child: Container(
height: 100,
width: MediaQuery.of(context).size.width,
child: Center(child: Text('Bench Press')),
),
),
),
],
),
),
);
}
}
第二屏幕
class SecondScreen extends StatelessWidget {
// define a string variable
final String name;
// create a constructor
const SecondScreen(this.name);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// set the app bar title here
title: Text(name),
),
body: Center(
child: Text(
name,
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w500,
),
),
),
);
}
}
输出。
希望能帮到你