如何解决Flutter：动态文本字段显示相同的值吗？
我将此页面作为选项卡页面，显示来自服务器的映射数据，并且当我在一个文本字段中键入数字时，每行包含两个文本字段，并在每一行的底部将它们插入数据库，所有文本字段都显示与如下图所示：
页面代码：
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:http/http.dart' as http;
import '../models/matchs.dart';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
var logined_user;
var logined_email;
TextEditingController _resultController1 = new TextEditingController();
TextEditingController _resultController2 = new TextEditingController();
getuser() async {
SharedPreferences preferences = await SharedPreferences.getInstance();
logined_user = preferences.getString('username');
logined_email = preferences.getString('email');
if (logined_user != null) {
setState(() {
logined_user = preferences.getString('username');
logined_email = preferences.getString('email');
});
}
}
@override
void initState() {
getuser();
super.initState();
}
//App Start
@override
Widget build(BuildContext context) {
List matchs = [];
Future<List> get_matchs() async {
var url =
'https://technosat-iq.com/myexpect/api/controller/matchs/show_matchs.php?s_id=1';
var response = await http.get(url);
var data = jsonDecode(response.body);
print(data);
for (var x in data) {
Match newmatch = Match(
x['s_id'],x['week_id'],x['league_name'],x['home_team'],x['away_team'],x['home_goals'],x['away_goals'],x['m_date'],);
matchs.add(newmatch);
}
return matchs;
}
return FutureBuilder(
future: get_matchs(),builder: (context,snapshot) {
if (snapshot.data == null) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
color: Colors.orange[100],),child: Center(
child: Text("Loading"),);
} else {
return Container(
color: Colors.indigo[200],child: ListView(
children: [
SizedBox(
height: 10,Text(
'Active Games',style: TextStyle(fontSize: 22),textAlign: TextAlign.center,Column(
children: snapshot.data.map<Widget>((item) {
return Column(
children: [
SizedBox(
height: 10,Text(item.m_date),Table(
columnWidths: {
0: FlexColumnWidth(2),1: FlexColumnWidth(2),2: FlexColumnWidth(2),3: FlexColumnWidth(2),},children: [
TableRow(
decoration: BoxDecoration(
color: Color.fromRGBO(220,100,200,0.2),children: [
Container(
alignment: Alignment.center,height: 50,child: Text(
item.home_team,style: TextStyle(fontSize: 20),)),Container(
alignment: Alignment.center,child: Image(
image: AssetImage('./assets/flags/' +
item.home_team +
'.png'),width: 30,Container(
padding:
EdgeInsets.only(top: 10,bottom: 10),alignment: Alignment.center,child: TextField(
controller: _resultController1,keyboardType: TextInputType.number,decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey[700],focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey[700],Container(
alignment: Alignment.center,padding: EdgeInsets.all(10),child: RaisedButton(
onPressed: () {
print(_resultController1.text);
print(_resultController2.text);
},child: Text('Insert'),))
]),TableRow(
decoration: BoxDecoration(
color: Color.fromRGBO(220,0.1),child: Text(item.away_team,style: TextStyle(fontSize: 20))),child: Image(
image: AssetImage('./assets/flags/' +
item.away_team +
'.png'),child: TextField(
keyboardType: TextInputType.number,controller: _resultController2,Container()
])
],],);
}).toList(),);
}
});
}
}
如何在一个文本字段中显示值？ 注意：当我点击插入成功打印的值
解决方法
您正在为所有文本字段分配相同的控制器（_resultController1和_resultController2），这使它们共享相同的值。
因此，您需要为您生成的每个TextField分配一个新的控制器。
为此，您需要生成与文本字段一样多的控制器，并将这些控制器存储在某些数据结构（映射，列表等）中，如this SO thread中所述。
或者，如果您不想弄乱控制器，则可以创建一个列表/映射来保存输入的值，并使用每个TextField的onChange处理程序来保存用户输入。像这样：
Map<String,String> inputs = {};
//...
//then inside the loop,for each TextField:
child: TextField(
onChanged: (value) {
//here for the key I am using e.g. 'MNU-MCI',you cna use anything that is unique to the item
inputs['$item.home_team-$item.away_team'] = value;
}
)
//...
//then,for the corresponding RaisedButton:
child: RaisedButton(
onPressed: () {
//now access the input's value using the corresponding key
print(inputs['$item.home_team-$item.away_team'])
},child: Text('Insert'),)
我通过将控制器转换为列表来解决它。
在“未来”构建器内部，我列出了控制器列表：
for (int i = 0; i < snapshot.data.length; i++) {
cont1.add(TextEditingController());
cont2.add(TextEditingController());
}
，然后在“文本”字段中添加控制器：
child: TextField(
controller: cont1[int.parse(item.id)],第二个：
child: TextField(
controller: cont2[int.parse(item.id)],，现在显示为：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。