flutter文本编辑控制器listview.builder

Question

我希望页面显示社交媒体应用程序的列表，用户可以在其中输入用户名/详细信息。我希望能够提取这些输入数据以及应用程序名称和徽标(最好是作为JSON文件(，以便能够将它们创建为按钮，从而指向相应的应用程序和配置文件。

为此，我使用listview.builder创建了一个列表平铺列表(来自一个单独的列表，其中包含我想要包含的应用程序和徽标列表(，并使用字幕功能为每个列表平铺添加了一个TextField。

请你能帮我把文本编辑控制器添加到列表的每个项目中，并提取一个带有文本输入、appname和徽标的文件吗。

请注意：applist是一个列表，其中包含appname、TextField的提示文本和徽标的图像。

import 'package:flutter/material.dart';
import 'package:applist/apps.dart';
class AppList extends StatefulWidget {
const AppList({Key? key}) : super(key: key);
@override
_AppListState createState() => _AppListState();
}
class _AppListState extends State<AppList> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My list of apps'),
),
body: Padding(
padding: EdgeInsets.all(20.0),
child: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: apps.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(apps[index].appname),
leading: SizedBox(
height: 50,
width: 50,
child: Image.asset(apps[index].image),
),
subtitle: TextField(
decoration:
InputDecoration(hintText: (apps[index].hint)),
),
);
}))
],
),
),
);
}
}

Answer 1

1-您需要定义TextEditingConrtoller字段变量：

late  TextEditingController textEditingController ; 

2-初始化initState中的字段变量

@override
void initState(){
super.initState();
textEditingController = TextEditingController();
}

3-然后初始化您的TextField控制器

TextField(
controller:textEditingController ,
)

• 您的最终代码应该是这样的

import 'package:flutter/material.dart';
import 'package:applist/apps.dart';
class AppList extends StatefulWidget {
const AppList({Key? key}) : super(key: key);
@override
_AppListState createState() => _AppListState();
}
class _AppListState extends State<AppList> {
late  TextEditingController textEditingController ;   // <--
@override
void initState() {
super.initState();
textEditingController = TextEditingController(); // <--
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My list of apps'),
),
body: Padding(
padding: EdgeInsets.all(20.0),
child: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: apps.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(apps[index].appname),
leading: SizedBox(
height: 50,
width: 50,
child: Image.asset(apps[index].image),
),
subtitle: TextField(
controller:textEditingController , // <--
decoration:
InputDecoration(hintText: (apps[index].hint)),
),
);
}))
],
),
),
);
}
}

Answer 2

让每个应用程序都有一个唯一的id(如果应用程序名称不是唯一的(。

创建TextEditingController 的映射

Map<String, TextEditingController> _textControllers = new Map();

为每个应用程序添加一个新的TextEditingController，其唯一名称或id作为关键

apps.forEach((app) => textControllers[app.id] = new TextEditingController());

最后，您可以在ListViewBuilder中使用它，如…

ListView.builder(
itemCount: apps.length,
itemBuilder: (context, index) => TextFormField(
controller: _textControllers[apps[index].id],
),
)

Answer 3

如果您想对文本字段使用唯一的控制器。您应该使用一个具有控制器和其他数据的模型。使用"；冷冻的"；

import 'package:flutter/material.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
part 'controller_model.freezed.dart';
@freezed
class ControllerModel with _$ControllerModel {
const factory ControllerModel({
required String name,
required TextEditingController controller,
}) = _ControllerModel;
}