Flutter组件详解与实战
上QQ阅读APP看书,第一时间看更新

1.1.2 Placeholder

软件开发的过程中经常会遇到一部分功能模块暂时还无法实现的情况,例如横幅广告等,但又需要在屏幕布局上为它们留下合适的空间,这时Placeholder组件就可以派上用场了。它可以方便开发者在屏幕上画出一个占位框,表示这块内容暂时还没完成。它的用法非常简单,基本代码如下:

Placeholder()
1.常用属性

无。一般而言直接调用Placeholder组件不传任何参数就可以应付绝大多数场景了。一般而言,它会试图占满全部可用空间,如整个屏幕。实战中通常会用Container组件或SizedBox组件作为Placeholder组件的父级,以约束它的尺寸。关于Container组件和SizedBox组件的用法,会在本章后面小节详细介绍。

2.不常用属性

1)fallbackWidth和fallbackHeight

前面提到Placeholder组件会尽量试图占满父级组件的全部可用空间,如全屏等,但如果父级组件某个维度的尺寸是“无边界”的,例如Column组件可以垂直排列多个组件,它在垂直方向(高度)就是无边界的(正无穷),此时Placeholder组件就会采用fallbackWidth和fallbackHeight所指定的宽度和高度,默认为400逻辑像素。这里fallback是“备用方案”的意思,因此若父级组件没有出现无边界的情况,则Placeholder组件会直接忽略这2个属性,在满足父级组件布局约束的前提下越大越好。例如,实战中需将Placeholder组件尺寸设置为300×300逻辑像素,应通过插入SizedBox父级组件直接干预Placeholder组件的尺寸,而不是设置这2个参数。

关于更多布局约束的内容,以及“无边界”等约束概念,读者可参考第6章“进阶布局”中的关于ConstrainedBox组件的相关内容。

图1-3 Placeholder组件可调节渲染颜色和粗细

2)strokeWidth和color

这2个属性负责定义Placeholder组件的样式。其中strokeWidth属性用于调整其边框和叉的粗细,默认为2.0单位(逻辑像素),而color则是定义它们的颜色,具体效果如图1-3所示。

Placeholder组件的叉背后的留白部分实际上并非是由该组件渲染的,因此不受其属性控制。如果需要改变背景颜色,则可以考虑把Placeholder组件嵌套在一个Container组件里,再去修改Container组件的颜色或其他修饰属性。

实战中,与其精心设计Placeholder组件的样式,不如抓紧时间把没完成的功能尽快开发出来,这样就可以尽早删掉Placeholder组件了。