flutter 按下按钮时,在FloatingActionButton()Row()内打开TextFormField

7gyucuyw  于 2023-05-18  发布在  Flutter
关注(0)|答案(1)|浏览(144)

点击红色按钮旁边的蓝色按钮编辑待办事项时,如何打开底部的TextFormField编辑待办事项?知道TextFormField位于FloatingActionButton内的行内。
下面是我的代码:
TextFormField代码:

class AddNewToDo extends StatefulWidget {
  const AddNewToDo({
    Key? key,
    required this.addTodo,
    this.initialTask,
    this.taskFocusNode,
  }) : super(key: key);

  final String? initialTask;
  final Function addTodo;
  final FocusNode? taskFocusNode;

  @override
  State<AddNewToDo> createState() => _AddNewToDoState();
}

class _AddNewToDoState extends State<AddNewToDo> {
  final TextEditingController taskController = TextEditingController();

  @override
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Row(
      children: [
        Expanded(
          child: Container(
            margin: const EdgeInsets.only(left: 25),
            decoration: const BoxDecoration(
              boxShadow: [
                BoxShadow(
                  blurRadius: 35,
                  offset: Offset(0, 5),
                  color: Colors.black38,
                ),
              ],
            ),
            child: SizedBox(
              width: size.width / 1.7,
              child: TextFormField(
                focusNode: widget.taskFocusNode,
                controller: taskController,
                decoration: InputDecoration(
                  hintText: 'Add a new todo item',
                  filled: true,
                  fillColor: Colors.white,
                  contentPadding:
                      const EdgeInsets.symmetric(vertical: 17, horizontal: 20),
                  border: OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
              ),
            ),
          ),
        ),
        const SizedBox(
          width: 20,
        ),
        FloatingActionButton(
          onPressed: () {
            setState(() {
              if (taskController.text.isNotEmpty) {
                widget.addTodo(taskController.text);
                FocusScope.of(context).unfocus();
                taskController.clear();
              } else {
                setState(() {
                  showAlertDialog(BuildContext context) {

  Widget okButton = TextButton(
    child: const Text("OK"),
    onPressed: () => Navigator.pop(context),
  );

  AlertDialog alert = AlertDialog(
    title: const Text("Warning"),
    content: const Text("Please add a todo item."),
    actions: [
      okButton,
    ],
  );

  showDialog(
    context: context,
    builder: (BuildContext context) {
      return alert;
    },
  );
}

                });
              }
            });
          },
          shape: const BeveledRectangleBorder(),
          backgroundColor: const Color(0xFF5F56E8),
          child: Container(
            padding: const EdgeInsets.only(bottom: 3, right: 2),
            alignment: Alignment.center,
            child: const Icon(
              Icons.add,
              size: 40,
            ),
          ),
        ),
      ],
    );
  }
}

编辑按钮代码:

CustomButton(
                        press: () {
                          setState(() {
                            taskFocusNode.requestFocus();
                          });
                        },
                        color: const Color(0xFF5F56E8),
                        customIcon: const Icon(Icons.edit),
                        customMargin: const EdgeInsets.only(right: 10),
                      ),

希望有人能在这方面帮助我。

rxztt3cl

rxztt3cl1#

下面是我的例子:
首先,我将添加一个新的bool变量,并从控制器中删除final以使其可编辑:

bool editTodoItem = false;
  TextEditingController taskController = TextEditingController();

CustomButton上进行编辑,将bool设置为true,并将控制器设置为您想要编辑的名称:

CustomButton(
                        press: () {
                          setState(() {
                            taskFocusNode.requestFocus();
                            editTodoItem = true;
                            taskController.text = listOfTasks[index].nameOfTask ?? ''; //empty if null since your nameOfTask is nullable
                         
                          });
                        },
                      ),

现在,您可以有条件地更改FloatingActionButton

FloatingActionButton(
                child: Container(
                  ...
                  child: Icon(
                   editTodoItem ? Icons.add : Icons.edit,
                    size: 40,
                  ),
                ),
                onPressed: () {
                  setState(() {
                    if (taskController.text.isNotEmpty) {
                      //widget.addTodo(taskController.text);
                      FocusScope.of(context).unfocus();
                      taskController.clear();
                    } else if (editTodoItem) {
                      //widget.editTodo(taskController.text);
                      FocusScope.of(context).unfocus();
                      taskController.clear();
                      editTodoItem = false;
                    } else {}...

相关问题