flutter套件详解,flutter 商品列表

Flutter TextField 文本输入框的基本属性及详解

源码分析：

分析源码可得，TextField 是有状态 StatefulWidget，有丰富的属性，自定义化较高，实践中需要合理利用各种回调；

1、光标的相关属性；cursorColor 为光标颜色，cursorWidth 为光标宽度，cursorRadius 为光标圆角；其中 Radius 提供了 circle 圆角和 elliptical 非圆角两种；

2、textAlign 为文字起始位置，可根据业务光标居左/居右/居中等；注意只是文字开始方向；textDirection 问文字内容方向，从左向右或从右向左；

3、maxLength 为字符长度，设置时默认是展示一行，且右下角有编辑长度与整体长度对比；与 maxLengthEnforced 配合，maxLengthEnforced 为 true 时达到最大字符长度后不可编辑；为 false 时可继续编辑展示有差别；

4、设置 maxLength 之后右下角默认有字符计数器，设置 TextField.noMaxLength 即可只展示输入字符数；

5、maxLines 为允许展现的最大行数，在使用 maxLength 时内容超过一行不会自动换行，因为默认 maxLines=1，此时设置为 null 或固定展示行数即可自动换行；区别在于 null 会展示多行，而 maxLines 最多只展示到设置行数；

6、obscureText 是否隐藏编辑内容，常见的密码格式；

7、enableInteractiveSelection 长按是否出现【剪切/复制/粘贴】菜单；不可为空；

8、keyboardAppearance 为键盘亮度，包括 Brightness.dark/light 两种，但仅限于 iOS 设备；

9、textCapitalization 文字大小写；理论上 sentences 为每句话第一个字母大写；characters为每个字母大写；words 为每个单词首字母大写；但该属性仅限于 text keybord，和尚在本地更换多种方式并未实现，有待研究；

10、keyboardType 为键盘类型，和尚理解整体分为数字键盘和字母键盘等；根据设置的键盘类型，键盘会有差别；

a. 数字键盘

--1-- datetime 键盘上可随时访问 : 和 /；

--2-- phone 键盘上可随时访问 # 和 *；

--3-- number 键盘上可随时访问 + - * /

b. 字母键盘

--1-- emailAddress 键盘上可随时访问 @ 和 .；

--2-- url 键盘上可随时访问 / 和 .；

--3-- multiline 适用于多行文本换行；

--4-- text 默认字母键盘；

11、textInputAction 通常为键盘右下角操作类型，类型众多，建议多多尝试；

12、autofocus 是否自动获取焦点，进入页面优先获取焦点，并弹出键盘，若页面中有多个 TextField 设置 autofocus 为 true 则优先获取第一个焦点；

13、focusNode 手动获取焦点，可配合键盘输入等减少用户操作次数，直接获取下一个 TextField 焦点；

14、enabled 设为 false 之后 TextField 为不可编辑状态；

15、decoration 为边框修饰，可以借此来调整 TextField 展示效果；可以设置前置图标，后置图片，边框属性，内容属性等，会在后续集中尝试；若要完全删除装饰，将 decoration 设置为空即可；

16、inputFormatters 为格式验证，例如原生 Android 中通常会限制输入手机号或其他特殊字符，在 Flutter 中也可以借此来进行格式限制，包括正则表达式；使用时需要引入 package:flutter/services.dart；

a. LengthLimitingTextInputFormatter 限制最长字符；

b. WhitelistingTextInputFormatter 仅允许输入白名单中字符；如 digitsOnly 仅支持数字 [0-9]；

c. BlacklistingTextInputFormatter 防止输入黑名单中字符；如 singleLineFormatter 强制输入单行；

分析源码 RegExp("[/]") 可以设置正则表达式；

17、onChanged 文本内容变更时回调，可实时监听 TextField 输入内容；

18、controller 文本控制器，监听输入内容回调；

19、onTap 点击 TextField时回调；

20、onEditingComplete 在提交内容时回调，通常是点击回车按键时回调；

21、onSubmit 在提交时回调，不可与 onEditingComplete 同时使用，区别在于 onSubmit 是带返回值的回调；

问题小结：

当 TextField 设置 enableInteractiveSelection 属性后长按会出现菜单，默认为英文，可通过设置 Flutter 国际化来处理；

（1）在 pubspec.yaml 中集成 flutter_localizations；

2）在 MaterialApp 中设置本地化代理和支持的语言类型；

（1）将 maxLength 设置为 null 仅使用 LengthLimitingTextInputFormatter 限制最长字符；

（2）设置 InputDecoration 中 decoration 属性为空；但是底部有空余，只是隐藏而并非消失；

