1.1.1　FlutterLogo

FlutterLogo组件，顾名思义，是一个专门用于渲染Flutter徽标的组件。常见于Hello World等演示程序，或者用于与Flutter密切相关的项目，例如宣传或介绍Flutter的网站，或者Flutter演示程序等。这个组件的使用方法比较简单，代码如下：

FlutterLogo(
  size: 100,
  style: FlutterLogoStyle. stacked,
)

1．尺寸

FlutterLogo组件的尺寸由size属性设置，默认值为24.0，单位是逻辑像素。Flutter框架中的尺寸或位置信息，例如高度、宽度等，一般都以逻辑像素作为单位。

Flutter框架小知识

逻辑像素是什么

大家一定非常熟悉像素的概念，即屏幕上一个个可以独立显示颜色的小点。例如在一块1920×1080像素的分辨率的屏幕上，水平方向有1920像素，垂直方向有1080像素。通过简单地相乘，可以得出这块屏幕约有200万像素。

随着屏幕制造工艺的改进和科技的发展，电子设备的分辨率越来越高，呈现出的画面越来越细腻，同时屏幕上的每个物理像素也变得越来越小。在同样的6英寸屏幕上，部分手机屏幕只有200万像素，但也有一些手机屏幕则会用到800万像素甚至更多。

由于每个物理像素的规格不同，在界面设计时像素不再是一种合理的单位。例如若将一个按钮的宽度设置为500像素，则在老式或低端的屏幕上或许能占5cm，但在高清屏幕上由于像素密度高，500像素可能只占不到2cm，因此，Flutter框架使用比较现代的“逻辑像素”概念，相当于安卓原生开发里的displaypixel单位，或iOS原生开发里的CGPoint概念。运行时，Flutter程序会根据当前的设备信息自动提供逻辑像素到物理像素的转换，最终提供统一的“每38像素约为1cm”或“每英寸约96像素”的接口(2)。这样开发者在处理页面布局时，就不需要考虑不同设备屏幕的像素密度问题了。

同时这里值得一提的是，FlutterLogo组件默认的尺寸24.0实际是由最近的上级IconTheme组件设置的，而IconTheme组件（图标主题）的主要作用就是设置各式Icon组件（图标）的默认尺寸和风格。本书将在第2章“文字与图片”中详细介绍这2个组件。

图1-2　FlutterLogo的不同样式

2．样式

徽标样式可由style属性设置，即是否需要在徽标附近插入Flutter文字，以及文字的显示位置。这里的默认值是FlutterLogoStyle. markOnly，即只显示徽标，不显示文字。其他可选值为FlutterLogoStyle. horizontal和FlutterLogoStyle. stacked，分别将文字显示在徽标的右边和下边。

这里需要注意的是，这个组件的外形是一条边长由size属性定义的正方形。为了将内容保持在正方形的边框内，当需要显示Flutter字样时，即使size参数不变，徽标实际尺寸也会相应缩小，具体效果如图1-2所示。

3．其他不常用属性

1）color和textColor

徽标的颜色由color属性设置，默认为蓝色。如果不方便使用蓝色（例如App本身就是蓝色背景等），推荐使用橙黄色、红色或靛蓝色。如果包括默认蓝色在内的这4种颜色都不合适，则推荐使用粉红色、紫色或者青色。这些是Flutter品牌使用的颜色(3)。

若前面通过style属性选择了需要显示Flutter文字，则还可以再借助textColor属性修改文字的颜色。在白色背景上，推荐使用颜色代码为#616161的中性灰。

2）duration和curve

由于FlutterLogo组件内置了隐式动画，当size、style、color、textColor这些属性值有变化时，该组件会自动触发渐变动画效果。这里duration属性负责控制动画时长，默认为750ms，而curve属性负责动画曲线，默认为线性，即默认情况下该组件会在新值与旧值之间线性插入750ms的补帧动画效果。这里duration和curve属于隐式动画组件的常用属性，有兴趣的读者可参考第7章“过渡动画”中的相关内容。