Flutter快速上车之Widget

Flutter作为一种全新的响应式，跨平台，高性能的移动开发框架。从开源以来，已经得到越来越多开发者的喜爱。闲鱼是最早一批与谷歌展开合作，并在重要的商品详情页中使用上线的公司。一路走来，积累了大量的开发经验。虽然越来越多的技术大牛在flutter世界中弄得风声水起，但是肯定有很多的flutter小白希望能快速上手，享受flutter编程的乐趣。本文就是面向刚刚踏上futter的同学，从Flutter体系中最基本的一个概念widget入手学习Flutter。希望能助力每一位初学者。

可能大家要问的第一个问题是为什么从Widget开始？

从flutter的架构图中不难看出widget是整个视图描述的基础。Flutter 的核心设计思想便是

Everything’s a Widget

即一切即Widget。在flutter的世界里，包括views,view controllers,layouts等在内的概念都建立在Widget之上。widget是flutter功能的抽象描述。所以掌握Flutter的基础就是学会使用widget开始。

本文会从大家熟悉的UI绘制视角来介绍flutter组件和布局的基础知识。首先罗列了UI开发中最为常用，最为基础的组件。下面逐一进行介绍。

 

1 组件篇

1.1 Text

Text几乎是UI开发中最为重要的组件之一了，UI上面文字的展示基本上都要靠Text组件来完成。Flutter提供了原生的Text组件。Text的配置属性是很丰富的,属性主要分为两个部分一个是对齐&显示控制相关的在Text类的属性中，另一类是样式相关的属性使用单独的类TextStyle进行控制。跟native控件相比（以android为例），Text的组件基本上提供了同等的能力，并且提供了更加丰富的样式装饰能力。详细的属性可以参考官方文档flutter text.

1.1.1 实践Coding

设置文字&文字大小&颜色&行数限制&文本对齐

const Text(  "hello flutter!",
            textAlign: TextAlign.center,
            maxLines: 1,
            overflow: TextOverflow.ellipsis, // 溢出显示。。。
            style: TextStyle(fontSize: 30.0,// 文字大小
               color: Colors.yellow),// 文字颜色
          ),

效果如下：

1.2 Image

图片也是UI部分开发最为重要的组件之一。在能看图随看文字的年代，图片是页面展示的重中之重！Flutter同样原生提供了Image组件。下面重点介绍一下几个重点:

1.2.1 缩放

怎样设置图片显示的缩放方式呢？
Flutter中的图片缩放是fit字段来控制的。这是对最终图片展示效果影响很大的一个参数，也是容易出错的点。下面逐个分析一下flutter Image组件提供的缩放方式。

缩放属性值在BoxFit枚举中

下面列出的图片是flutter官方对各种缩放做的图片示例。基本上都表述很清楚了，就整理出来供大家查阅。

属性	缩放效果
fill		类似于android的fit_xy
contain		类似于android的center_inside
cover		类似于android的center_crop
fitWidth		/
fitHeight		/
none		类似于android的center
scaleDown		类似于android的center_inside

1.2.2 图片获取

怎样从各种来源加载图片？
默认的Image组件不能直接显示图片，他需要一个ImageProvider来提供具体的图片资源的（即Image中的image字段需要赋值）。咋一看这确实非常麻烦，但是实际上ImageProvider并不需要完全重新自己实现。在Image类中目前提供了一下几个实现好的ImageProvider，基本能满足常见的需求。

ImageProvider	用途
Image.asset	从asset资源文件中获取图片
Image.network	从网络获取图片
Image.file	从本地file文件中获取图片
Image.memory	从内存中获取图片

Image同样支持GIF图片

网络请求Image是大家