flutter_经典控件(一):文本、图片和按钮在Flutter中怎么用?

而作为一个 UI 框架,与 Android、iOS 和 React 类似的,Flutter 自然 也提供了很多 UI 控件。文本、图片和按钮则是这些不同的 UI 框架中构建视图都要用到 的三个最基本的控件。因此,在今天这篇文章中,我就与你一起学习在 Flutter 中该如何使 用它们。

文本、图片和按钮

一、文本控件(Text和Text.rich)

在 Flutter 中,文本展示是通过 Text 控件实现的。

Text 支持两种类型的文本展示,一个是默认的展示单一样式的文本 Text,另一个是支持多种混合样式的富文本 Text.rich。

1、单一样式的文本 Text

单一样式文本 Text 的初始化,是要传入需要展示的字符串。而这个字符串的具体展示效果,受构造函数中的其他参数控制。这些参数大致可以分为两类:

  • 控制整体文本布局的参数,如文本对齐方式 textAlign、文本排版方向 textDirection, 文本显示最大行数 maxLines、文本截断规则 overflow 等等,这些都是构造函数中的参数;
  • 控制文本展示样式的参数,如字体名称 fontFamily、字体大小 fontSize、文本颜色 color、文本阴影 shadows 等等,这些参数被统一封装到了构造函数中的参数 style 中。

如下所示,我在代码中定义了一段居中布局、20 号红色粗体展示样式的字符串:

Text(
   '文本是视图系统中的常见控件,用来显示一段特定样式的字符串,就比如 Android 里的 TextView',
  textAlign: TextAlign.center,// 居中显示
  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: Colors.red),//20 号
);

2、多种混合样式的文本 Text.rich

混合展示样式与单一样式的关键区别在于分片,即如何把一段字符串分成几个片段来管理, 给每个片段单独设置样式。就要用到了 TextSpan

TextSpan 定义了一个字符串片段该如何控制其展示样式。

将这些有着独立展示样式的字符串分片组装在一起,则可以支持混合样式的富文本展示。

二、图片控件(Image和FadeInImage、第三方的CachedNetworkImage)

使用 Image,可以让我们向用户展示一张图片。
图片的显示方式有很多,比如资源图片、 网络图片、文件图片等,图片格式也各不相同。
因此在 Flutter 中也有多种方式,用来加载 不同形式、不同格式的图片:

加载本地资源图片,如 Image.asset(‘images/logo.png’);
加载本地(File 文件)图片,如 Image.file(new File(’/storage/xxx/xxx/test.jpg’));
加载网络图片,如 Image.network('http://xxx/xxx/test.gif') 。

除了可以根据图片的显示方式设置不同的图片源之外,图片的构造方法还提供了填充模式 fit、拉伸模式 centerSlice、重复模式 repeat 等属性,可以针对图片与目标区域的宽高比 差异制定排版模式。

这和 Android 中 ImageView、iOS 里的 UIImageView 的属性都是类似的。因此,我在 这里就不再过多展开了。你可以参考官方文档中的Image 的构造函数部分,去查看 Image 控件的具体使用方法。

FadeInImage和Image一样,也是flutter 中的

  • 关于图片展示,我还要和你分享下 Flutter 中的FadeInImage控件。在加载网络图片的时 候,为了提升用户的等待体验,我们往往会加入占位图、加载动画等元素,但是默认的 Image.network 构造方法并不支持这些高级功能,这时候 FadeInImage 控件就派上用场 了。
    FadeInImage 控件提供了图片占位的功能,并且支持在图片加载完成时淡入淡出的视觉效果。此外,由于 Image 支持 gif 格式,我们甚至还可以将一些炫酷的加载动画作为占位 图。

下述代码展示了这样的场景。我们在加载大图片时,将一张 loading 的 gif 作为占位图展 示给用户:

FadeInImage.assetNetwork(
  placeholder: 'assets/loading.gif', //gif 占位 
  image: 'https://xxx/xxx/xxx.jpg',
  fit: BoxFit.cover, // 图片拉伸模式
  width: 200,
  height: 200,
)

