flutter - 如何将数据从一个屏幕转移到另一个屏幕并用这些数据创建一些东西？
问题描述
我在我的主屏幕上有一个位置列表和一个浮动按钮，当它被按下时它会打开一个表单，并且用户输入一个参数以在主屏幕上创建一个新位置但是当我按下表单上的提交按钮时它需要我到主屏幕并且没有添加位置我希望有人可以帮助
这是 main.dart
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:my_locations/models/Location.dart';
import 'package:my_locations/data/locations.dart';
import 'package:my_locations/models/MainScreen.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root
// of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "My Locations",
theme: new ThemeData(primarySwatch: Colors.green),
debugShowCheckedModeBanner: false,
home: new MainScreen());
}
}
// ignore: must_be_immutable
这是主屏幕
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:my_locations/models/Location.dart';
import 'package:my_locations/data/locations.dart';
import 'package:my_locations/models/Details.dart';
import 'package:my_locations/models/MyForm.dart';
class MainScreen extends StatelessWidget {
List<Location> locations = [
Location(
id: 1,
name: "The Egyptian Museum",
description:
"The Museum of Egyptian Antiquities, known commonly as the Egyptian Museum or Museum
of Cairo, in Cairo",
theme: "egyptian heritage",
imageUrl:
"https://www.mazadatours.com/wp-content/uploads/2017/01/Egyptian-Museum-in-
Cairo2.jpg",
locationUrl:"https://www.google.com/maps/place/The+Great+Pyramid+of+Giza/@29.9792391,31.1320132,17z/data=!3m1!4b1!4m5!3m4!1s0x14584587ac8f291b:0x810c2f3fa2a52424!8m2!3d29.9792345!4d31.1342019") ,
Location(
id: 2,
name: "The Great Pyramid of Giza",
description:
"The Great Pyramid of Giza ",
theme: "pharaonic",
imageUrl:
"https://upload.wikimedia.org/wikipedia/commons/e/e3/Kheops-Pyramid.jpg",
locationUrl:
"https://www.google.com/maps/place/The+Great+Pyramid+of+Giza/@29.9792391,31.1320132,17z/data=!3m1!4b1!4m5!3m4!1s0x14584587ac8f291b:0x810c2f3fa2a52424!8m2!3d29.9792345!4d31.1342019"),
Location(
id: 3,
name: "Abu Simbel temples",
description:
"The Abu Simbel temples are two massive rock-cut temples at Abu Simbel",
theme: "pharaonic",
imageUrl:
"https://www.worldatlas.com/upload/4f/c6/2f/shutterstock-397432201.jpg",
locationUrl:
"https://www.google.com/maps/place/Abu+Simbel+Temples/@22.3372368,31.6236103,17z/data=!3m1!4b1!4m5!3m4!1s0x143aa988b126055b:0xa7d3cc6618f898d2!8m2!3d22.3372319!4d31.625799"),
Location(
id: 4,
name: "Philae",
description:
"Philae is an island in the reservoir of the Aswan Low Dam, downstream of the Aswan Dam",
theme: "pharaonic",
imageUrl:
"https://4.bp.blogspot.com/-6RX--BMe-PA/UHAa8fRiKaI/AAAAAAAABXA/5v9KcZ3HCvY/s1600/IMGP2321.jpg",
locationUrl:
"https://www.google.com/maps/place/Philae/@24.0134126,32.8678317,15z/data=!3m1!4b1!4m5!3m4!1s0x143662bfbe299cbf:0xd571ef8bf3780147!8m2!3d24.01266!4d32.8775404"),
Location(
id: 5,
name: "Luxor Temple",
description:
"The Luxor Temple",
theme: "pharaonic",
imageUrl:
"https://lp-cms-production.imgix.net/2019-06/19e21d328924e00b3d35b92fc9f380ac-luxor-temple.jpg?auto=compress&crop=center&fit=crop&format=auto&h=416&w=960",
locationUrl:
"https://www.google.com/maps/place/Luxor+Temple/@25.6995068,32.6368622,17z/data=!3m1!4b1!4m5!3m4!1s0x144915c41edadf61:0x7693895c346c7d81!8m2!3d25.699502!4d32.6390509")
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("My Locations")),
body: ListView.builder(
itemCount: locations.length,
itemBuilder: (BuildContext context, int index) {
return Container(
child: Card(
child: Wrap(
children: <Widget>[
Image.network(locations[index].imageUrl),
ListTile(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) =>
Details(locations[index].id),
),
);
},
title: Text(locations[index].name),
subtitle: Text(locations[index].theme),
),
],
),
),
);
}),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.push(
context, new MaterialPageRoute(builder: (context) => MyForm()));
},
));
}
}
这是详细信息页面
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:my_locations/models/Location.dart';
import 'package:my_locations/data/locations.dart';
import 'package:my_locations/models/MainScreen.dart';
class Details extends StatelessWidget {
int i = 0;
Details(int i) {
this.i = i - 1;
}
List<Location> locations = [
Location(
id: 1,
name: "The Egyptian Museum",
description:
"The Museum of Egyptian Antiquities",
theme: "egyptian heritage",
imageUrl:
"https://www.mazadatours.com/wp-content/uploads/2017/01/Egyptian-Museum-in-Cairo2.jpg",
locationUrl:
'https://www.google.com/maps/place/The+Egyptian+Museum/@30.0209745,31.1411905,13z/data=!4m8!1m2!2m1!1segyptian+museum!3m4!1s0x0:0x520da52b3a7a660f!8m2!3d30.0475784!4d31.2336159'),
Location(
id: 2,
name: "The Great Pyramid of Giza",
description:
"The Great Pyramid of Giza",
theme: "pharaonic",
imageUrl:
"https://upload.wikimedia.org/wikipedia/commons/e/e3/Kheops-Pyramid.jpg",
locationUrl:
"https://www.google.com/maps/place/The+Great+Pyramid+of+Giza/@29.9792391,31.1320132,17z/data=!3m1!4b1!4m5!3m4!1s0x14584587ac8f291b:0x810c2f3fa2a52424!8m2!3d29.9792345!4d31.1342019"),
Location(
id: 3,
name: "Abu Simbel temples",
description:
"The Abu Simbel temples are two massive rock-cut temples at Abu Simbel ",
theme: "pharaonic",
imageUrl:
"https://www.worldatlas.com/upload/4f/c6/2f/shutterstock-397432201.jpg",
locationUrl:
"https://www.google.com/maps/place/Abu+Simbel+Temples/@22.3372368,31.6236103,17z/data=!3m1!4b1!4m5!3m4!1s0x143aa988b126055b:0xa7d3cc6618f898d2!8m2!3d22.3372319!4d31.625799"),
Location(
id: 4,
name: "Philae",
description:
"Philae is an island in the reservoir of the Aswan Low Dam, downstream of the Aswan Dam and Lake Nasser",
theme: "pharaonic",
imageUrl:
"https://4.bp.blogspot.com/-6RX--BMe-PA/UHAa8fRiKaI/AAAAAAAABXA/5v9KcZ3HCvY/s1600/IMGP2321.jpg",
locationUrl:
"https://www.google.com/maps/place/Philae/@24.0134126,32.8678317,15z/data=!3m1!4b1!4m5!3m4!1s0x143662bfbe299cbf:0xd571ef8bf3780147!8m2!3d24.01266!4d32.8775404"),
Location(
id: 5,
name: "Luxor Temple",
description:
"The Luxor Temple",
theme: "pharaonic",
imageUrl:
"https://lp-cms-production.imgix.net/2019-06/19e21d328924e00b3d35b92fc9f380ac-luxor-temple.jpg?auto=compress&crop=center&fit=crop&format=auto&h=416&w=960",
locationUrl:
"https://www.google.com/maps/place/Luxor+Temple/@25.6995068,32.6368622,17z/data=!3m1!4b1!4m5!3m4!1s0x144915c41edadf61:0x7693895c346c7d81!8m2!3d25.699502!4d32.6390509"),
];
void _launchURL() async => await canLaunch(locations[i].locationUrl)
? await launch(locations[i].locationUrl)
: throw 'Could not launch $locations[i].locationUrl';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Details"),
),
floatingActionButton: FloatingActionButton(
onPressed: _launchURL,
),
body: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 15),
child: Text(locations[i].name),
),
Image.network(locations[i].imageUrl),
Padding(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 15),
child: Text(locations[i].description),
)
],
),
);
}
}
这是表单类
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:my_locations/models/Location.dart';
import 'package:my_locations/data/locations.dart';
import 'package:my_locations/models/MainScreen.dart';
class MyForm extends StatefulWidget {
@override
MyCustomFormState createState() {
return MyCustomFormState();
}
List<Location> locations = [
Location(
id: 1,
name: "The Egyptian Museum",
description:
"The Museum of Egyptian Antiquities",
theme: "egyptian heritage",
imageUrl:
"https://www.mazadatours.com/wp-content/uploads/2017/01/Egyptian-Museum-in-Cairo2.jpg",
locationUrl:
'https://www.google.com/maps/place/The+Egyptian+Museum/@30.0209745,31.1411905,13z/data=!4m8!1m2!2m1!1segyptian+museum!3m4!1s0x0:0x520da52b3a7a660f!8m2!3d30.0475784!4d31.2336159'),
Location(
id: 2,
name: "The Great Pyramid of Giza",
description:
"The Great Pyramid of Giza",
theme: "pharaonic",
imageUrl:
"https://upload.wikimedia.org/wikipedia/commons/e/e3/Kheops-Pyramid.jpg",
locationUrl:
"https://www.google.com/maps/place/The+Great+Pyramid+of+Giza/@29.9792391,31.1320132,17z/data=!3m1!4b1!4m5!3m4!1s0x14584587ac8f291b:0x810c2f3fa2a52424!8m2!3d29.9792345!4d31.1342019"),
Location(
id: 3,
name: "Abu Simbel temples",
description:
"The Abu Simbel temples are two massive rock-cut temples at Abu Simbel",
theme: "pharaonic",
imageUrl:
"https://www.worldatlas.com/upload/4f/c6/2f/shutterstock-397432201.jpg",
locationUrl:
"https://www.google.com/maps/place/Abu+Simbel+Temples/@22.3372368,31.6236103,17z/data=!3m1!4b1!4m5!3m4!1s0x143aa988b126055b:0xa7d3cc6618f898d2!8m2!3d22.3372319!4d31.625799"),
Location(
id: 4,
name: "Philae",
description:
"Philae is an island in the reservoir of the Aswan Low Dam, downstream of the Aswan Dam and Lake Nasser",
theme: "pharaonic",
imageUrl:
"https://4.bp.blogspot.com/-6RX--BMe-PA/UHAa8fRiKaI/AAAAAAAABXA/5v9KcZ3HCvY/s1600/IMGP2321.jpg",
locationUrl:
"https://www.google.com/maps/place/Philae/@24.0134126,32.8678317,15z/data=!3m1!4b1!4m5!3m4!1s0x143662bfbe299cbf:0xd571ef8bf3780147!8m2!3d24.01266!4d32.8775404"),
Location(
id: 5,
name: "Luxor Temple",
description:
"The Luxor Temple",
theme: "pharaonic",
imageUrl:
"http://justfunfacts.com/wp-content/uploads/2016/08/luxor-temple-colonnade.jpg",
locationUrl:
"https://www.google.com/maps/place/Luxor+Temple/@25.6995068,32.6368622,17z/data=!3m1!4b1!4m5!3m4!1s0x144915c41edadf61:0x7693895c346c7d81!8m2!3d25.699502!4d32.6390509"),
];
}
class MyCustomFormState extends State<MyForm> {
List<Location> locations = [
Location(
id: 1,
name: "The Egyptian Museum",
description:
"The Museum of Egyptian Antiquities",
theme: "egyptian heritage",
imageUrl:
"https://www.mazadatours.com/wp-content/uploads/2017/01/Egyptian-Museum-in-Cairo2.jpg",
locationUrl:
'https://www.google.com/maps/place/The+Egyptian+Museum/@30.0209745,31.1411905,13z/data=!4m8!1m2!2m1!1segyptian+museum!3m4!1s0x0:0x520da52b3a7a660f!8m2!3d30.0475784!4d31.2336159'),
Location(
id: 2,
name: "The Great Pyramid of Giza",
description:
"The Great Pyramid of Giza",
theme: "pharaonic",
imageUrl:
"https://upload.wikimedia.org/wikipedia/commons/e/e3/Kheops-Pyramid.jpg",
locationUrl:
"https://www.google.com/maps/place/The+Great+Pyramid+of+Giza/@29.9792391,31.1320132,17z/data=!3m1!4b1!4m5!3m4!1s0x14584587ac8f291b:0x810c2f3fa2a52424!8m2!3d29.9792345!4d31.1342019"),
Location(
id: 3,
name: "Abu Simbel temples",
description:
"The Abu Simbel temples are two massive rock-cut temples at Abu Simbel",
theme: "pharaonic",
imageUrl:
"https://www.worldatlas.com/upload/4f/c6/2f/shutterstock-397432201.jpg",
locationUrl:
"https://www.google.com/maps/place/Abu+Simbel+Temples/@22.3372368,31.6236103,17z/data=!3m1!4b1!4m5!3m4!1s0x143aa988b126055b:0xa7d3cc6618f898d2!8m2!3d22.3372319!4d31.625799"),
Location(
id: 4,
name: "Philae",
description:
"Philae is an island in the reservoir of the Aswan Low Dam, downstream of the Aswan Dam and Lake Nasser",
theme: "pharaonic",
imageUrl:
"https://4.bp.blogspot.com/-6RX--BMe-PA/UHAa8fRiKaI/AAAAAAAABXA/5v9KcZ3HCvY/s1600/IMGP2321.jpg",
locationUrl:
"https://www.google.com/maps/place/Philae/@24.0134126,32.8678317,15z/data=!3m1!4b1!4m5!3m4!1s0x143662bfbe299cbf:0xd571ef8bf3780147!8m2!3d24.01266!4d32.8775404"),
Location(
id: 5,
name: "Luxor Temple",
description:
"The Luxor Temple",
theme: "pharaonic",
imageUrl:
"https://lp-cms-production.imgix.net/2019-06/19e21d328924e00b3d35b92fc9f380ac-luxor-temple.jpg?auto=compress&crop=center&fit=crop&format=auto&h=416&w=960",
locationUrl:
"https://www.google.com/maps/place/Luxor+Temple/@25.6995068,32.6368622,17z/data=!3m1!4b1!4m5!3m4!1s0x144915c41edadf61:0x7693895c346c7d81!8m2!3d25.699502!4d32.6390509")
];
final _formKey = GlobalKey<FormState>();
String name;
String theme;
String description;
String imageUrl;
String locationUrl;
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: Text("Form"),
),
body: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(vertical: 5),
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(), hintText: 'Location name'),
//controller: name,
// The validator receives the text that the user has entered.
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return value = name;
},
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 5),
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(), hintText: 'Theme'),
//controller: theme,
// The validator receives the text that the user has entered.
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return value = theme;
},
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 5),
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(), hintText: 'Full description'),
//controller: description,
// The validator receives the text that the user has entered.
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return value = description;
},
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 5),
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(), hintText: 'Image URL'),
//controller: imageUrl,
// The validator receives the text that the user has entered.
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return value = imageUrl;
},
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 5),
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(), hintText: 'Location URL'),
//controller: locationUrl,
// The validator receives the text that the user has entered.
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return value = locationUrl;
},
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 2),
child: ElevatedButton(
onPressed: () {
var newloc = new Location(
id: 6,
name: name,
description: description,
theme: theme,
imageUrl: imageUrl,
locationUrl: locationUrl,
);
locations.add(newloc);
Navigator.pop(context,
MaterialPageRoute(builder: (context) => MainScreen()));
//MaterialPageRoute(builder: (context) => MainScreen()));
if (_formKey.currentState.validate()) {
// If the form is valid, display a snackbar. In the real world,
// you'd often call a server or save the information in a database.
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Processing Data')));
}
},
child: Text('Submit'),
),
),
],
),
),
);
}
}
解决方案
因此，您可以在打开表单时等待您的表单，以便返回这样的结果
final result = await Navigator.push(
context, new MaterialPageRoute(builder: (context) => MyForm()));
当你完成你的表格后再次推送主屏幕就像这样回来
Navigator.pop(context, newloc);
之后在您的 mainScreen 中将您的新位置添加到您的位置列表中，但您可能需要一个有状态的小部件。像这样
setState(() {
locations.add(result);
});
推荐阅读
- ios - 在 UICollectionViewCell 上缩放转换
- c# - 并行观察多个 IObservable
- php - Nginx 代理 Php-fpm7.2 + 远程静态文件
- angularjs - 如何在 ng-repeat 之外但仅在 html 中检索值
- sql-server - 如何查找与给定用户关联的数据库角色？
- react-native - 当文本输入和提交按钮都在反应原生的不同js文件中时，如何在单击提交时进行空检查并导航到新屏幕？
- python - 在类似于 sql like 运算符的 dataframe1 列中找到 dataframe2 列，并使用 pandas 列出 dataframe2 的结果
- c# - .NET Core 依赖注入 - 解析接口的实现和 IEnumerable
- fortran - 我如何为这种分布生成数字？
- java - Spring MVC：org.apache.catalina.LifecycleException