DXUI

Box：容器与布局 ​

用 Box 构建容器与布局。本页包含可运行示例、完整属性及行为限制。

完整示例 ​

先完成环境准备。下面是完整 main.go，执行 go run .。

go
package main

import (
	"github.com/dxui-org/dxui"
	"log"
)

func main() {

	app := dxui.NewApp(dxui.AppOptions{
		Title:      "Box",
		Width:      640,
		Height:     480,
		Background: dxui.RGBA(248, 250, 252, 255),
	})
	if err := app.Run(func() dxui.View {
		return dxui.Box(
			dxui.BoxProps{
				Gap: 16,
				Style: dxui.Style{
					Padding: dxui.Padding(24),
				},
			},
			dxui.Box(
				dxui.BoxProps{
					Direction: dxui.Horizontal,
					Gap:       12,
					Align:     dxui.AlignCenter,
				},
				dxui.Label("Left"),
				dxui.TextButton(dxui.ButtonProps{}, "Right"),
			),
		)
	}); err != nil {

		log.Fatal(err)
	}
}

参数与 API ​

go
func Box(props BoxProps, children ...View) View
字段类型用途、默认与约束
Keystring同父级稳定唯一身份；默认空。动态列表使用业务 ID，勿用可变索引。
StyleStyle局部布局、绘制和文本样式；零值使用固有尺寸与主题默认。
TokenComponentToken组件主题条目；空值选择该组件默认。
StatesStateStyles真实交互状态的绘制补丁，不能伪造状态或改变布局。
PointerPointerBehavior默认 PointerAuto；PointerNone 排除整个子树的指针参与，不等同 Disabled。
DirectionDirection默认 Vertical；Horizontal 从左到右排列。
Gapfloat32相邻子项的非负固定逻辑间距，默认 0。
JustifyJustify主轴 Start/Center/End/SpaceBetween，默认 Start。
AlignAlign交叉轴 Start/Center/End/Stretch，默认 Start。

行为与边界 ​

默认 Vertical，单行排列；Gap 为逻辑单位。Justify 控制主轴，Align 控制交叉轴。children 可为空，但不能包含零 View。不支持换行、order、反向排列或完整 CSS Flexbox。

所有组件共享身份、样式与指针规则。字段引用的枚举、结构体及源码注释见完整声明参考。示例运行方式包含构建验证方法。