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

西西学代码2025-10-18 1:06

第一种风格

Cupertino方案

CuptinoAlertDialog+CupertinoTextField+CupertinoDialogAction

效果图

具体代码

Dart 复制代码

//创建文本编辑控制器
  //作用：管理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

效果图

具体代码

Dart 复制代码

//创建文本编辑控制器
  //作用：管理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("确定"),
            ),
          ],
        );
      },
    );
  }