Flutter---两种带输入框的对话框

第一种风格

Cupertino方案

CuptinoAlertDialog+CupertinoTextField+CupertinoDialogAction

效果图

具体代码

//创建文本编辑控制器//作用：管理TextField的文本内容，监听文本变化，获取和设置文本值，清空文本内容final _nameController = TextEditingController();//统一使用 Cupertino 风格// 带输入框的对话框void showChangeName() {showCupertinoDialog(context: context,builder: (context) {return CupertinoAlertDialog(title: const Text("修改名字"),content: Card(color: Colors.transparent,elevation: 0,child: SizedBox(height: 45,child: CupertinoTextField( // 使用 Cupertino 输入框controller: _nameController,placeholder: "请输入要修改的名字",padding: const EdgeInsets.all(10),),),),actions: [// 取消按钮CupertinoDialogAction(child: const Text("取消"),onPressed: () => Navigator.pop(context),),// 确定按钮CupertinoDialogAction(isDefaultAction: true, // 强调样式child: const Text("确定"),onPressed: () {// 这里写具体的修改名字的逻辑print(_nameController.text);Navigator.pop(context);},),],);},);}

第二种风格

Material方案

AlterDialog+TextField+TextButton

效果图

具体代码

//创建文本编辑控制器//作用：管理TextField的文本内容，监听文本变化，获取和设置文本值，清空文本内容final _nameController = TextEditingController();// 带输入框的对话框void showChangeName() {showDialog(context: context,builder: (context) {return AlertDialog(title: const Text("修改名字"),content: TextField(controller: _nameController,decoration: const InputDecoration(hintText: "请输入要修改的名字",border: OutlineInputBorder(),),),actions: [TextButton(onPressed: () => Navigator.pop(context),child: const Text("取消"),),TextButton(onPressed: () {print(_nameController.text);Navigator.pop(context);},child: const Text("确定"),),],);},);}