amis Wrapper 包裹容器用 JSON 配置实现 div 布局与动态样式【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amisWrapper包裹容器是 amis 中最基础的布局组件之一它本质上就是渲染一个div把任意子内容文本、表单、表格等 SchemaNode包裹起来用于配合 CSS 完成间距、背景、边框、定位等布局控制。本文基于 wrapper 组件文档 结合 Wrapper.tsx 源码 展开读者将掌握 Wrapper 的基本用法、size内边距控制、style动态样式三种写法以及其底层实现原理。基本用法Wrapper 的最小配置只有两项type声明渲染器类型、body指定被包裹的内容。className用于给外层div追加类名是配合自定义 CSS 完成布局的入口。{ type: wrapper, body: 内容, className: b }上面例子中的className: b是为了给容器加上边框否则纯文本内容在外观上看不出包裹效果。从源码看Wrapper 的渲染结果确实是这样一个 div 结构见 packages/amis/src/renderers/Wrapper.tsxdiv className{cx(Wrapper, size size ! none ? Wrapper--${size} : , className)} style{buildStyle(style, data)} >{ type: page, data: { style: { color: #aaa } }, body: [ { type: wrapper, body: 内容, className: b, style: ${style} } ] }写法二style 对象内的某个值来自变量在style对象中单独引用某个变量其余属性写死{ type: page, data: { color: #aaa }, body: [ { type: wrapper, body: 内容, className: b, style: { color: ${color}, fontSize: 30px } } ] }两种写法的差异在于前者把整组样式作为数据维护适合一套样式多处复用或由后端接口动态下发后者适合只动态化个别属性。其底层都由 buildStyle 统一处理详见下文style 的原理一节。不同内边距size通过配置size属性可以一键调整容器内边距无需手写 CSS。官方示例依次展示了默认、极小、小、中等、大、无内边距六种效果[ { type: wrapper, body: 默认内边距, className: b }, { type: divider }, { type: wrapper, body: 极小的内边距, size: xs, className: b }, { type: divider }, { type: wrapper, body: 小的内边距, size: sm, className: b }, { type: divider }, { type: wrapper, body: 中等的内边距, size: md, className: b }, { type: divider }, { type: wrapper, body: 大的内边距, size: lg, className: b }, { type: divider }, { type: wrapper, body: 无内边距, size: none, className: b } ]关于size的取值说明官方属性表标注支持xs、sm、md、lg示例中额外演示了none完全无内边距源码的 类型定义 确认为xs | sm | md | lg | none不配置size时默认值为md见 defaultProps对应的内边距实际由 packages/amis-ui/scss/components/_wrapper.scss 实现各档位使用 amis 的主题间距变量.#{$ns}Wrapper, .#{$ns}Container { min-width: 0; min-height: 0; --xs { padding: var(--gap-xs); } --sm { padding: var(--gap-sm); } --md { padding: var(--gap-md); } --lg { padding: var(--gap-lg); } }也就是说size最终映射为Wrapper--xs/Wrapper--sm等类名具体数值跟随主题变量--gap-xs等走换主题即可全局联动。源码的 SCSS 中还预留了--xl对应--gap-xl但当前 Wrapper 的size类型并不包含xl如需更大间距可在外层再叠加className自行控制。style 自定义样式Wrapper 从 1.1.5 版本开始支持style配置可以完全当做一个div标签来使用任意 CSS 属性、任意单位都可以直接写在style里例如{ type: wrapper, body: 内容, className: b, style: { background: #f5f5f5, borderRadius: 4px, padding: 12px, margin: 8px 0 } }style 的原理buildStyle 的三步处理style之所以支持变量解析 短横线命名 图片 URL 自动补全是因为渲染前经过了 amis-core 的 buildStyle 函数它主要做三件事变量解析若style是字符串如${style}通过resolveVariableAndFilter解析为对象若是对象则对每个属性值做变量解析| raw管道保证取到原始值而非转成字符串命名转换把font-size、background-color这类短横线命名自动转成fontSize、backgroundColor驼峰命名同时会经过valueMap做一次语义映射如radius会被拆解成四个角的borderRadius值但不处理--xxx形式的 CSS 变量图片 URL 自动补全当backgroundImage、borderImage、listStyleImage的值是纯字符串不含逗号、括号时自动包装成url(...)。因此上面动态获取一节展示的${style}/${color}写法正是由这一步变量解析在渲染前完成的这也意味着style支持通过接口数据实时驱动容器外观。源码视角还有一个文档未列出的 wrap 属性阅读 Wrapper.tsx 可以发现除了文档属性表列出的type、className、size、style、body之外Schema 类型中还定义了wrap?: boolean默认true见 AMISWrapperSchemawrap为false时Wrapper 不渲染外层div直接返回body的渲染结果见 render() 方法源码注释标明该属性期望不要使用是为 form controls 用法自动转换时使用的——即某些表单控件在内部转换时需要临时去掉包裹层普通业务配置不建议依赖它。另外renderBody同时支持children与body两种内容注入方式说明该组件在 React 编程式用法与 JSON 配置用法之间做了兼容。属性表属性名类型默认值说明typestringwrapper指定为 Wrapper 渲染器classNamestring外层 Dom 的类名用于配合 CSS 布局sizestringmd内边距档位支持:xs、sm、md、lg、nonestyleObject|string自定义样式支持变量解析会做驼峰转换与图片 URL 补全bodySchemaNode内容容器可为文本、组件或组件数组wrapbooleantrue是否包裹内容源码内置主要用于表单控件内部转换业务配置不建议使用小结Wrapper 是 amis 布局体系中最轻量的一环一条type: wrapper的配置即可获得一个可控类名、可调内边距、可动态换肤的div容器是用 JSON 拼页面时最常用的结构件之一。若需要更复杂的容器能力如标题、工具栏、拖拽可进一步参考同族的 Container 容器 组件文档而把 Wrapper 与className、全局主题变量结合使用就能在纯 JSON 层面完成绝大多数基础布局诉求。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考