组件说明

酷联小程序框架 提供了一套基于 Flutter Widget 封装的基础组件库，能够实现大部分常用的布局需求。

基础组件的布局与样式在一些常用的属性上采用了与 css flex 布局相同的写法，但是为了对于部分布局来说，仍然没有抹平 css flex 与 Flutter 布局之前的差异。因此在使用某些组件或属性时，可能实际表现与想象中的存在差异，需要对样式进行调整与计算。

基础组件库也在不断完善自身，提高编程体验，努力抹平与 css flex 之间的差异。

以下为基础组件文档：

😊	😊	😊	😊
Container	AppBar	Page	Button
Checkbox	Icon	Image	Input
ListView	NativeView	NestScrollView	Radio
Refresh	ScrollView	SwipeActionsView	Text
DragableScrollView	Picker	SwiperView	Switch
SpinningWheel	Turntable	Audio	Video
TabView

公共属性

除 Page AppBar 外，对于任意一个基础组件，他们都具有以下这些非必须属性：

属性名	类型	说明	示例
width height	number	组件宽高，若不设置则根据子元素宽高自适应
minWidth minHeight maxWidth maxHeight	number	组件宽高最大最小值
margin padding	number 或 {   left?: number,   right?: number,   top?: number,   bottom?: number }	内外边距 设置为数值时会将 4 个内/外边距设为相同的值 设置为Object时会根据具体其属性分别设置 4 个内/外边距	padding={10} margin={ top: 10, bottom: 20, left: 30, right: 40}
backgroundColor	number	背景色 与 css 不同的是，df 中的所有颜色均采用 16 进制数值形式的色值，如 css 中为 #000000，df 中为 0xff000000 其中，前两位 ff 表示透明度，后 6 位表示色值	backgroundColor={0xff123456}
backgroundGradient	{   colors:     number[],   type?:     'linear' /     'radial',   begin?: string,   end?: string,   center?: string,   radius?:     number }	背景渐变色 默认线性从左到右渐变 线性渐变时 begin end 有效 半径渐变时 center radius 有效
border	{   style?: string,   width?: number,   color?: number,   side?:   [     'top'/     'bottom'/     'left'/     'right'   ] }	边框样式 style: 默认为 'solid'，目前也只支持 'solid' width: 边框宽度，默认 1 color: 16 进制颜色值 side: 需要绘制边框的边，默认四条边全部绘制，可设置为一个具有 'top'/'bottom'/'left'/'right' 的数组	border={ style: 'solid', width: 10, color: 0xff123456, side: [ 'top', 'bottom' ]}
borderRadius	number 或 {   topLeft?: number,   topRight?: number,   bottomLeft?:     number,   bottomRight?:     number }	边框圆角 在 flutter 中圆角是用裁剪组件实现，因此如果要对一个组件实现 css 中 overflow: hidden; 的效果，可以将圆角属性设置为 0	borderRadius={10} borderRadius={ topLeft: 10, topRight: 20, bottomLeft: 30, bottomRight: 40}
boxShadow	{   color?: number,   offsetX?: number,   offsetY?: number,   blur?: number,   spread?: number }	设置阴影	boxShadow={color: 0xff123456, offsetX: 10, offsetY: 10, blur: 10, spread: 10}
absolute	{   left?: number,   right?: number,   top?: number,   bottom?: number }	绝对定位 所有被设置为 absolute 的组件，其直接父组件必须是具有 relative 属性的 Container 组件，并且他们在当前父组件中将会覆盖在其他非 absolute 组件之上	{left: 0, right: 0, top: 0, bottom: 0}
flex	number	flex 布局 会按照同级元素的 flex 在父组件主轴方向等份布局。存在 flex 则会忽略主轴上设置的尺寸 _ 如垂直布局时，主轴为竖轴，设置 flex 后会在竖轴方向等份布局并忽略 height _ 如水平布局时，主轴为横轴，设置 flex 后会在横轴方向等份布局并忽略 width	flex={1} flex={2}
disabled	boolean	禁用所有事件，默认 false
opacity	number	透明度，取值范围 [0, 1]，默认 1
tapOpacity	number	点击时的透明度，取值范围 [0, 1] 默认与 opacity 取相同值 对于 Button 组件，默认值为 0.5
transform	{   type:     'rotation' /     'transition',   value:     number /     {       x?:         number,       y?:         number,       z?:         number     } }	旋转或位移变化 当 type='rotation'时，value取值为数值类型，单位为 deg	transform={type: 'rotation', value: 45} transform={type: 'transition', value: {x: 10, y: 10, z: 10}}
onTap	e => {}	点击事件回调 参数具有点击位置x y 属性和被点击组件的布局信息 layout 属性 layout 具有 x y width height 属性	onTap={({x, y, layout}) => { console.log(x, y, layout)}}
onLongTap	e => {}	点击事件回调 参数具有点击位置x y 属性和被点击组件的布局信息 layout 属性 layout 具有 x y width height 属性	onLongTap={({x, y, layout}) => { console.log(x, y, layout)}}
onLayout	e => {}	布局完成事件回调 参数具有width height x y 属性	onLayout={({width, height, x, y}) => { console.log(width, height, x, y)}}

组件使用踩坑记录

1. 使用 flex 属性时，如父组件 Container 为 row 则必须具有一个明确的宽度，不为 row 则必须具有明确的高度（PS: 具有 flex 的 Container 也认为含有明确宽度或高度）
2. 一个自定义组件，其根基础组件如果在开始时具有 absolute 属性，更新后不具有将会报错；反之亦然
3. 具有 relative 属性的 Container 组件必须显示声明width height 属性
4. 如果写完 ScrollView SwiperView 等组件后后发现页面上相应位置没有显示内容，可以先检查其自身及上层组件是否具有了 width 和 height，因为在未显示声明宽高的情况下，其宽高会默认为 0 或继承父组件宽高
5. 如果一个组件具有 borderRadius 属性，则超出该组件宽高范围之外的部分会不可见
6. Container 组件同时使用 borderRadius 和 border 时，border 不能够单独设置 side 属性，否则将不会渲染