diff --git a/src/engineer/render.ts b/src/engineer/render.ts index bd34b58..732546e 100644 --- a/src/engineer/render.ts +++ b/src/engineer/render.ts @@ -8,7 +8,7 @@ import { defineComponent, h } from 'vue' import type { Axis, Block, - DataRefer, + DataRefer, Theme, View, ViewChildren, Widget, @@ -55,6 +55,14 @@ function isRefer(s: any): s is DataRefer { && typeof s.key === 'string' } +export const isFlexible = (theme: Theme) => { + return theme.axis != null + || theme.mainAlign != null + || theme.crossAlign != null + || theme.wrap != null + || theme.gap != null +} + export function render(view?: ViewChildren, axis?: Axis): VNodeChild { if (view == null) return null @@ -135,7 +143,7 @@ export function render(view?: ViewChildren, axis?: Axis): VNodeChild { // 所以在这里复用它用于子视图构建 axis = theme?.axis - if (theme?.flexible) { + if (theme?.flexible || (theme && theme.flexible == null && isFlexible(theme))) { Object.assign(css, { display: 'flex', flexDirection: axis === 'y' ? 'column' : undefined, diff --git a/src/engineer/types.ts b/src/engineer/types.ts index d5bc145..58f12d1 100644 --- a/src/engineer/types.ts +++ b/src/engineer/types.ts @@ -264,9 +264,17 @@ export type ClipBehavior = * 描述了视图的基本布局和外观表现。 */ export interface Theme extends Textual, Flexible, Boxed, Decoration, Spatial, Flexible { - /** 是否开启弹性布局,todo 删除改属性,根据属性判断是否启用 flex 布局 */ + /** + * 是否强制开启弹性布局 + * + * 当未给出该属性时,如果指定了 Flexible 中的属性,引擎会自动启用弹性布局。 + */ flexible?: boolean - /** 超出视图剪切方式,对应 overflow 属性 */ + /** + * 超出视图剪切方式 + * + * 对应 overflow 属性 + */ clip?: ClipBehavior }