BlockLayout​

BlockLayout 用于在多行上布局内容。默认情况下，所有行都会填充可用的块空间，并平等共享。

预览​

示例代码​

render('Checkout::Dynamic::Render', (props) => {
  return (
    <View border="base">
      <View>
        <Text size="extraExtraLarge">BlockLayoutDemo</Text>
      </View>
      {/* All implicit rows. */}
      <BlockLayout spacing="loose">
        <Text>BlockLayoutDemo1</Text>
        <Text>BlockLayoutDemo1</Text>
        <Text>BlockLayoutDemo1</Text>
        <Text>BlockLayoutDemo1</Text>
        <Text>BlockLayoutDemo1</Text>
      </BlockLayout>
      {/* Explicit two rows */}
      <BlockLayout rows={['auto', 'auto']}>
        <Text>BlockLayoutDemo2</Text>
        <Text appearance="subdued" size="base">
          BlockLayoutDemo2
        </Text>
      </BlockLayout>
    </View>
  );
});

BlockLayoutProps​

rows?​

显示行数。

inlineAlignment?​

主轴对齐方式，主轴为 行内轴。

blockAlignment?​

副轴对齐，副轴为 网格区域内的块向轴。

spacing?​

项目之间的间距。

padding?​

内边距。

类型说明​

MaybeResponsiveConditionalStyle​

• 普通值示例：base
• 条件值示例：{ defaultValue: 'tight', conditionals: [{ conditions: { viewportInlineSize: { min: 'medium' } }, value: 'loose' }] }

ConditionalStyle​

ConditionalValue​

Conditions​

ViewportSizeCondition​

AtLeastOne​

ViewportInlineSize​

参考 视口断点。

MaybeShorthandProperty​

ShorthandProperty​

BlockAlignment​

InlineAlignment​

Spacing​

Rows​

GridItemSize​

• auto：由内容撑开，不会主动填满剩余空间。
• ${number}fr：均分剩余空间，number 表示占其中的几份。
• fill：像 1fr 一样填满空间，但内容超长时能收缩到 0，防止溢出。
• number：按照配置的值进行内容空间分配，如配置 30 则占据 30px。
• ${number}%：按照配置的百分比进行内容空间的占位，如配置 30% 则占据内容空间的 30%。