第二百五十八回

文章目录

  • 1. 概念介绍
  • 2. 思路与方法
    • 2.1 实现思路
    • 2.2 实现方法
  • 3. 示例代码
  • 4. 内容总结

我们在上一章回中介绍了"模拟对话窗口的页面"相关的内容,本章回中将介绍如何创建一个可以输入内容的对话框.闲话休提,让我们一起Talk Flutter吧。

1. 概念介绍

我们在本章回中介绍的对话框是一种自定义的对话框,它和普通的对对话框类似,也是弹出式窗口,它最大的特点在弹出式窗口中支持输入功能。下面是具体的效果图,我
们将在本章回中详细介绍它的的实现方法。039inputDialog

2. 思路与方法

2.1 实现思路

实现弹出式窗口可以自己创建,也可以复用官方的AertDialog或者AboutDialog组件,我们选择后者。窗口的输入内容使用TextField组件实现。剩下的两个确认
按钮可以复用Dialog中的,或者自定义。我们选择后者,因为官方的两个按钮布局是固定的,不好修改。

2.2 实现方法

有了实现思路后,我们就可以按照思路来创建对话框,下面是详细的实现步骤,请大家参考:

  • 创建一个AlertDialog组件,它负责显示窗口;
  • 创建一个布局,布局中包含TextField和两个按钮组件;
  • 把上一步中创建的布局赋值给AlertDialog的content属性;
  • 使用ShowDialog方法实现对话框的弹出功能;

3. 示例代码

