跳到主要内容

布局组件

布局组件用于构建页面的整体结构和元素排列。SiiUI 提供了丰富的布局组件，支持各种复杂的布局需求。

基础布局组件​

Row - 水平布局容器​

创建水平排列的布局容器。

基本用法​

Row()
    .gap(16)
    .align("center")
    .justify("space-between")
{
    // 布局内容
}

属性列表​

属性接受类型默认值说明
gapint, singlef, string0子元素间距
alignstring"stretch"交叉轴对齐方式
justifystring"flex-start"主轴对齐方式
flexWrapstring"nowrap"换行方式
flexDirectionstring"row"弹性方向
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef0圆角
boxShadowstring"none"阴影

对齐方式​

align 属性值：

  • stretch - 拉伸填满（默认）
  • flex-start - 顶部对齐
  • center - 居中对齐
  • flex-end - 底部对齐
  • baseline - 基线对齐

justify 属性值：

  • flex-start - 左对齐（默认）
  • center - 居中对齐
  • flex-end - 右对齐
  • space-between - 两端对齐，中间分散
  • space-around - 环绕分散
  • space-evenly - 均匀分散

Col - 垂直布局容器​

创建垂直排列的布局容器。

基本用法​

Col()
    .gap(12)
    .align("stretch")
    .justify("flex-start")
{
    // 布局内容
}

属性列表​

属性接受类型默认值说明
gapint, singlef, string0子元素间距
alignstring"stretch"交叉轴对齐方式
justifystring"flex-start"主轴对齐方式
flexWrapstring"nowrap"换行方式
flexDirectionstring"column"弹性方向
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef0圆角
boxShadowstring"none"阴影

Stack - 堆叠布局容器​

创建重叠的布局容器。

基本用法​

Stack()
    .width(300)
    .height(200)
{
    // 堆叠内容
}

属性列表​

属性接受类型默认值说明
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef0圆角
boxShadowstring"none"阴影
zIndexint"auto"层级

弹性布局组件​

Flex - 弹性布局容器​

创建灵活的弹性布局容器。

基本用法​

Flex()
    .flexDirection("row")
    .justify("space-between")
    .align("center")
    .gap(16)
{
    // 弹性内容
}

属性列表​

属性接受类型默认值说明
flexDirectionstring"row"弹性方向
flexWrapstring"nowrap"换行方式
justifystring"flex-start"主轴对齐
alignstring"stretch"交叉轴对齐
gapint, singlef, string0子元素间距
rowGapint, singlef, string0行间距
columnGapint, singlef, string0列间距
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色

弹性属性​

属性接受类型默认值说明
flexint, singlef, string"none"弹性比例
flexGrowint, singlef0弹性增长
flexShrinkint, singlef1弹性收缩
flexBasisstring, int, singlef"auto"弹性基础

Grid - 网格布局容器​

创建网格布局容器。

基本用法​

Grid()
    .columns("1fr 1fr 1fr")
    .rows("auto 1fr auto")
    .gap(16)
{
    // 网格内容
}

属性列表​

属性接受类型默认值说明
columnsstring"none"列模板
rowsstring"none"行模板
gapint, singlef, string0网格间距
rowGapint, singlef, string0行间距
columnGapint, singlef, string0列间距
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色

网格位置属性​

属性接受类型默认值说明
gridColumnstring"auto"列位置
gridRowstring"auto"行位置
gridAreastring"auto"区域位置

容器组件​

Container - 通用容器​

提供基础的容器功能。

基本用法​

Container()
    .width("100%")
    .maxWidth("1200px")
    .margin("0 auto")
    .padding(24)
    .backgroundColor("#ffffff")
    .borderRadius(12)
{
    // 容器内容
}

属性列表​

属性接受类型默认值说明
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
minWidthstring, int, singlef"auto"最小宽度
maxWidthstring, int, singlef"none"最大宽度
minHeightstring, int, singlef"auto"最小高度
maxHeightstring, int, singlef"none"最大高度
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef0圆角
boxShadowstring"none"阴影
borderstring"none"边框
borderWidthstring, int, singlef0边框宽度
borderStylestring"solid"边框样式
borderColorstring"transparent"边框颜色

Responsive - 响应式容器​

提供响应式布局支持。

基本用法​

