Thresh 提供了一套基于 Flutter Widget 封装的基础组件库，能够实现大部分常用的布局需求。
基础组件的布局与样式在一些常用的属性上采用了与 css flex 布局相同的写法，但是为了对于部分布局来说，任然没有抹平 css flex 与 Flutter 布局之前的差异。因此在使用某些组件或属性时，可能实际表现与想象中的存在差异，需要对样式进行调整与计算。
基础组件库也在不断完善自身，提高编体验，努力抹平与 css flex 之间的差异。
除 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)}} |
- 使用
flex属性时，如父组件Container为row则必须具有一个明确的宽度，不为row则必须具有明确的高度（PS: 具有flex的Container也认为含有明确宽度或高度） - 一个自定义组件，其根基础组件如果在开始时具有
absolute属性，更新后不具有将会报错；反之亦然 - 具有
relative属性的Container组件必须显示声明widthheight属性 - 如果写完
ScrollViewSwiperView等组件后后发现页面上相应位置没有显示内容，可以先检查其自身及上层组件是否具有了width和height，因为在未显示声明宽高的情况下，其宽高会默认为 0 或继承父组件宽高 - 如果一个组件具有
borderRadius属性，则超出该组件宽高范围之外的部分会不可见 Container组件同时使用borderRadius和border时，border不能够单独设置side属性，否则将不会渲染