相关问答

Q1: Flutter组件TextFormField详解

TextFormField继承自FormField，是flutter表单提交相关组件，类似于html中的 input type="text" / ，是个文本输入框。需要在 Form 组件内部使用，否则无法正确提交数据。

未完待续

Q2: 跨平台技术；H5和Flutter谁是未来？

前言

为什么跨平台是发展趋势？

同一个应用，各个“端”独立开发，不仅开发周期长，而且人员成本高。同时，作为技术人员，也不应该满足于这种重复、低能的工作状态。在这样的形势下，跨平台的技术方案也受到越来越多人和企业的关注。

本篇文章我将从原理、优缺点等方面为大家分享跨平台技术

一. H5

说到跨平台，没人不知道H5。不管是在Mac、Windows、Linux、iOS、Android还是其他平台，只要给一个浏览器，连“月球”上它都能跑。

1.浏览器架构

下面，我们来看看让H5如此横行霸道的浏览器的架构：

浏览器由以上7个部分组成，而“渲染引擎”是性能优化的重中之重，一起了解其中的渲染原理。

2.渲染引擎原理

不同的浏览器内核不同，渲染过程会不太一样，但主要流程还是一致的。

分为下面6步骤：

从以上6步，我们可以总结渲染优化的要点：

以上就是浏览器端的内容。但H5作为跨平台技术的载体，是如何与不同平台的App进行交互的呢？这时候JSBridge就该出场了。

3.JSBridge原理

JSBridge，顾名思义，是JS和Native之间的桥梁，用来进行JS和Native之间的通信。

通信分为以下两个维度：

那么App内加载H5的过程是什么样的呢？

4.App打开H5过程

打开H5分为4个阶段：

这四步，对应的过程如上图所以，我们可以针对性的做性能优化。

5.优缺点分析

下面，我们进行H5的优缺点分析：

优点

缺点

虽然H5目前还存在不足，但随着PWA、WebAssembly等技术的进步，相信H5在未来能够得到越来也好的发展。

二.小程序

2018年是微信小程序飞速发展的一年，19年，各大厂商快速跟进，已经有了很大的影响力。下面，我们以微信小程序为例，分析小程序的技术架构。

小程序跟H5一样，也是基于Webview实现。但它包含View视图层、App Service逻辑层两部分，分别独立运行在各自的WebView线程中。

1.View

可以理解为h5的页面，提供UI渲染。由WAWebview.js来提供底层的功能,具体如下：

每个窗口都有一个独立的WebView进程，因此微信限制不能打开超过5个层级的页面来保障用户体验。

2. App Service

提供逻辑处理、数据请求、接口调用。由WAService.js来提供底层的功能,具体如下：

运行环境：

仅有一个WebView进程

3.View App Service通信

视图层和逻辑层通过系统层的JSBridage进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层将触发的事件通知到逻辑层进行业务处理。

4. 优缺点分析

优点

缺点

既然WebView性能不佳，那有没有更好的方案呢？下面我们看看React Native。

三.React Native

RN的理念是在不同平台上编写基于React的代码，实现Learn once, write anywhere。

Virtual DOM在内存中，可以通过不同的渲染引擎生成不同平台下的UI，JS和Native之间通过Bridge通信

1.React Native 工作原理

在 React 框架中，JSX 源码通过 React 框架最终渲染到了浏览器的真实 DOM 中，而在 React Native 框架中，JSX 源码通过 React Native 框架编译后，与Native原生的UI组件进行映射，用原生代替DOM元素来渲染，在UI渲染上非常接近Native App。

2.React Native 与Native平台通信

3.优缺点分析

优点

缺点

4.RN展望

虽然RN还存在不足，但RN新版本已经做了如下改进，并且RN团队也在积极准备大版本重构，能否成为开发者们所信赖的跨平台方案，让我们拭目以待。

既然React Native在渲染方面还摆脱不了原生，那有没有一种方案是直接操控GPU，自制引擎渲染呢，我们终于迎来了Flutter！

四.Flutter

Flutter是Google开发的一套全新的跨平台、开源UI框架，支持iOS、Android系统开发，并且是未来新操作系统Fuchsia的默认开发套件。渲染引擎依靠跨平台的Skia图形库来实现，依赖系统的只有图形绘制相关的接口，可以在最大程度上保证不同平台、不同设备的体验一致性，逻辑处理使用支持AOT的Dart语言，执行效率也比JavaScript高得多。

1.Flutter架构原理

2.Dart优势

很多人会好奇，为什么Flutter要用Dart，而不是用JavaScript开发，这里列下Dart的优势

3.优缺点分析

优点

缺点