美文网首页
Flutter 输入框弹窗

Flutter 输入框弹窗

作者: xxxixxxx | 来源:发表于2022-11-21 16:41 被阅读0次

先看效果图

效果图

代码

复制后 贴在 main.dart 可直接操作
如果有使用 Get 可以看看注释掉的代码

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Material App',
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Material App Bar'),
      ),
      body: Column(
        children: [
          TextButton(
            onPressed: () async {
              var text = await SendCommentPage.show2<String>(context);
              print(text);
            },
            child: const Text('弹窗'),
          )
        ],
      ),
    );
  }
}

class SendCommentPage extends StatelessWidget {
  // 如果使用 Get
  // static Future<T?>? show<T>() {
  //   return Get.to(() => SendCommentPage(),
  //       opaque: false,
  //       preventDuplicates: false,
  //       duration: const Duration(microseconds: 0),
  //       fullscreenDialog: true);
  // }

  static Future<T?> show2<T>(BuildContext context) {
    return Navigator.of(context).push(
      PageRouteBuilder(
        // 关键
        opaque: false,
        pageBuilder: (BuildContext context, Animation<double> animation,
            Animation<double> secondaryAnimation) {
          return SendCommentPage();
        },
      ),
    );
  }

  SendCommentPage({super.key});

  final focusNode = FocusNode();
  final controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    // 加个小延迟
    Timer(const Duration(milliseconds: 50), (() {
      focusNode.requestFocus();
    }));

    return Scaffold(
        // 关键
        backgroundColor: Colors.black.withAlpha((255 * 0.4).toInt()),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            //撑起上部分
            Expanded(child: GestureDetector(
              onTap: () {
                Navigator.pop(context);
                // Get.back();
              },
            )),
            Container(
                padding: const EdgeInsets.all(8),
                color: Colors.white,
                child: TextField(
                  controller: controller,
                  cursorColor: Colors.black,
                  decoration: const InputDecoration(
                    hintText: "说点什么吧~",
                  ),
                  focusNode: focusNode,
                  minLines: 3,
                  maxLines: 6,
                )),
            Container(
                color: Colors.white,
                padding: const EdgeInsets.fromLTRB(40, 10, 40, 8),
                width: double.infinity,
                child: TextButton(
                    onPressed: () {
                      Navigator.pop(context, controller.text);
                      // Get.back(result: controller.text);
                    },
                    child: const Text("发送, 看 log"))),
          ],
        ));
  }
}

Flutter 输入弹窗
Flutter 键盘弹窗
Flutter 弹窗

相关文章

  • Flutter 输入框弹窗

    先看效果图 代码 复制后 贴在 main.dart 可直接操作如果有使用 Get 可以看看注释掉的代码 Flutt...

  • Flutter 实现输入框选择器的功能

    在使用Flutter的使用,需要实现点击输入框,然后底部出现菜单弹窗,那么首先就需要做到以下几点:1、文本输入框不...

  • iOS 自定义UIAlertView 展示不同风格弹窗

    因项目中用到不同的弹窗风格,所以决定自己写一个弹窗,继承UIView。 默认风格 密码输入框风格 普通输入框风格 ...

  • jq中的弹窗与范文(常见表格和按钮弹窗,ajax遍历)

    - jq弹窗 这里是弹窗的提示 全为输入框 ,可以用文本域进行赋值 触发弹窗事件 给文本域赋值 设置弹窗 初始化弹...

  • 微信效果记录_懒汉式

    1、弹窗,一个输入框,一个确定,一个取消 1、弹窗,一个输入框,一个确定,一个取消 wxml css js:

  • JS Windows对象

    window对象 prompt 弹出一个带输入框的弹窗 confirm 弹出一个带确认取消的弹窗 a...

  • Flutter 弹窗

    1、showDialogshowDialog:半透明背景弹窗 打电话弹窗:AlertDialog:alert内容B...

  • flutter弹窗

    一、iOS风格弹窗 风格一: 风格二: 风格三: 风格四:底部 二、GetX的Dialog风格 1、自定义的 2、...

  • flutter弹窗插件 -- oktoast

    flutter 开发中常用的弹窗插件oktoast,使用非常简单插件地址:oktoast | Flutter Pa...

  • js 5-11 综合

    1.console.log(); 2.document.write(); 3.alert(); 二、弹窗输入框: ...

网友评论

      本文标题:Flutter 输入框弹窗

      本文链接:https://www.haomeiwen.com/subject/gzhwxdtx.html