点击红色按钮旁边的蓝色按钮编辑待办事项时,如何打开底部的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),
),
希望有人能在这方面帮助我。
1条答案
按热度按时间rxztt3cl1#
下面是我的例子:
首先,我将添加一个新的bool变量,并从控制器中删除final以使其可编辑:
在
CustomButton
上进行编辑,将bool设置为true,并将控制器设置为您想要编辑的名称:现在,您可以有条件地更改
FloatingActionButton
: