为什么每次我在 TextField 中输入内容时,在 Flutter 中单击后退按钮或清除键盘后,它总是消失?

问题描述 投票:0回答:1

这是我的文本字段代码

// lib/widget/textfield_widget.dart
import 'package:flutter/material.dart';

class TextFieldWiget extends StatelessWidget {
  const TextFieldWiget({
    super.key,
    required this.maxLine,
    required this.hintText,
    required this.txtController,
  });

  final String hintText;
  final int maxLine;
  final TextEditingController txtController;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 20),
      decoration: BoxDecoration(
        color: Colors.grey[50],
        borderRadius: BorderRadius.circular(8),
      ),
      child: TextField(
        style: TextStyle(color: Colors.black),
        controller: txtController,
        decoration: InputDecoration(
          enabledBorder: InputBorder.none,
          focusedBorder: InputBorder.none,
          hintText: hintText,
        ),
        maxLines: maxLine,
      ),
    );
  }
}

这是我输入一些文本时的代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_zitacademy_todo_app_firebase/constants/app_style.dart';
import 'package:flutter_zitacademy_todo_app_firebase/provider/date_time_provider.dart';
import 'package:flutter_zitacademy_todo_app_firebase/provider/radio_provider.dart';
import 'package:gap/gap.dart';
import 'package:intl/intl.dart';
import '../widget/datetime_widget.dart';
import '../widget/radio_widget.dart';
import '../widget/textfield_widget.dart';

class AddNewTaskModel extends ConsumerWidget {
  AddNewTaskModel({
    super.key,
  });

  final titleController = TextEditingController();
  final descriptionController = TextEditingController();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final dateProv = ref.watch(dateProvider);
    return Container(
      padding: const EdgeInsets.all(30),
      height: MediaQuery.of(context).size.height * 0.70,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SizedBox(
            width: double.infinity,
            child: Text(
              "New Task Todo",
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.bold,
                color: Colors.black,
              ),
            ),
          ),
          const Divider(
            thickness: 1.5,
            color: Colors.green,
          ),
          const Gap(5),
          const Text(
            "Title Task",
            style: AppStyle.headingOne,
          ),
          const Gap(2),
          TextFieldWiget(
            maxLine: 1,
            hintText: "Add New Task",
            txtController: titleController,
          ),
          const Gap(5),
          const Text(
            'Description',
            style: AppStyle.headingOne,
          ),
          const Gap(2),
          TextFieldWiget(
            maxLine: 5,
            hintText: "Add Descrption",
            txtController: descriptionController,
          ),
          const Gap(5),
          const Text(
            'Category',
            style: AppStyle.headingOne,
          ),
          Row(
            children: [
              Expanded(
                child: RadioWidget(
                  titleRadio: 'Work',
                  categColor: Colors.green,
                  valueInput: 1,
                  onChangedValue: () =>
                      ref.read(radioProvider.notifier).update((state) => 1),
                ),
              ),
              Expanded(
                child: RadioWidget(
                  titleRadio: 'Home',
                  categColor: Colors.red,
                  valueInput: 2,
                  onChangedValue: () =>
                      ref.read(radioProvider.notifier).update((state) => 2),
                ),
              ),
              Expanded(
                child: RadioWidget(
                  titleRadio: 'Play',
                  categColor: Colors.blue,
                  valueInput: 3,
                  onChangedValue: () =>
                      ref.read(radioProvider.notifier).update((state) => 3),
                ),
              )
            ],
          ),
          const Gap(5),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              DateTimeWidget(
                titleText: 'Date & Time',
                valueText: dateProv,
                iconSection: CupertinoIcons.calendar,
                onTap: () async {
                  final getValue = await showDatePicker(
                    context: context,
                    initialDate: DateTime.now(),
                    firstDate: DateTime(2020),
                    lastDate: DateTime(2050),
                  );
                  if (getValue != null) {
                    final format = DateFormat.yMd();
                    ref.read(dateProvider.notifier).update(
                          (state) => format.format(getValue),
                        );
                    print(format.format(getValue));
                  }
                },
              ),
              Gap(5),
              DateTimeWidget(
                titleText: 'Date & Time',
                valueText: ref.watch(timeProvider),
                iconSection: CupertinoIcons.clock,
                onTap: () async {
                  final getTime = await showTimePicker(
                    context: context,
                    initialTime: TimeOfDay.now(),
                  );

                  if (getTime != null) {
                    ref.read(timeProvider.notifier).update(
                          (state) => getTime.format(context),
                        );
                  }
                },
              ),
            ],
          ),
          const Gap(3),
          Flexible(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Expanded(
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.blue,
                      foregroundColor: Colors.white,
                      elevation: 0,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8),
                      ),
                      side: const BorderSide(
                        color: Colors.blue,
                      ),
                      padding: const EdgeInsets.symmetric(
                        vertical: 10,
                      ),
                    ),
                    onPressed: () => Navigator.pop(context),
                    child: const Text('Cancel'),
                  ),
                ),
                const Gap(5),
                Expanded(
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.white,
                      foregroundColor: Colors.blue,
                      elevation: 0,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8),
                      ),
                      side: const BorderSide(
                        color: Colors.blue,
                      ),
                      padding: const EdgeInsets.symmetric(
                        vertical: 10,
                      ),
                    ),
                    onPressed: () {
                      final getRadioValue = ref.read(radioProvider);
                      String category = '';

                      switch (getRadioValue) {
                        case 1:
                          category = 'Learning';
                          break;
                        case 2:
                          category = 'Working';
                          break;
                        case 3:
                          category = 'General';
                          break;
                      }

                      // ref.read(serviceProvider).addNewTask(
                      //       TodoModel(
                      //         titleTask: titleController.text,
                      //         description: descriptionController.text,
                      //         category: category,
                      //         timeTask: ref.read(timeProvider),
                      //         dateTask: ref.read(dateProvider),
                      //       ),
                      //     );

                      print(titleController.text+ 'title controller');
                      print(ref.read(dateProvider));
                    },
                    child: const Text('Save'),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

为什么每次我在 TextField 中输入内容时,在 Flutter 中单击后退按钮或清除键盘后,它总是消失? -Dart SDK版本:3.3.2 -颤振3.19.4 -Android SDK API 31 谁能帮我解决这个问题吗?我已阅读文档,但它是一样的

flutter dart textfield flutter-material
1个回答
0
投票

Riverpod 的创建者建议将

TextEditingController
存储在 State 或 flutter_hooks 中。

https://github.com/rrousselGit/riverpod/discussions/2680#discussioncomment-6300904

因此,您可以将

AddNewTaskModel
小部件更改为
StatefulWidget
并使用
Consumer
从您的提供商处获取数据。

@override
  Widget build(BuildContext context){
    return Consumer(
         builder: (context, ref, child) {
          final value = ref.watch(someOtherProvider);
          // put your widgets here
          return Text(value); 
        },
      );
   
  }
© www.soinside.com 2019 - 2024. All rights reserved.