Flutter-iOS风格简单的弹窗输入框组件

iOS风格的弹窗直接贴代码。

import 'package:flutter/cupertino.dart'; // iOS风格组件
import 'package:flutter/material.dart';

Future<String?> showTextAlertDialog(
    {required BuildContext context,
    String? defaultValue,
    String? title,
    String? placeholder,
    String? okText,
    String? cancelText}) async {
  TextEditingController controller = TextEditingController();
  controller.text = defaultValue ?? "";
  final FocusNode focusNode = FocusNode();
  return await showDialog<String>(
      context: context,
      builder: (context) {
        WidgetsBinding.instance.addPostFrameCallback((_) {
          FocusScope.of(context).requestFocus(focusNode);
        });
        return CupertinoAlertDialog(
          title: title == null ? null : Text(title),
          content: Padding(
            padding: const EdgeInsets.all(5),
            child: CupertinoTextField(
              controller: controller,
              focusNode: focusNode,
              placeholder: placeholder,
            ),
          ),
          actions: <Widget>[
            TextButton(
              child: Text(cancelText ?? 'Cancel'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            TextButton(
              child: Text(okText ?? 'OK'),
              onPressed: () {
                Navigator.of(context).pop(controller.text);
              },
            ),
          ],
        );
      });
}

使用方式:

Widget build(BuildContext context) {
  return Center( 
    child: OutlinedButton.icon(
                onPressed: () async {
                    String? text = await showTextAlertDialog(
                              context: context, title: "添加");
                     print("text: $text");
                 },
                 icon: const Icon(Icons.add),
                 label: const Text("添加")));
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容