如何在颤动的许多文本字段中显示字符串列表的元素

Question

我有一个类，它返回一个创建文本字段的小部件查看它是如何完成的，关于文本字段的下一个问题是当我为文本字段设置一个值并转到下一页并返回到我的文本字段的页面值已清理并且不显示如何访问它的值时这是我创建的类文本字段对象

import 'package:art_man/components/Utility/Keys.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';


class InputText extends StatefulWidget {

  String _hint, id;
  double height;
  TextEditingController ctrl;
  Color brdercolor;
  double brderwidth;
  double radius;
  double margintop;
  TextAlign textAlign;
  int maxlines;
  Color hintconlor;
  double hintsize;
  double maxlenght;
  TextInputType keyboardtype;
  FontWeight fontWeight;
  TextEditingController controller;

  InputText(this._hint, this.id,
    {this.height,
    this.brdercolor,
    this.brderwidth,
    this.margintop,
    this.radius,
    this.textAlign,
    this.maxlines,
    this.hintconlor,
    this.hintsize,
    this.maxlenght,
    this.keyboardtype,
    this.fontWeight,
    this.controller});

  @override
  myInputText createState() {
    myInputText it = new myInputText(id,_hint,
      height: height,
      brdercolor: brdercolor,
      brderwidth: brderwidth,
      margintop: margintop,
      radius: radius,
      maxlines: maxlines,
      hintconlor: hintconlor,
      alignment: textAlign,
      hintsize: hintsize,
      maxlenght: maxlenght,
      keyboardtype: keyboardtype,
      fontwidth : fontWeight,
      controller: controller);
    return it;
  }
}

class myInputText extends State<InputText> {
  String _hint;
  String id;
  double height;
  Color brdercolor;
  double brderwidth;
  double radius;
  double margintop;
  TextAlign alignment;
  int maxlines;
  Color hintconlor;
  double hintsize;
  double maxlenght;
  TextInputType keyboardtype;
  FontWeight fontwidth;
  TextEditingController  controller ;


  myInputText(this.id,this._hint,
    {this.height,
    this.brdercolor,
    this.brderwidth,
    this.margintop,
    this.radius,
    this.alignment,
    this.maxlines,
    this.hintsize,
    this.hintconlor,
    this.maxlenght,
    this.keyboardtype,
    this.fontwidth,
    this.controller});


  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      margin: EdgeInsets.only(
        top: margintop == null ? 1.0 : margintop,
      ),
      padding: EdgeInsets.only(right: 3),
      height: height == null ? 40.0 : height,
      decoration: BoxDecoration(
        border: Border.all(
          color: brdercolor == null ? Colors.white : brdercolor,
          width: brderwidth == null ? 0.0 : brderwidth),
      color:  brdercolor == null ? Colors.white : brdercolor,
      borderRadius: BorderRadius.circular(radius == null ? 25 : radius)),
      child: TextField(
        controller: controller,
        keyboardType: keyboardtype==null?TextInputType.text:keyboardtype,
        textInputAction: TextInputAction.next,
        inputFormatters: [
          new LengthLimitingTextInputFormatter(maxlenght==null? 
          30:maxlenght.toInt()),
       ],
     onChanged: (value){
       Kelid.setter(id, value);
       print(Kelid.getter(id));
    },
    textAlign: alignment == null ? TextAlign.right : alignment,
    maxLines: maxlines==null?1:maxlines,
    style: TextStyle(
      fontSize: hintsize==null?14:hintsize,
    ),
    textDirection: TextDirection.rtl,
    decoration: InputDecoration(
        border: InputBorder.none,
        contentPadding: const EdgeInsets.all(0.0),
        hintText: _hint,
        errorStyle: TextStyle(height: 0),
        hintStyle: TextStyle(
            fontWeight: fontwidth==null?FontWeight.normal:fontwidth,
            color: hintconlor == null ? Colors.grey : hintconlor,
            fontSize: hintsize == null ? 13 : hintsize)),
      ),
    );
  }
}

Answer 1

据我了解，您正在研究动态生成 TextField 并能够存储其值。你可以在这里做的是使用 Flutter 中可用的状态管理来存储 TextField 值。在这种方法中，我使用了 provider 包来存储 TextField 值并在每次文本更改时保存。存储 TextField 值后，我们可以轻松恢复 TextField 上的值。

完整示例

import 'dart:collection';

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (BuildContext context) => TextFieldDetailsModel(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ListView.builder(
            itemCount: 20,
            itemBuilder: (BuildContext context, int index) {
              return _inputText('Hint for index $index', index);
            }),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Print all TextField String stored in Provider
          // List<String> listText =
          //     Provider.of<TextFieldDetailsModel>(context, listen: false)
          //         ._textFieldContent;
          // for (int x = 0; x < listText.length; x++) {
          //   debugPrint('Text: ${listText[x]}, index: $x');
          // }

          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => SecondRoute()),
          );
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }

  Widget _inputText(String hint, int index) {
    var _textEditingController = TextEditingController();
    return Container(
      padding: EdgeInsets.all(16.0),
      child: Consumer<TextFieldDetailsModel>(builder: (BuildContext context,
          TextFieldDetailsModel txtModel, Widget? child) {
        // If Provider List contains value, prefill the TextField
        if (txtModel._textFieldContent.length > 0 &&
            txtModel._textFieldContent.length > index &&
            txtModel._textFieldContent[index].trim() != '') {
          _textEditingController.text = txtModel._textFieldContent[index];
          // set TextField cursor at the end
          _textEditingController.selection = TextSelection.collapsed(offset: _textEditingController.text.length);
        }
        return TextField(
          controller: _textEditingController,
          onChanged: (String str) {
            // Only add String if TextField has value
            if (str.trim().isEmpty)
              txtModel.remove(index);
            else
              txtModel.add(str, index);
          },
          decoration: InputDecoration(hintText: hint),
        );
      }),
    );
  }
}

// https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple
class TextFieldDetailsModel extends ChangeNotifier {
  final List<String> _textFieldContent = [];

  UnmodifiableListView<String> get text =>
      UnmodifiableListView(_textFieldContent);

  void add(String text, int? index) {
    if (index != null)
      _textFieldContent.fillAndSet(index, text);
    else
      _textFieldContent.add(text);
    // This call tells the widgets that are listening to this model to rebuild.
    notifyListeners();
  }

  void remove(int index) {
    _textFieldContent.removeAt(index);
    notifyListeners();
  }

  void removeAll() {
    _textFieldContent.clear();
    // This call tells the widgets that are listening to this model to rebuild.
    notifyListeners();
  }
}

// Create filler for skipping ranges
// Source: https://stackoverflow.com/a/65504227/2497859
extension ListFiller<T> on List<String> {
  void fillAndSet(int index, String value) {
    if (index >= this.length) {
      this.addAll(List<String>.filled(index - this.length + 1, ''));
    }
    this[index] = value;
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

演示

这些值也可以仅在页面更改时存储。创建一个List<TextEditingController> 分配给生成的TextFields。

late List<TextEditingController> _listTextEditingController = [];

...

Widget _inputText(String hint, int index) {
  var _textEditingController = TextEditingController();
  _listTextEditingController.add(_textEditingController);
  ...
}

在页面更改（即按钮触发）时，提取所有 List 值并将其存储在 Provider 中。

for (int x = 0; x < _listTextEditingController.length; x++) {
  Provider.of<TextFieldDetailsModel>(context, listen: false).add(_listTextEditingController[x].text, x);
}