Responsive()
    .mobile({
        width: "100%",
        padding: 16,
        flexDirection: "column"
    })
    .tablet({
        width: "80%",
        padding: 24,
        flexDirection: "row"
    })
    .desktop({
        width: "60%",
        padding: 32,
        flexDirection: "row"
    })
{
    // 响应式内容
}

属性列表​

属性接受类型默认值说明
mobileobj移动端样式
tabletobj平板端样式
desktopobj桌面端样式
widthstring, int, singlef"auto"默认宽度
heightstring, int, singlef"auto"默认高度
paddingstring, int, singlef0默认内边距
marginstring, int, singlef0默认外边距
backgroundColorstring"transparent"默认背景颜色

Breakpoint - 断点容器​

基于断点的条件显示。

基本用法​

Breakpoint()
    .xs({ display: "none" })
    .sm({ display: "block" })
    .md({ display: "flex" })
    .lg({ display: "grid" })
{
    // 断点内容
}

属性列表​

属性接受类型默认值说明
xsobj超小屏幕样式
smobj小屏幕样式
mdobj中等屏幕样式
lgobj大屏幕样式
xlobj超大屏幕样式
xxlobj超超大屏幕样式

AspectRatio - 宽高比容器​

保持特定宽高比的容器。

基本用法​

AspectRatio()
    .ratio(16/9)
    .width("100%")
{
    // 宽高比内容
}

属性列表​

属性接受类型默认值说明
ratioint, singlef1宽高比
widthstring, int, singlef"100%"宽度
heightstring, int, singlef"auto"高度
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef0圆角

辅助组件​

Divider - 分割线​

创建分割线组件。

基本用法​

Divider()
    .orientation("horizontal")
    .thickness("1px")
    .color("#e0e0e0")
{
    // 分割线
}

属性列表​

属性接受类型默认值说明
orientationstring"horizontal"方向
thicknessstring, int, singlef"1px"厚度
colorstring"#e0e0e0"颜色
marginstring, int, singlef"8px 0"外边距
widthstring, int, singlef"100%"宽度
heightstring, int, singlef"1px"高度

Spacer - 空白占位​

创建空白占位组件。

基本用法​

Spacer()
    .width("auto")
    .height("auto")
    .flex(1)
{
    // 空白占位
}

属性列表​

属性接受类型默认值说明
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
flexint, singlef, string1弹性比例
backgroundColorstring"transparent"背景颜色

布局示例​

经典三栏布局​

Flex()
  .height("100vh")
{
  // 侧边栏
  Col()
    .width(250)
    .backgroundColor("#f8f9fa")
    .padding(20)
  {
    Text("导航菜单").fontSize(h3).marginBottom(20)
    Text("菜单项1").padding(8).marginBottom(8)
    Text("菜单项2").padding(8).marginBottom(8)
    Text("菜单项3").padding(8).marginBottom(8)
  }
  
  // 主内容区
  Col()
    .flex(1)
    .padding(20)
  {
    // 头部
    Row()
      .justify("space-between")
      .align("center")
      .marginBottom(20)
    {
      Text("页面标题").fontSize(h2)
      Button("操作按钮").backgroundColor("#007bff").color("white")
    }
    
    // 内容区
    Container()
      .flex(1)
      .backgroundColor("#ffffff")
      .borderRadius(8)
      .padding(20)
    {
      Text("主要内容区域")
    }
  }
}

响应式网格布局​

Grid()
  .columns("repeat(auto-fit, minmax(300px, 1fr))")
  .gap(20)
  .padding(20)
{
  Card()
    .padding(20)
    .borderRadius(12)
    .backgroundColor("#ffffff")
    .boxShadow("0 2px 8px rgba(0,0,0,0.1)")
  {
    Text("卡片1").fontSize(h3).marginBottom(12)
    Text("卡片内容描述").color("#666")
  }
  
  Card()
    .padding(20)
    .borderRadius(12)
    .backgroundColor("#ffffff")
    .boxShadow("0 2px 8px rgba(0,0,0,0.1)")
  {
    Text("卡片2").fontSize(h3).marginBottom(12)
    Text("卡片内容描述").color("#666")
  }
  
  Card()
    .padding(20)
    .borderRadius(12)
    .backgroundColor("#ffffff")
    .boxShadow("0 2px 8px rgba(0,0,0,0.1)")
  {
    Text("卡片3").fontSize(h3).marginBottom(12)
    Text("卡片内容描述").color("#666")
  }
}