我是 Flutter 的初學者。我正在嘗試在按下浮動操作按鈕時將新用戶添加到串列項小部件中以顯示螢屏。我如何實作這一目標？我正在嘗試創建一個專案串列。單擊浮動操作按鈕時，會彈出一個對話框并要求用戶輸入詳細資訊。我想使用這些用戶輸入詳細資訊將新用戶添加到串列項中。這是我在 main.dart 中呼叫以顯示用戶串列的 user_page.dart 檔案。
主要.dart
@override
Widget build(BuildContext context) {
List users = User.fromJsonToList(allData());
return Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF32937e),
title: Text("UserList"),
leading: IconButton(
onPressed: () {},
icon: Icon(Icons.computer),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
floatingActionButton: FloatingActionButton(
backgroundColor: Color(0xFF32937e),
elevation: 5.0,
child: Icon(Icons.add), //child widget inside this button
onPressed: () {
createAlertDialog(context).then((onValue) {
setState(() {
users.add(onValue);
});
});
},
),
body: Center(
child: ListView.builder(
itemCount: users.length,
itemBuilder: (BuildContext context, int index) {
User user = users[index];
return ListTile(
title: Text(user.firstName),
subtitle: Text(user.role),
leading: Container(
clipBehavior: Clip.antiAlias,
height: 100,
width: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xFF32937e),
),
child: Image.network(
user.avatar.toString(),
fit: BoxFit.fill,
errorBuilder: (context, exception, stackTrace) {
return const Icon(Icons.error);
},
)),
onTap: () {});
})));
}
Future<String> createAlertDialog(BuildContext context) async {
TextEditingController customController = new TextEditingController();
return await showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("Name of the User"),
content: TextField(
controller: customController,
),
actions: <Widget>[
MaterialButton(
elevation: 5.0,
child: Text("OK"),
onPressed: () {
Navigator.of(context).pop(customController.text
.toString()); // to go back to screen after submitting
})
],
);
});
}
user_page.dart
allData() {
return [
{
"id": "6281d43e-97c9-45c7-8969-29debdfbb5f1",
"avatar": "https://robohash.org/illumatquefuga.png?size=50x50&set=set1",
"first_name": "Lenci",
"last_name": "Gauche",
"email": "[email protected]",
"role": "Construction Worker"
},
{
"id": "5fa6030e-7987-46c8-a5e0-aace7069d0e0",
"avatar": null,
"first_name": "Leigh",
"last_name": "Binstead",
"email": "[email protected]",
"role": "Construction Worker"
},
用戶串列.dart
class User {
String id;
String? avatar;
String firstName;
String lastName;
String email;
String role;
User({
required this.id,
required this.avatar,
required this.firstName,
required this.lastName,
required this.email,
required this.role,
});
static List<User> fromJsonToList(userDataJson) {
var list = <User>[];
for (var usr in userDataJson) {
list.add(
User(
id: usr['id'],
email: usr['email'],
firstName: usr['first_name'],
lastName: usr['last_name'],
role: usr['role'],
avatar: usr['avatar'],
),
);
}
return list;
}
}
uj5u.com熱心網友回復：
事情就在這里，你有List<User>users，要在上面添加資料，你需要提供一個用戶模型。
您已經單個 TextFiled，現在只需添加名稱以從中獲取文本。
首先，放在userbuild 方法之外。
List<User> users = User.fromJsonToList(allData());
@override
Widget build(BuildContext context) {
添加專案將是
onPressed: () {
createAlertDialog(context).then((onValue) {
users.add(User(
id: "null",
avatar: "",
firstName: onValue,
lastName: "na",
email: "",
role: ""));
setState(() {});
});
},
獲取用戶并保存到模型中。
要為模型類添加其他欄位，您需要在對話框中添加更多輸入欄位并從對話框回傳用戶。
Future<User> createAlertDialog(BuildContext context) async {
TextEditingController customController = TextEditingController();
User user = User(
id: "", avatar: '', firstName: "", lastName: "", email: "", role: "");
return await showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("Name of the User"),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
onChanged: (value) {
user.id = value;
},
),
TextField(
onChanged: (value) {
user.firstName = value;
},
),
TextField(
onChanged: (value) {
user.lastName = value;
},
),
],
),
actions: <Widget>[
MaterialButton(
elevation: 5.0,
child: Text("OK"),
onPressed: () {
Navigator.of(context).pop(user);
})
],
);
});
}
}
儲蓄就像
onPressed: () {
createAlertDialog(context).then((onValue) {
users.add(onValue);
setState(() {});
});
},
多輸入
class TestJSonA extends StatefulWidget {
const TestJSonA({Key? key}) : super(key: key);
@override
State<TestJSonA> createState() => _TestJSonAState();
}
allData() {
return [
{
"id": "6281d43e-97c9-45c7-8969-29debdfbb5f1",
"avatar": "https://robohash.org/illumatquefuga.png?size=50x50&set=set1",
"first_name": "Lenci",
"last_name": "Gauche",
"email": "[email protected]",
"role": "Construction Worker"
},
{
"id": "5fa6030e-7987-46c8-a5e0-aace7069d0e0",
"avatar": null,
"first_name": "Leigh",
"last_name": "Binstead",
"email": "[email protected]",
"role": "Construction Worker"
},
];
}
class _TestJSonAState extends State<TestJSonA> {
List<User> users = User.fromJsonToList(allData());
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF32937e),
title: Text("UserList"),
leading: IconButton(
onPressed: () {},
icon: Icon(Icons.computer),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
floatingActionButton: FloatingActionButton(
backgroundColor: Color(0xFF32937e),
elevation: 5.0,
child: Icon(Icons.add), //child widget inside this button
onPressed: () {
createAlertDialog(context).then((onValue) {
users.add(onValue);
setState(() {});
});
},
),
body: Center(
child: ListView.builder(
itemCount: users.length,
itemBuilder: (BuildContext context, int index) {
User user = users[index];
return ListTile(
title: Text(user.firstName),
subtitle: Text(user.role),
leading: Container(
clipBehavior: Clip.antiAlias,
height: 100,
width: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xFF32937e),
),
child: Image.network(
user.avatar.toString(),
fit: BoxFit.fill,
errorBuilder: (context, exception, stackTrace) {
return const Icon(Icons.error);
},
)),
onTap: () {});
})));
}
Future<User> createAlertDialog(BuildContext context) async {
TextEditingController customController = TextEditingController();
User user = User(
id: "", avatar: '', firstName: "", lastName: "", email: "", role: "");
return await showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("Name of the User"),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
onChanged: (value) {
user.id = value;
},
),
TextField(
onChanged: (value) {
user.firstName = value;
},
),
TextField(
onChanged: (value) {
user.lastName = value;
},
),
],
),
actions: <Widget>[
MaterialButton(
elevation: 5.0,
child: Text("OK"),
onPressed: () {
Navigator.of(context).pop(user);
})
],
);
});
}
}
uj5u.com熱心網友回復：
首先這樣做：
Future<String> createAlertDialog(BuildContext context) async {
TextEditingController customController = new TextEditingController();
var reault = await showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("Name of the User"),
content: TextField(
controller: customController,
),
actions: <Widget>[
MaterialButton(
elevation: 5.0,
child: Text("OK"),
onPressed: () {
Navigator.of(context).pop(customController.text
.toString()); // to go back to screen after submitting
})
],
);
});
if (reault != null) {
return reault;
} else {
return '';
}
}
然后 ：
createAlertDialog(context).then((onValue) {
if (onValue.isNotEmpty) {
User user = User(
id: '112',
avatar: null,
firstName: onValue,
lastName: '',
email: '',
role: '');
setState(() {
users.add(user);
});
}
});
uj5u.com熱心網友回復：
您可以在對話框中按 ok 添加用戶，然后彈出對話框
例如
actions: <Widget>[
MaterialButton(
elevation: 5.0,
child: Text("OK"),
onPressed: () {
final myuserData=User(firstName: customController.text...other fields))
users.add(myuserData);
Navigator.of(context).pop(); // to go back to screen after submitting
})
另一方面，無需在對話框關閉時回傳字串，因為您可以使您的TextEditingController customController全域。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/504704.html