dart 可重用TextField不发送数据Flutter

ee7vknir  于 2022-12-06  发布在  Flutter
关注(0)|答案(1)|浏览(125)

我有一个自定义textField,如下所示:

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

class CustomTextField extends StatefulWidget {
  TextEditingController controller;
  String label;
  String textValue;
  int maxLines;
  TextInputType keybordType;
  CustomTextField(
      {Key? key,
      required this.controller,
      required this.textValue,
      required this.label,
      this.maxLines = 1,
      this.keybordType = TextInputType.text})
      : super(key: key);

  @override
  State<CustomTextField> createState() => _CustomTextFieldState();
}

class _CustomTextFieldState extends State<CustomTextField> {
  @override
  Widget build(BuildContext context) {
    return TextField(
      maxLines: widget.maxLines,
      textCapitalization: TextCapitalization.words,
      onChanged: (value) {
        widget.textValue = value;
        setState(() {});
      },
      controller: widget.controller,
      cursorColor: Colors.white,
      style: TextStyle(fontSize: 15),
      textInputAction: TextInputAction.next,
      keyboardType: widget.keybordType,
      decoration: InputDecoration(
        hintText: widget.label,
      ),
    );
  }
}

我是这样使用它的:

CustomTextField(
                maxLines: 4,
                controller: chapterOpinionController,
                textValue: chapterOpinion,
                label: 'Critique du chapitre'),
            SizedBox(
              height: 2.h,
            ),
            ElevatedButton.icon(
              onPressed: () {
                addChapterReview();
                clearAllField();
                ScaffoldMessenger.of(context).showSnackBar(snackBar);
                setState(() {});
              },
              icon: const Icon(Icons.check),
              label: const Text('Poster la review'),
            ),

我如何发送数据:

Future<void> addChapterReview() {
    return chapter_reviews
        .add({
          'anime_adaptation': animeAdaptation,
          'edited_in_france': editedInFrance,
          'link': chapterLink,
          'manga': chapterOriginalManga,
          'note': chapterNote,
          'number': chapterNumber,
          'opinion': chapterOpinion,
          'pic': chapterPic,
          'title': chapterTitle
        })
        .then((value) => print('Review ajoutée avec succès.'))
        .catchError((error) => print('Echec de l\'ajout de la review.'));
  }

我的问题是输入没有发送到我的数据库。但是当我不使用我的自定义textField并在我的 'main' 页面中写一个完整的textField时,它就工作了。
我可以在hard* 10 textField中复制/past *,并有200多行代码,但我正在尝试优化我的代码。
你知道吗?

2sbarzqh

2sbarzqh1#

更改此项:

Future<void> addChapterReview() {
    return chapter_reviews
        .add({
          'anime_adaptation': animeAdaptation,
          'edited_in_france': editedInFrance,
          'link': chapterLink,
          'manga': chapterOriginalManga,
          'note': chapterNote,
          'number': chapterNumber,
          'opinion': chapterOpinion,
          'pic': chapterPic,
          'title': chapterTitle.toString()
        })
        .then((value) => print('Review ajoutée avec succès.'))
        .catchError((error) => print('Echec de l\'ajout de la review.'));
  }

更改为:

Future<void> addChapterReview() {
    return chapter_reviews
        .add({
          'anime_adaptation': animeAdaptation,
          'edited_in_france': editedInFrance,
          'link': chapterLink,
          'manga': chapterOriginalManga,
          'note': chapterNote,
          'number': chapterNumber,
          'opinion': chapterOpinionController.text,//<---change this
          'pic': chapterPic,
          'title': chapterTitle.toString()
        })
        .then((value) => print('Review ajoutée avec succès.'))
        .catchError((error) => print('Echec de l\'ajout de la review.'));
  }

你不用textValue来访问输入的结果,只需要使用chapterOpinionController.text
如果你想在文本改变时通知你,你需要像这样传递一个回调:

class CustomTextField extends StatefulWidget {
  TextEditingController controller;
  String label;
  Function(String) onChange;
  int maxLines;
  TextInputType keybordType;
  CustomTextField(
      {Key? key,
      required this.controller,
      required this.textValue,
      required this.label,
      this.maxLines = 1,
      this.keybordType = TextInputType.text})
      : super(key: key);

  @override
  State<CustomTextField> createState() => _CustomTextFieldState();
}

class _CustomTextFieldState extends State<CustomTextField> {
  @override
  Widget build(BuildContext context) {
    return TextField(
      maxLines: widget.maxLines,
      textCapitalization: TextCapitalization.words,
      onChanged: widget.onChange,
      controller: widget.controller,
      cursorColor: Colors.white,
      style: TextStyle(fontSize: 15),
      textInputAction: TextInputAction.next,
      keyboardType: widget.keybordType,
      decoration: InputDecoration(
        hintText: widget.label,
      ),
    );
  }
}

然后按如下方式使用它:

CustomTextField(
   maxLines: 4,
   controller: chapterOpinionController,
   onChanged: (value) {
      print("value = $value");
   },
   label: 'Critique du chapitre',
),

相关问题