首页
学习
活动
专区
圈层
工具
发布

Flutter中的文本输入框组件TextField

Flutter中的文本输入框使用TextField 这个组件来表示。 主要的属性如下: 1. maxLines 最大输入行。...默认为单行输入框,配置此参数后则为多行输入框; 2. onChanged 输入改变触发的事件。可以获取当前输入改变以后的值; 3. obscureText 隐蔽的文本。...主要的属性如下: (1). hintText 占位提示符。类似HTML中的 placeholder; (2). border 文本边框。...默认的输入框为一条下划线,添加此参数后4个边框都会显示; (3). labelText 输入框label名称; (4). labelStyle 输入框label的样式; 代码示例: import 'package...给输入框加上默认的值,代码如下: import 'package:flutter/material.dart'; class TextFieldPage extends StatefulWidget

6.5K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    第138期:flutter中的json和序列化

    在开发一款网络连接的应用程序时,它迟早会需要使用一些JSON。 这里简单介绍一下JSON在flutter中的使用。 Tips: 编码和序列化是将数据结构转换为字符串的同一件事。...GSON以及Jackson都是 Java中用来序列化json的类库。 Moshi则是Kotlin中用来序列化json的类库。 事实上Flutter中并没有类似的库。...因为,这样的库需要使用运行时反射,这在Flutter中是禁用的。运行时反射会干扰【树抖动】treeShaking,Dart已经支持了很长时间。...虽然我们不能在Flutter中使用运行时反射,但有些库提供了类似的API,是基于代码生成。 使用dart:convert内置库手动进行序列化 Flutter中的基本JSON序列化非常简单。...如果我们输入了错别字,或者将字段视为int而不是String,应用程序将不会编译,而不会在运行时崩溃。

    2.3K30

    JS 常见报错及异常处理办法总结

    ReferenceError:引用类型错误,当一个不存在的变量被引用时发生的错误。比如:console.log(a)。 SyntaxError:语法错误。比如 if(true) {。...当你引用一个没有定义的变量时,抛出一个ReferenceError; 当你使用变量的时候,这个变量必须要声明,或者你可以确保它在你当前的脚本或作用域 (scope) 中可用。...4、SyntaxError: Invalid or unexpected token 含义:捕获无效或意外的标记 为什么报错?...5、SyntaxError: Unexpected end of input 含义:意外的终止输入 为什么报错? 代码中某些地方的括号或引号不匹配缺失,缺少()、[]、{}等。...举个栗子 // 缺少括号 if(true) let obj = {id: 1 let arr = [1,2,3 // 缺少结束符号 (function () { console.log('hello

    12.9K20

    Flutter基础篇(9)-- 手把手教你用Flutter实现Web页面编写

    源码 打开git客户端,输入 git clone https://github.com/flutter/flutter_web.git,或者在其它git下载工具中输入git目录。...(5)如果某些包出现错误,请在命令行输入flutter packages upgrade来更新一些依赖的包。...Ctrl+Shift+P打开命名窗口,输入Flutter,选择Flutter: New Web Project创建项目,然后选择项目创建的路径即可自动生成项目。 ? 输入项目名称: ?...,意味着重新加载时应用程序状态将丢失,如果发现意外行为,则可能需要手动刷新页面。...您可能还需要更新源代码中引用这些资产的路径。 4.web/assets/FontManifest.json (可选) 如果应用程序具有自定义字体,则需要将其包含在此文件中。

    4.3K10

    【Flutter】Future 与 FutureBuilder 异步编程代码示例 ( FutureBuilder 构造函数设置 | 处理 Flutter 中文乱码 | 完整代码示例 )

    文章目录 一、FutureBuilder 简介 二、处理 Flutter 中的中文乱码 三、完整代码示例 四、相关资源 一、FutureBuilder 简介 ---- FutureBuilder 本质是组件..., 如果出现错误 , 则返回错误信息 /// 如果请求成功 , 返回从网络中请求的数据 if(snapshot.hasError) {...中的中文乱码 ---- 数据是以 UTF-8 格式进行编码的 , 只能以 UTF-8 格式进行解码 ; 创建 Utf8Decoder 解码器 , /// 处理中文乱码 Utf8Decoder.../posts/1'); var url = Uri.parse('https://www.devio.org/io/flutter_app/json/test_common_model.json..., 如果出现错误 , 则返回错误信息 /// 如果请求成功 , 返回从网络中请求的数据 if(snapshot.hasError) {

    3.1K20

    Dart 2.15 现已发布

    对于大多数 Dart 程序来说,这些内核的使用情况对开发者而言是透明的: 默认情况下,Dart 运行时系统在单个内核上运行所有的 Dart 代码,不过会使用其他内核来执行系统级任务,比如异步输入/输出,...例如,工作器 isolate 通过网络调用获得数据,将该数据解析为大型 JSON 对象图,然后将这个 JSON 图返回到主 isolate 中。...在之前的版本中,Dart SDK 不支持创建构造函数的拆分 (语言问题 #216)。这就有点烦人,因为在许多情况下,例如构建 Flutter 界面时,就需要用到构造函数的拆分。...Flutter SDK 2.8 版已为 Android 构建启用此配置,Flutter 团队正在考虑在后续版本中 为 iOS 构建启用此配置。...当发布了有问题的 package 版本时,我们通常的建议是发布一个小幅升级的新版本来修复意外问题。

    1.4K10

    政采云 Flutter 单元测试实践

    1 前言 从最初的探索,再到现在的团队成员共同完善 Flutter 单元测试,期间踩了不少坑也积累了不少经验,现将这些内容分享出来,希望能给对 Flutter 单元测试感兴趣的同学带来一些帮助。...在初期支持了组件单元测试批量运行,并在结束之后生成单元测试报告,在报告中可查看组件信息和单元测试覆盖率。...,我们创建了代码模板,只需要输入相应的关键词便可快速输入相应的代码,例如上面的代码只需要输入关键词 tpump 即可。...,经常需要 Mock 接口返回的数据,一般的做法就是通过抓包把接口返回的 Json 格式数据拷贝过来。...通过 models = json['models'] 赋值以后,使用过程中往 models 加 value 为 String 的类型会报错。

    75410

    Flutter异步编程Future与FutureBuilder的实用技巧

    ,以及FutureBuilder常见的用法?等。 在大家Flutter开发环境过程中遇到无法解决的问题可以在课程问答区进行提问,课程老师会对你进行辅导和帮助; 目录 什么是Future?...它类似于ES6中的Promise,提供then和catchError的链式调用; Future是dart:async包中的一个类,使用它时需要导入dart:async包,Future有两种状态: pending...- 执行中; completed - 执行结束,分两种情况要么成功要么失败; Future的常见用法?...在构建器函数中,我们检查connectionState的值,并使用AsyncSnapshot中的数据或错误返回不同的窗口小部件。...https://flutter-academy.com/async-in-flutter-futurebuilder/ FutureBuilder的使用?

    3.1K10

    手摸手实现一个编译器(上)

    --extra-options-file 如果参数太多,在 CLI 中输入确实很不方便,也不够直观。这时通过指定一个 JSON 格式的文件作为 peg.generate 参数。...输入文本如果匹配上了表达式,就会执行后面的 JS 函数。像 Integer "integer" 还有明确的错误消息,啥意思呢?...JSON Grammar ----- // value 的表达式是任意空格加value,处理函数直接返回value // 函数体内的 value 是表达式 value:value 的前者,后者从其他规则中获取...{ return parseFloat(text()); } 到这里就把 PEG.js 中才有的表达式结合 json.pegjs 过了一遍,了解完它们的基本用法。...总而言之,写一个编译器,无非就 3 件事: 基于输入字符串做解析表达式匹配(正则匹配); 基于生成的结果做转换; 输出结果; PEG.js 只是简化了我们去执行上述动作的流程。

    1.2K10

    【JavaScript】解决 JavaScript 语言报错:Uncaught SyntaxError: Unexpected identifier

    一、背景介绍 在 JavaScript 编程中,“Uncaught SyntaxError: Unexpected identifier” 是一种常见的错误。...语法错误通常意味着代码不符合 JavaScript 语言的语法规则。 Unexpected identifier: 表示在某个位置出现了意外的标识符,通常是因为代码结构不完整或存在语法错误。...缺少必要的标点符号 let obj = { name: "John" age: 30 // Uncaught SyntaxError: Unexpected identifier } 在这个例子中...使用了不正确的标识符 let 123name = "John"; // Uncaught SyntaxError: Unexpected identifier 在这个例子中,123name 不是一个有效的标识符...变量名与保留字冲突 let class = "JavaScript"; // Uncaught SyntaxError: Unexpected identifier 在这个例子中,class 是 JavaScript

    2.8K10

    Flutter 网络操作

    上期回顾 ---- 在前面的文章中我们在Flutter中的本地存储,我们可以将用户的数据存储在移动设备上,但是当用户清空设备或者更换设置这些用户存储的信息就会面临丢失的问题。...那么,我们就不得不考虑将用户的信息存储一个第三方的地方,没错就是服务器。 那么,今天我们就来看下Flutter中的网络操作。...节点下新增如下配置 http: ^0.11.3+16 点击开发工具提示的packages get按钮或者在命令行输入flutter packages get来同步第三方插件 在自己的Dart文件中引入插件即可正常使用了...在Flutter中默认已经为我们提供了convert库来处理json字符串的转换 我们可以使用json.encode()或者json.decode()方法来序列化或者反序列化json字符。...当我们点击RaisedButton时就会获取TextField输入的内容并且去请求服务器并返回。 对了,在上面的代码中还用到了一个User对象,这是需要自己定义的用来存储接口返回信息的。

    3.6K40

    JSON.stringify()与JSON.parse()

    最后会输出 '活下去'是不是很意外,是不是很惊喜。竟然是这个结果。这的是我们都没有想到对吧?子所以这这个结果:因为:obj这个对象中有 toJSON()方法。...在对象中,作为Value值的时候,在序列的时候将会忽略。在对象中,将会被转化为null。单独转化时,将会变为undefined。...或者说方法会被丢失也就是说:如果你原来的某一个对象中包含方法,在使用JSON之后,该方法会被丢失的哈~2.JSON 数据格式为键/值对。...Uncaught SyntaxError 未捕获的语法错误3.JSON 可以将任何标准合法的 JSON 数据格式化保存,不只是数组和对象。...SyntaxError 未捕获的语法错误因为:使用JSON.parse() 必须要符合JSON字符串。

    84710
    领券