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

效果图

步骤

先创建文本控制器（作用为：

管理TextField的文本内容，监听文本变化，获取和设置文本值，清空文本内容

）

Dart 复制代码

final controller = TextEditingController();

然后创建具体的对话框

Dart 复制代码

// 带输入框的对话框
  void _showDeleteDialog() {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(

        //名称区域
        title: const Text("请输入名称"),
        
        //输入框区域
        content: TextField(  
          controller: controller, //绑定文本控制器，用于管理输入内容
          decoration: //输入框的装饰样式
          const InputDecoration(
            hintText: "请输入",//占位符文本，输入时消失
            border: OutlineInputBorder(),//边框样式，带外边框的输入框
          ),
        ),


        //操作按钮区域
        actions: [
          TextButton(
            child: const Text("取消"),
            onPressed: () => Navigator.pop(context),
          ),
          TextButton(
            child: const Text("提交"),
            onPressed: () {
              //这里写具体的提交逻辑事件
              print(controller.text);
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }

用户交互流程

①点击按钮 → 调用 _showDeleteDialog()

②显示对话框 → 用户看到输入框和按钮

③输入文本 → 文本存储在 controller 中

④点击提交 → 执行 onPressed 中的代码

⑤输出文本 → print(controller.text)

⑥关闭对话框 → Navigator.pop(context)

为了内存管理考虑，需要销毁控制器

Dart 复制代码

// 在 State 类中重写 dispose 方法
@override
void dispose() {
  controller.dispose(); // 释放控制器资源
  super.dispose();
}

代码实例

Dart 复制代码

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

class HomePage extends StatefulWidget{
  const HomePage({super.key});

  @override
  State<StatefulWidget> createState() => _HomePageState();

}

class _HomePageState extends State<HomePage>{

  //创建文本编辑控制器
  //作用：管理TextField的文本内容，监听文本变化，获取和设置文本值，清空文本内容
  final controller = TextEditingController();


  // 带输入框的对话框
  void _showDeleteDialog() {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text("请输入名称"),
        content: TextField(  //输入框区域
          controller: controller, //绑定文本控制器，用于管理输入内容
          decoration: //输入框的装饰样式
          const InputDecoration(
            hintText: "请输入",//占位符文本，输入时消失
            border: OutlineInputBorder(),//边框样式，带外边框的输入框
          ),
        ),
        //操作按钮区域
        actions: [
          TextButton(
            child: const Text("取消"),
            onPressed: () => Navigator.pop(context),
          ),
          TextButton(
            child: const Text("提交"),
            onPressed: () {
              //这里写具体的提交逻辑事件
              print(controller.text);
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }

  //UI构建
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
           // const Text("home页面"),
            const SizedBox(height: 20),
            CupertinoButton(
              onPressed: _showDeleteDialog,//给按钮引入点击删除事件
              child: const Text("对话框"),
            ),
          ],
        ),


      ),
    );
  }

}