JSKit App 文档

# 布局与样式

# LayoutStyle

JSKit App 使用了 CSS Flexible Box Layout Module (opens new window) 所述的 Flexible Box 模型，通常被称为 flexbox。此模型给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

interface LayoutStyle {
    display?: 'flex' | 'none';
    width?: number | string;//auto % dimension
    height?: number | string;//auto % dimension
    minWidth?: number | string;//% dimension
    minHeight?: number | string;//% dimension
    maxWidth?: number | string;//% dimension
    maxHeight?: number | string;//% dimension
    flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
    flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
    overflow?: 'visible' | 'hidden';
    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
    alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
    alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';
    aspectRatio?: number | string;
    flex?: number;
    flexBasis?: number | string;//auto % dimension
    flexGrow?: number;
    flexShrink?: number;
    alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
    direction?: 'inherit' | 'ltr' | 'rtl';
    position?: 'relative' | 'absolute';
    start?: number | string;//% dimension
    end?: number | string;//% dimension
    left?: number | string;//% dimension
    top?: number | string;//% dimension
    right?: number | string;//% dimension
    bottom?: number | string;//% dimension
    backgroundColor?: string;//color
    shadow?: string;//'dx dy blur_radius color'
    padding?: number | string;//% dimension
    paddingHorizontal?: number | string;//% dimension
    paddingVertical?: number | string;//% dimension
    paddingStart?: number | string;//% dimension
    paddingEnd?: number | string;//% dimension
    paddingLeft?: number | string;//% dimension
    paddingTop?: number | string;//% dimension
    paddingRight?: number | string;//% dimension
    paddingBottom?: number | string;//% dimension
    borderWidth?: number | string;//dimension
    borderBottomWidth?: number | string;//dimension
    borderLeftWidth?: number | string;//dimension
    borderStartWidth?: number | string;//dimension
    borderTopWidth?: number | string;//dimension
    borderRightWidth?: number | string;//dimension
    borderEndWidth?: number | string;//dimension
    borderStyle?: 'solid' | 'dotted' | 'dashed';
    borderLeftColor?: string;//color
    borderStartColor?: string;//color
    borderTopColor?: string;//color
    borderRightColor?: string;//color
    borderEndColor?: string;//color
    borderBottomColor?: string;//color
    borderRadius?: number | string;//dimension
    borderBottomStartRadius?: number | string;//dimension
    borderBottomEndRadius?: number | string;//dimension
    borderBottomLeftRadius?: number | string;//dimension
    borderBottomRightRadius?: number | string;//dimension
    borderTopStartRadius?: number | string;//dimension
    borderTopEndRadius?: number | string;//dimension
    borderTopLeftRadius?: number | string;//dimension
    borderTopRightRadius?: number | string;//dimension
    margin?: number | string;//auto % dimension
    marginHorizontal?: number | string;//auto % dimension
    marginVertical?: number | string;//auto % dimension
    marginStart?: number | string;//auto % dimension
    marginEnd?: number | string;//auto % dimension
    marginLeft?: number | string;//auto % dimension
    marginTop?: number | string;//auto % dimension
    marginRight?: number | string;//auto % dimension
    marginBottom?: number | string;//auto % dimension
    zIndex?: number;
}
  • 属性后注释 auto 的，表示可以接受 'auto' 字段
  • 属性后注释 % 的，表示支持百分比大小
  • 属性后注释 dimension 的，表示支持纯数字的像素值，或者以 dp 或 px 结尾的字符串尺寸值，比如 ‘10dp’，‘10px’。
  • 属性后注释 color 的，表示支持 ‘#RRGGBB’ 的颜色数值，详见 parseColor (opens new window)

# 参考指南

关于 flexbox 的资料有很多也很全，就不再赘述，这里只提供一些参考指南。

  • 基本概念 如果你是新接触这个布局，可以先从了解基本概念开始：flex 布局的基本概念 · MDN (opens new window)
  • 属性定义 了解基本概念后，可以参考各个属性的具体含义，JSKit App 的各属性含义可参见：Layout Props · React Native (opens new window)
  • 了解区别 JSKit App 的布局实现与 React Native 类似，与 CSS 的实现稍有不同，了解他们的区别是有必要的。
    • 百分比数值可根据 LayoutStyle 定义中的注释中是否包含 %来确定是否支持，布局尺寸只支持像素数值与 dp，px的字符串尺寸值。
    • flexDirection 的默认值是 column 而不是 row，这与 CSS 中的表现不同。
    • flex 与 CSS 实现不同。在 JSkit APP 中，flex 的工作方式与 CSS 中的工作方式不同，flex 是一个数字而不是字符串。当 flex 是一个正数时，组件大小可变，它的大小将与其 flex 值成比例。因此，一个将 flex 设置为 2 的组件将比一个将 flex 设置为 1 的组件占用两倍的空间。flex: <正数>相当于flexGrow: <正数>，flexShrink: 1, flexBasis: 0。当 flex 为 0 时，组件的大小根据宽度和高度而定，是不可变的。当 flex 为 -1 时，组件通常按照宽度和高度进行大小调整。但是，如果没有足够的空间，组件将收缩到最小宽度和最小高度。flexGrow、flexShrink 和flexBasis 的工作原理与 CSS 相同。
    • aspectRatio 除支持数值类型的长宽比外，还支持 'h:w' 这种字符串，比例数值以 : 分隔。如 '3:4'
    • shadow 控件阴影,属性分别为：（水平偏移量，垂直偏移量，模糊度，颜色）空格分隔
  • 实际运行 可参见 UI 框架 在 JSKit App 上运行并理解 flexbox 的工作方式。

参考

Layout with Flexbox · React Native (opens new window)

Layout Props · React Native (opens new window)

CSS Flexible Box Layout · MDN (opens new window)

Flex 布局教程：语法篇 · 阮一峰 (opens new window)

← 事件处理 →