Image 控件需要根据图片资源异步加载的情况,决定自身的显示效果,因此是一个 StatefulWidget。图片加载过程由 ImageProvider 触发,而 ImageProvider 表示异步获 取图片数据的操作,可以从资源、文件和网络等不同的渠道获取图片。

首先,ImageProvider 根据 _ImageState 中传递的图片配置生成对应的图片缓存 key;然后,去 ImageCache 中查找是否有对应的图片缓存,如果有,则通知 _ImageState 刷新 UI;如果没有,则启动 ImageStream 开始异步加载,加载完毕后,更新缓存;最后,通知 _ImageState 刷新 UI。


值得注意的是,ImageCache 使用 LRU(Least Recently Used,最近最少使用的规则)算法进行 缓存更新策略,并且默认最多存储 1000 张图片,最大缓存限制为 100MB,当限定的空间 已存满数据时,把最久没有被访问到的图片清除。图片缓存只会在运行期间生效,也就是只 缓存在内存中。如果想要支持缓存到文件系统,可以使用第三方的 CachedNetworkImage 控件。

  • CachedNetworkImage
    CachedNetworkImage 的使用方法与 Image 类似,除了支持图片缓存(支持缓存到文件系统)外,还提供了比 FadeInImage 更为强大的加载过程占位与加载错误占位,可以支持比用图片占位更灵活的 自定义控件占位。

在下面的代码中,我们在加载图片时,不仅给用户展示了作为占位的转圈 loading,还提供 了一个错误图兜底,以备图片加载出错:


三、按钮控件(FloatingActionButton、TextButton 和 RaisedButton、控件样式定制)

Flutter 提供了三个基本的按钮控件,即 FloatingActionButtonTextButtonRaisedButton。这三个按钮控件的使用方法类似,唯一的区别只是默认样式不同而已。

  • FloatingActionButton: 一个圆形的按钮,一般出现在屏幕内容的前面,用来处理界面 中最常用、最基础的用户动作。貌似就是悬浮按钮。
  • RaisedButton: 凸起的按钮,默认带有灰色背景,被点击后灰色背景会加深。
  • TextButton: 扁平化的按钮,默认透明背景,被点击后会呈现灰色背景。

    既然是按钮,因此除了控制基本样式之外,还需要响应用户点击行为。这就对应着按钮控件中的两个最重要的参数了:
  • onPressed 参数用于设置点击回调,告诉 Flutter 在按钮被点击时通知我们。如果 onPressed 参数为空,则按钮会处于禁用状态,不响应用户点击。
  • child 参数用于设置按钮的内容,告诉 Flutter 按钮应该长成什么样,也就是控制着按钮 控件的基本样式。child 可以接收任意的 Widget,比如我们在上面的例子中传入Text,除此之外我们还可以传入 Image 等控件。

1、控件样式定制

虽然我们可以通过 child 参数来控制按钮控件的基本样式,但是系统默认的样式还是太单调 了。因此通常情况下,我们还是会进行控件样式定制。

与 Text 控件类似,按钮控件也提供了丰富的样式定制功能,比如背景颜色 color按钮形 状 shape主题颜色 colorBrightness,等等。

接下来,我就以 FlatButton 为例,与你介绍按钮的样式定制:

FlatButton(
  color: Colors.yellow, // 设置背景色为黄色
  shape:BeveledRectangleBorder(borderRadius: BorderRadius.circular(20.0)), // 设置斜角
  colorBrightness: Brightness.light, // 确保文字按钮为深色
  onPressed: () => print('FlatButton pressed'),
  child: Row(children: [Icon(Icons.add), Text("Add")],)
);

最后

通过今天的学习,我们可以发现,在 UI 基本信息的表达上,Flutter 的经典控件与原生 Android、iOS 系统提供的控件没有什么本质区别。但是,在自定义控件样式上,Flutter 的这些经典控件提供了强大而简洁的扩展能力,使得我们可以快速开发出功能复杂、样式丰富的页面。

你可能感兴趣的:(flutter_经典控件(一):文本、图片和按钮在Flutter中怎么用?)