///自定义Dialog:中间是一个输入框,下面是两个按钮
_showCustomDialog() {showDialog(context: context,builder: (BuildContext context) {double width = MediaQuery.of(context).size.width;double height = MediaQuery.of(context).size.height;///自定义Dialog,通过container控制大小return AlertDialog(///两颜色同时设置才有效果surfaceTintColor: Colors.white,///这个是对话框窗口的背景颜色backgroundColor: Colors.white,///修改对话框的圆角,默认带圆角,可以不处理,下面的代码给对话框镶了一个金边shape: OutlineInputBorder(borderRadius: BorderRadius.circular(30),borderSide: const BorderSide(color: Colors.yellow,width: 4),),content: Container(alignment: Alignment.center,padding: const EdgeInsets.only(top: 48,bottom: 8),width: width - 16*2,height: height/4,decoration: BoxDecoration(borderRadius: BorderRadius.circular(0),),child: Column(children: [Expanded(flex: 2,child: TextField(decoration: InputDecoration(///输入框最左侧和最右侧的图标prefixIcon: const Icon(Icons.mail),suffixIcon: const Icon(Icons.delete),///输入框的填充颜色filled: true,fillColor: Colors.black26,///输入框的边框,不同状态下有不同的边框enabled: true,disabledBorder: OutlineInputBorder(borderSide: const BorderSide(color: Colors.redAccent,width: 4),borderRadius: BorderRadius.circular(16),),border: OutlineInputBorder(borderSide: const BorderSide(color: Colors.redAccent,width: 4),borderRadius: BorderRadius.circular(16),),///输入时显示的边框focusedBorder: OutlineInputBorder(borderSide: const BorderSide(color: Colors.blue,width: 4),borderRadius: BorderRadius.circular(16),),),),),Expanded(flex: 1,child: Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [ElevatedButton(onPressed: (){}, child: const Text("Yes"),),ElevatedButton(onPressed: (){}, child: const Text("No"),),],),)],),),);},);
}

上面是实现对话框的代码,代码中添加了注释方便大家理解,此外,我再介绍一些细节:对话框的背景颜色需要同时修改前景和背景颜色才有效果;对话框默认有圆角,
如果想修改圆角的大小可以通过它的shap属性来修改;对话框中所有的内容都通过content属性来控制,自定义的空间非常高;对话框的大小与它里面的子控件的大小相
关,可以通过控制content中组件的大小间接控制对话框的大小;

4. 内容总结

最后,我们对本章回的内容做一个全面的总结:

  • 创建自定义对话框以AlertDialog为基础;
  • 对话框中自定义的内容通过content属性来实现;
  • 对话框的颜色和形状等主题相关的内容仍然使用原来的属性;
  • 弹出对话框时仍然使用官方提供的showDialog()方法;
    看官们,与"创建一个可以输入内容的对话框"相关的内容就介绍到这里,大家可以自定义属于自己风格的对话框,欢迎大家在评论区交流与讨论!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/611672.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Rust 工作空间

Rust 第23节 工作空间 工作空间 当一个项目需要多个crate时,就会用到工作空间 先在空白目录下创建一个 Cargo.toml 这个Cargo.toml 就是对工作空间进行管理 写上属性 [workspace]members ["adders" ]比如一个二进制crate 写完之后在命令行创建它 同…

C++ 多态以及多态的原理

文章目录 多态的概念多态的构成条件虚函数的重写虚函数重写的两个例外 重载、重写(覆盖)、重定义(隐藏)对比C11 final 和 override关键字抽象类接口继承和普通继承多态的原理虚函数表多态的原理 单继承和多继承关系的虚函数表单继承中的虚函数表多继承中的虚函数表 多态的概念 …

Linux安装nginx并设置为开机自启动

1.更新gcc安装包 yum install -y gcc pcre-devel zlib-devel2.下载文件并解压 命令如下 wget https://nginx.org/download/nginx-1.18.0.tar.gz //解压nginx tar -zxvf nginx-1.18.0.tar.gz //进入后进行指定安装位置 ./configure --prefix/usr/local/nginx //安装 make &…

面试宝典之spring框架常见面试题

F1、类的反射机制有啥用? (1)增加程序的灵活性,可扩展性,动态创建对象。 (2)框架必备,任何框架的封装都要用反射。(框架的灵魂) F2、获取Class对象的三种方…

boost graph计算最短路径程序异常退出问题解决

之前使用的boost 1.55版本&#xff0c;升级使用1.73版本后&#xff0c;在调用dijkstra_shortest_paths时会出现弹窗 abort()has been called 点击调试&#xff0c;看调用栈信息&#xff0c;发现计算的距离值为负数。 刚开始时&#xff0c;距离初始值为numeric_limits<long&g…

小程序分销商城,打造高效线上购物体验

小程序商城系统&#xff0c;为您带来前所未有的在线购物体验。它不仅提供线上商城购物、在线下单、支付及配送等功能&#xff0c;还凭借其便捷性成为众多商家的首选。 想象一下&#xff0c;商家可以展示琳琅满目的商品&#xff0c;包括图片、文字描述、价格及库存等详尽信息。而…

说说java8新特性

java8新特性主要有&#xff1a;函数式接口、lambda表达式、Stream API、接口对于static方法和默认方法的支持。 一、函数式接口 函数式接口指的是只有一个抽象方法的接口&#xff0c;函数式接口用FunctionalInterface注解修饰&#xff0c;java中常用的函数式接口有Runnable、C…

鸿蒙开发笔记 2

提示&#xff1a;今天又是美好的一天呢&#xff01;&#xff01;&#xff01; 文章目录 一、网络管理 一、网络管理 应用权限 http请求

内网渗透实战攻略

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 &#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 介绍 什么是内网&#xff1f; 什么是内网渗透&#xff1f; 内网渗透的目的&#xff1a; 内网…

2024--Django平台开发-Django知识点(六)

day06 Django知识点 今日概要&#xff1a; Form和ModelForm组件【使用】【源码】缓存【使用】ORM【使用】其他&#xff1a;ContentTypes、Admin、权限、分页、信号等 1.Form和ModelForm组件 背景&#xff1a;某个公司后台管理项目。 垃圾 def register(request):"&quo…

k8s之pod基础

k8s之pod基础 pod&#xff1a; pod是k8s中最小的资源管理组件 pod也是最小化运行容器化的应用的资源管理对象 pod是一个抽象的概念&#xff0c;可以理解为一个或者多个容器化应用的集合 在一个pod当中运行一个容器是最常用的方式 在pod当中同时运行多个容器&#xff0c;…

[机缘参悟-123] :实修 - 东西方各种思想流派实修的要旨与比较?

目录 前言&#xff1a; 一、东方各种思想流派实修的要旨&#xff1f; 1.1 儒、释、道、法的主要思想 1.2 儒、释、道、法各种追求的目标 1.3 儒、释、道、法各自修行的法门或修行的途径 二、西方灵修的各种派别的要旨&#xff1f; 2.0 西方灵修的各种派别 2.1 玛雅星系…

Java异常处理解析

在 Java 编程中&#xff0c;异常处理是一种重要的机制&#xff0c;用于处理程序运行时可能发生的意外情况。以下是对 Java 异常处理的解析&#xff1a; 异常的概念&#xff1a;异常是指在程序执行过程中发生的意外事件&#xff0c;可能导致程序无法正常运行。Java 中的异常可以…

Qt QRadioButton单选按钮控件

文章目录 1 属性和方法1.1 文本1.2 选中状态1.3 自动排他1.4 信号和槽 2 实例2.1 布局2.2 代码实现 Qt中的单选按钮类是QRadioButton它是一个可以切换选中&#xff08;checked&#xff09;或未选中&#xff08;unchecked&#xff09;状态的单选按钮单选按钮常用在“多选一”的场…

【算法题】44. 通配符匹配

题目 给你一个输入字符串 (s) 和一个字符模式 (p) &#xff0c;请你实现一个支持 ? 和 * 匹配规则的通配符匹配&#xff1a; ? 可以匹配任何单个字符。 * 可以匹配任意字符序列&#xff08;包括空字符序列&#xff09;。 判定匹配成功的充要条件是&#xff1a;字符模式必须能…

分布式全局id

分布式全局id snowflake 算法是 twitter 开源的分布式 id 生成算法&#xff0c;采用 Scala 语言实现&#xff0c;是把一个 64 位的 long 型的 id&#xff0c;1 个 bit 是不用的&#xff0c;用其中的 41 bits 作为毫秒数&#xff0c;用 10 bits 作为工作机器 id&#xff0c;12 …

基于sprinmgboot实习管理系统源码和论文

随着信息化时代的到来&#xff0c;管理系统都趋向于智能化、系统化&#xff0c;实习管理也不例外&#xff0c;但目前国内仍都使用人工管理&#xff0c;市场规模越来越大&#xff0c;同时信息量也越来越庞大&#xff0c;人工管理显然已无法应对时代的变化&#xff0c;而实习管理…

前端er们,你真的会用useState么?

React开发者们,我们都喜欢useState hook强大且简单的功力,但事实上,即使是经验最丰富的代码员也可能出错。 当涉及到在React中管理状态时,一个错误可能导致bug、性能问题,甚至更糟糕的是你的工作岌岌可危。 在本文中,我们将揭示5个需要你远离的常见useState错误。 继续关注,…

人工智能复习

机器学习中线性回归和逻辑回归&#xff1a; 机器学习的分类&#xff1a; 监督学习和无监督学习&#xff0c;半监督学习 监督学习&#xff08;Supervised Learning&#xff09;&#xff1a; 监督学习是一种利用带有标签&#xff08;标记&#xff09;的数据进行训练的机器学习…

使用Windbg动态调试目标进程的一般步骤详解

目录 1、概述 2、将Windbg附加到已经启动起来的目标进程上&#xff0c;或者用Windbg启动目标程序 2.1、将Windbg附加到已经启动起来的目标进程上 2.2、用Windbg启动目标程序 2.3、Windbg关联到目标进程上会中断下来&#xff0c;输入g命令将该中断跳过去 3、分析实例说明 …