feat: 自动弹性布局

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,

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
 }