Flutter组件详解与实战

图书标准信息

• 作者 [加拿大]王浩然（Bradley Wang）
• 出版社 清华大学出版社
• 出版时间 2022-02
• 版次 1
• ISBN 9787302594208
• 定价 109.00元
• 装帧 其他
• 开本 其他
• 纸张 胶版纸
• 页数 472页
• 字数 662千字

【内容简介】

本书秉承Flutter框架“一切皆为组件”的核心设计思想，配合大量实例，系统且全面地介绍Flutter 2.0中各式各样的组件。同时，穿插于全书的“Flutter框架小知识”和“Dart语法小贴士”也可帮助刚入门的读者迅速掌握框架和编程语言中的基础知识。
  全书大致按照“由入门到精通”划分，又按功能板块细分，共分为3部分：基础篇（第1~5章）详细介绍基础布局、文字、图片、按钮、事件流、滚动列表等常用组件，既适合Flutter新手，也可帮助有一定经验的开发者查漏补缺。进阶篇（第6~12章）介绍更多与布局、动画、导航、人机交互、弹窗等功能相关的组件。后扩展篇（第13~15章）则重点介绍如Sliver机制、高效渲染、打破约束、自定义布局等难点。
  本书既可作为Flutter入门书籍，也可作为计算机软件从业人员的参考书，在工作或实战中遇到疑惑时通过本书附录中的索引，迅速查阅相关章节。

【作者简介】

王浩然（bradley wang），现职于美国硅谷互联网创业公司温哥华分部，担任软件架构师。于加拿大很好工程学院，滑铁卢大学计算机工程专业。曾任职多家五百强企业如 ibm，通用电气，td银行等。有近二十年桌面应用开发经历，自2011年起开始从事手机app以及web开发，2018年初带领其公司团队使用flutter，大幅提升开发效率。常活跃于各大英文开发者社区，github，并在技术社区 tack overflow 兼任管理职责。

精彩内容：

    第3章
    用 户 输 入
    用户输入是大部分应用程序必不可少的环节，本章将介绍2种基本的用户输入类型，分别是文本框和按钮。更复杂的用户作，如滑动手势和拖放等，可参第8章“人机交互”。
    3.1文本框
    文本框可以让用户在应用程序中输入文本内容，例如搜索栏、聊天窗的输入区域、表单中需要填写的快递信息或者登录界面的用户名和密码等地方都能找到文本框的身影。在flutter框架中，常见的文本框有textfield和cupertinotextfield这2个组件，分别对应安卓的material风格和io的cupertino风格。
    3.1.1textfield
    textfield组件是flutter中常用的文本框组件。它的基本用法非常简单，同时又支持各式各样的自定义。该组件虽然没有任何必传参数，但实战中经常需要传入onubmitted参数，用于在用户完成输入时处理业务逻辑。例如，可将用户输入的内容打印至终端，代码如下：
    textfield(
    onubmitted: (value) =
    print("ubmitted: value")
    )
    图31默认样式的文本框
    运行效果如图31所示。
    textfield共有5种： 无焦点、无焦点且错误、有焦点、有焦点且错误、禁用。通常有焦点时textfield需要呈现出与众不同的样式，帮助用户辨认输入的文字将被录入哪个文本框。禁用的文本框(enabled属为fale时)无法被用户选中，因此不可能有焦点。另外，这里的错误不是指程序运行时抛出异常或报错，而是指textfield可以呈现出一种错误的，主要用于提示用户可能输入有误，例如电子邮箱不符合格式等。
    在默认情况下，textfield组件遵循material界面风格，自带一条下画线。当页面焦点不在文本框时下画线呈灰，一旦获得页面焦点，下画线会自动变成程序当前主题风格的主(如蓝)，并出现光标闪烁。若该设备没有物理键盘，则屏幕软键盘会同时弹出。当需要提示输入有误时，下画线则会变成红。
    1. inputdecoration
    textfield组件的大部分外观修饰可通过向decoration参数传入inputdecoration实现。而inputdecoration本身包罗万象，可以通过其构造函数传入大量参数，以便设置前缀、后缀、提示信息、边框、填充及错误等需要显示的文本及样式。
    1) 前缀
    inputdecoration有3类前缀，如果同时设置则会依次显示，互不。类是可用icon属设置，在textfield前面插入一个图标。第2类是由preficon(前缀图标)和preficoncontraint(前缀图标的布局约束)属设置，用于定义显示在icon之后的前缀图标。第3类是prefix(前缀组件)、prefixtext(前缀文本)和prefixtyle(前缀样式)属设置，用于定义显示在icon和前缀图标之后的前缀文本。这里为了演示，同时使用上述3类前缀，代码如下：
    textfield(
    decoration: inputdecoration(
    icon: icon(icon.add)//图标(加号)
    preficon: icon(icon.lock)//前缀图标(小锁)
    prefixtext: "://"       //前缀文本内容
    )
    )
    图32文本框前缀在有无焦点时
    的效果对比
    运行时，icon属设置的图标(加号)首先被显示出来，接着是preficon属设置的前缀图标(小锁)。这2个图标时显示为灰，并在文本框获得焦点时变成程序的主题(如蓝)，并且在文本框获得焦点时，prefixtext中的内容也会被显示出来，运行效果如图32所示。
    上例代码中没有用到以下几个属： 首先preficoncontraint用于定义preficon属中图标的布局约束，例如规定小宽度等。另外，prefix属和prefixtext属只能二选一，前者可以接收任何widget类型，因此可以用于显示任意组件，而后者则直接接收tring类型，故只支持文本。若选用prefixtext使用文本，则可以用prefixtyle属修改文本样式。
    2) 后缀
    inputdecoration还有3类设置后缀的属。类是counter、countertext、countertyle等属，用于定义textfield的器。第2类是ufficon(后缀图标)和ufficoncontraint(后缀图标的布局约束)属，用于定义显示textfield末尾处的后缀图标。第3类是uffix(后缀组件)、uffixtext(后缀文本)和uffixtyle(后缀样式)属，用于定义后缀文本。例如，可同时设置这3类后缀，代码如下：许或禁止的字符串，而且还支持直接传入正规表达式(regexp)作为筛选条件。
    实战中，常使用的是blacklitingtextinputformatter和whitelitingtextinputformatter这2个继承于textinputformatter的类，分别对应“黑名单”和“白名单”。在2020年8月更新的flutter版本v1.20.0中，为响应“计算机术语应尽量避不必要的种族歧视”的号召，将这2类更改合并为filteringtextinputformatter类，并提供了2个构造函数，分别是allow(允许)和deny(禁止)。这2个构造函数都可以接收一个字符串或正规表达式作为筛选条件，并支持可选的recementtring参数，用于将筛选出的词语替换为任意其

【目录】

基础篇

章 基础布局

1.1 什么是组件

1.1.1 flutterlogo

1.1.2 ceholder

1.1.3 container

1.2 如何拆分布局

1.2.1 column

1.2.2 row

1.2.3 wrap

1.2.4 stack

1.2.5 itioned

1.3 组件尺寸和位置

1.3.1 sizedbox

1.3.2 align

1.3.3 center

……