Flutter 之 装饰容器DecoratedBox （四十四）

DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰（Decoration），如背景、边框、渐变等。

创新互联主要从事成都网站建设、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务都兰,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

DecoratedBox定义如下：

我们通常会直接使用BoxDecoration类，它是一个Decoration的子类，实现了常用的装饰元素的绘制。

圆形头像

圆角头像

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 属性为空；但是底部有空余，只是隐藏而并非消失；

Flutter-Text文本组件

在开发中，文本是我们最常接触的控件。这篇博客来分享一下 Flutter 中的 Text 文本组件，我们展示的文本都可以用这个组件来展示，希望看文章的小伙伴有所帮助。

这样我们就可以在界面当中显示一个文本，显示是 Hello Flutter 。下面我们来说说 Text 组件的属性：

设置文本颜色：

设置文本大小：

设置文本样式-加粗：

设置文本样式-斜体：

设置文本位置：

TextAlign可选属性： center 、 end 、 start 、 justify 、 left 、 right 。

设置文本高度：

设置文本最大行数：

设置文本有下划线：

设置文本有虚线类型下划线：

设置文字间隔：

文本超过最大行数设置 ... ：

Flutter（6）：基础组件之Image

Image是一个用于展示图片的组件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。

Image.asset - 用于从资源目录的显示图片,需要在 pubspec.yaml 文件中声明。

Image.network - 用于从网络上显示图片。

Image.file - 用于从文件里显示图片。

Image.memory - 用于从内存里（Uint8List）显示图片。

alignment → AlignmentGeometry - 图像边界内对齐图像。

centerSlice → Rect - 九片图像的中心切片。

color → Color - 该颜色与每个图像像素混合colorBlendMode。

colorBlendMode → BlendMode - 用于 color 与此图像结合使用。

fit → BoxFit - 图像在布局中分配的空间。

gaplessPlayback → bool - 当图像提供者发生变化时，是继续显示旧图像（true）还是暂时不显示（false）。

image → ImageProvider - 要显示的图像。

matchTextDirection → bool - 是否在图像的方向上绘制图像 TextDirection。

repeat → ImageRepeat - 未充分容器时，是否重复图片。

height → double - 图像的高度。

width → double - 图像的宽度。

加载资源图片需要将图片资源放入工程中，例如：新建images文件夹，将图片放在该文件夹下，图片适配则是使用ios的方式1X，2X，3X：

然后在pubspec.yaml中配置assets：

加载资源/网络/本地文件图片/内存图片：

占位图加载图片：

圆形图片：1.裁剪实现 2.CircleAvatar实现 3.Container边框实现

圆角图片：1.裁剪实现 2.Container边框实现

BoxFit.contain 全图居中显示但不充满，显示原比例

BoxFit.cover 图片可能拉伸，也可能裁剪，但是充满容器

BoxFit.fill 全图显示且填充满，图片可能会拉伸

BoxFit.fitHeight 图片可能拉伸，可能裁剪，高度充满

BoxFit.fitWidth 图片可能拉伸，可能裁剪，宽度充满

BoxFit.scaleDown 效果和contain差不多， 但是只能缩小图片，不能放大图片

下一节学习基础组件之Text

Flutter基础Widget之按钮（RaisedButton、FlatButton、OutlineButton，IconButton）

Flutter中给我们预先定义好了一些按钮控件给我们用，常用的按钮如下

我们先来看看MaterialButton中的属性，可以看到能设置的属性还是很多的。

下面我们来看看常用属性

而在Android中如果我们要修改按钮样式的话，需要通过selector和Shape等方式进行修改，相比较Flutter来说是要麻烦不少的

RaisedButton的构造方法如下，由于继承自MaterialButton，所以MaterialButton中的大多数属性这边都能用，且效果一致，这里就不在赘述了

下面我们来看一下属性

接收一个方法，点击按钮时回调该方法。如果传null，则表示按钮禁用

如下图所示

按钮文本控件，一般都是传一个Text Widget

按钮颜色

按钮的文本颜色

点击按钮时水波纹颜色

高亮颜色，点击（长按）按钮后的颜色

阴影范围，一般不会设置太大

内边距,使用

或者

shape用来设置按钮的形状，其接收值是ShapeBorder类型，ShapeBorder是一个抽象类，我们来看看有哪些实现类

可以看到，实现类还是很多的，我们主要来看看常用的即可。

borderRadius 接收一个BorderRadius类型的值，常用方法如下

我们可以把borderRadius分为上下左右四个方向，下面的方法都是对这四个方向进行设置，

带斜角的长方形边框

圆形边框

圆角矩形

两端是半圆的边框

FlatButton跟RaisedButton用法基本一致，下面我们就直接用一下

注意，OutlineButton是一个有默认边线且背景透明的按钮，也就是说我们设置其边线和颜色是无效的，其他属性跟MaterialButton中属性基本一致

下面我们直接来使用

效果如下：

IconButton是直接继承自StatelessWidget的，默认没有背景

我们来看一下他的构造方法

可以看到，icon是必填参数

icon接收一个Widget，但是一般我们都是传入一个Icon Widget

其他属性跟MaterialButton中的属性用法基本一致

我们来用一下

效果如下：

我们也可以传一个Text或其他Widget，这个大家自行尝试吧

如果我们需要设置按钮的最小宽度以及高度，button属性中并没有提供对应的设置方法

使用如下：

Flutter中Button内容大概就是这些

Flutter用边框实现三角形 2022-06-06 周一

Flutter和前端一样，采用盒模型。

前端中有用CSS，只用边框实现三角形的案例，这个可以借鉴过来

2018-04-14 借助边框特性实现边框三角形

flutter 中用边框实现三角形

web前端入门到实战：通过CSS边框实现三角形和箭头