颤动文本编辑控制器 listview.builder

问题描述

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

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

请您能帮我将 TextEditing Controller 添加到列表的每个项目中，并提取一个包含文本输入、应用名称和徽标的文件。

请注意：应用列表是一个列表，其中包含应用名称、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)),);
                    }))
          ],);
  }
}

解决方法

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)),);
                    }))
          ],);
  }
}

,

让每个应用程序都有一个唯一的 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],)