UI组件前端【免费下载链接】ant-design-blazorA rich set of enterprise-class UI components based on Ant Design and Blazor.项目地址https://gitcode.com/gh_mirrors/an/ant-design-blazor点击查看免费下载本文以 ant-design-blazor 的基础栅格Basic Grid为切入点讲解如何使用单一组GridRow与GridCol组件快速构建从堆叠到水平排列的栅格布局并结合仓库源码剖析 24 栅格系统的设计理念、组件继承关系、核心 API 与底层样式实现。读完本文你将掌握 ant-design-blazor 栅格布局的最小可用模型并能在此基础上无缝扩展到间隔Gutter、偏移Offset、排序Sort与响应式栅格等进阶用法。一、24 栅格系统与基础栅格的设计理念ant-design-blazor 的栅格组件位于 components/grid 目录其设计理念继承自 Ant Design在多数业务场景中设计区域需要收纳大量信息因此在 12 栅格系统的基础上将整个设计建议区域按照24 等分的原则划分见 Grid.cs 与 组件文档。划分之后的信息区块被称为「盒子」建议横向排列的盒子数量最多四个、最少一个。布局的栅格化系统基于行row和列col来定义信息区块的外部框架其工作原理可以概括为四条通过row在水平方向建立一组column简写col内容应当放置在col内并且只有col可以作为row的直接元素栅格系统中的列用 124 的数值表示其跨越范围例如三个等宽的列可以使用Span8创建如果一行中所有col的span总和超过 24多出的col会作为一个整体另起一行排列。整套系统基于 Flex 布局允许子元素在父节点内进行水平对齐居左、居中、居右、等宽排列、分散排列也支持顶部、垂直居中、底部三种垂直对齐方式还可以用order定义元素排列顺序。布局以 24 栅格定义每个「盒子」的宽度但并不拘泥于栅格——在 ant-design-blazor 中还支持Flex参数直接使用任意 flex 值。二、快速上手基础栅格示例「基础栅格」演示对应的源码是 Basic.razor它只使用单一组的GridRow和GridCol没有引入任何间隔、偏移或响应式参数却能完整展示「从堆叠到水平排列」的栅格形态。完整代码如下div GridRow GridCol Span24col-24/GridCol /GridRow GridRow GridCol Span12col-12/GridCol GridCol Span12col-12/GridCol /GridRow GridRow GridCol Span8col-8/GridCol GridCol Span8col-8/GridCol GridCol Span8col-8/GridCol /GridRow GridRow GridCol Span6col-6/GridCol GridCol Span6col-6/GridCol GridCol Span6col-6/GridCol GridCol Span6col-6/GridCol /GridRow /div这个示例依次展示了四种典型布局行列数与 Span布局效果第 1 行1 列Span24单列占满整行第 2 行2 列各Span12两等分第 3 行3 列各Span8三等分第 4 行4 列各Span6四等分每一行的span总和恰好为 24列与列之间等宽水平排列当屏幕宽度不足以容纳时Flex 的换行机制会让列从水平排列自然回退为堆叠排列这正是标题「从堆叠到水平排列」的含义。需要注意所有GridCol必须直接放置在GridRow内这是组件使用的基本约束下文将从源码说明其实现方式。三、组件关系GridRow / GridCol 与 Row / Col在 ant-design-blazor 中基础栅格所用的GridRow与GridCol是两个轻量别名类GridRow.cspublic class GridRow : RowGridCol.cspublic class GridCol : Col。真正承担布局逻辑的是 Row.razor / Row.razor.cs 与 Col.razor / Col.razor.cs。「列必须放在行内」这一约束在源码中通过CascadingValue级联值实现Row渲染时用CascadingValue Valuethis将自身作为级联值传递给子组件见 Row.razor而Col通过[CascadingParameter] public Row Row { get; set; }接收见 Col.razor.cs。在OnInitialized阶段每个Col会调用Row?.AddCol(this)注册自身并在Dispose时调用Row?.RemoveCol(this)注销见 Col.razor.cs。Row借此维护一个ListCol _cols列表用于在 gutter 变化时把间隔样式同步给每个列见 Row.razor.cs。渲染结果方面Row输出div classant-row ...根据Align、Justify、Wrap、RTL等参数追加ant-row-top、ant-row-middle、ant-row-start、ant-row-center、ant-row-space-between、ant-row-no-wrap、ant-row-rtl等修饰类见 Row.razor.csCol输出div classant-col ant-col-{span} ant-col-offset-{n} ...并通过ClassMapper按参数生成对应栅格类见 Col.razor.cs。因此一个GridRow加多个GridCol的写法最终会被渲染为ant-row包裹的若干ant-col底层样式完全由 Less 栅格体系驱动。四、核心 API 参考基础栅格直接依赖GridRow与GridCol的全部参数。下表综合了 组件文档 与源码实现GridRow 参数参数说明类型默认值Alignflex 布局下的垂直对齐方式RowAlign枚举Top/Middle/Bottom/StretchTopGutter栅格间隔可为像素值、响应式字典如{ xs: 8, sm: 16, md: 24 }或元组形式同时设置[水平间距, 垂直间距]int、Dictionarystring,int、元组0Justifyflex 布局下的水平排列方式RowJustify枚举Start/End/Center/SpaceAround/SpaceBetween/SpaceEvenlyStartWrap是否允许行内内容换行booltrueType布局模式源码注释标记为 Currently unused保留兼容string-OnBreakpoint屏幕尺寸断点触发时的回调EventCallbackBreakpointType-DefaultBreakpoint预渲染阶段使用的默认断点BreakpointType?Xxl源码中Gutter的实际类型为OneOfint, Dictionarystring, int, (int, int), (Dictionarystring, int, int), (int, Dictionarystring, int), (Dictionarystring, int, Dictionarystring, int)见 Row.razor.cs即支持六种组合包括纯水平间隔、不同断点的水平间隔、以及水平/垂直间隔的各种响应式混合。在 Razor 中可以直接写Gutter16像素值、GuttergutterDict响应式字典或Gutter(16,24)水平 16、垂直 24 的元组。RowAlign与RowJustify枚举定义在 RowAlign.cs 与 RowJustify.cs注意 ant-design-blazor 的RowJustify比经典 Ant Design 文档多了一个SpaceEvenly取值对应 CSS 的justify-content: space-evenly见 index.less。GridCol 参数参数说明类型默认值Span栅格占位格数为 0 时相当于display: noneOneOfstring, int-Offset栅格左侧间隔格数间隔内不可再放栅格OneOfstring, int-Order栅格顺序flex 布局模式下有效OneOfstring, int-Pull栅格向左移动格数OneOfstring, int-Push栅格向右移动格数OneOfstring, int-Flex使用 flex 模式如2、100px、1 1 200px非空时按 flex 计算宽度OneOfstring, int-Xs576px响应式栅格OneOfint, EmbeddedProperty-Sm≥576px响应式栅格OneOfint, EmbeddedProperty-Md≥768px响应式栅格OneOfint, EmbeddedProperty-Lg≥992px响应式栅格OneOfint, EmbeddedProperty-Xl≥1200px响应式栅格OneOfint, EmbeddedProperty-Xxl≥1600px响应式栅格OneOfint, EmbeddedProperty-注意文档表格将span等参数标注为 string实际源码使用OneOfstring, int联合类型Col.razor.cs因此Span12字符串与Span12整数均可。响应式参数Xs~Xxl既可以传栅格数int也可以传 EmbeddedProperty 对象后者可同时携带Span、Order、Offset、Push、Pull例如GridCol Xs2 Sm4 Md6 Lg8 Xl10GridCol/GridCol GridCol Xsnew EmbeddedProperty{ Span 5, Offset 1 }GridCol/GridCol断点阈值定义在 BreakpointType.cs分别为Xs480、Sm576、Md768、Lg992、Xl1200、Xxl1600响应式栅格的断点规则扩展自 Bootstrap 4不含其occasionally部分对应样式中的媒体查询可在 default.less 中找到。五、从基础到进阶更多栅格场景掌握基础栅格之后同目录下的其他演示可以快速扩展你的布局能力所有演示均位于 Grid 演示目录间隔 GutterGutter.razorGutter16设置水平间隔Guttergutter传入Dictionarystring,int实现按断点变化的响应式间隔Gutter(16,24)同时设置水平与垂直间隔偏移 OffsetOffset.razorOffset8将列从左侧空出 8 格用于制造不对称布局排序 SortSort.razorPush6/Pull18在 flex 布局下实现列的前后调换无需改动 DOM 顺序响应式栅格Responsive.razor、ResponsiveMore.razor通过Xs~Xxl在不同屏幕宽度下切换列数Flex 布局Flex.razor、FlexAlign.razor、FlexOrder.razor、FlexStretch.razorJustify、Align、Order与Flex参数的自由组合断点监听UseBreakpoint.razorOnBreakpointHandleBreakpoint在窗口尺寸跨越断点时回调当前BreakpointType在线试玩Playground.razor交互式调整各参数观察布局变化。六、源码级原理栅格宽度与断点是如何计算的基础栅格之所以能实现 124 格的等分宽度关键在于样式层的Less mixin。查看 mixin.less.loop-grid-columns会为每个index124生成规则.{col-prefix-cls}{class}-{index} { display: block; flex: 0 0 percentage((index / grid-columns)); max-width: percentage((index / grid-columns)); }即ant-col-8的宽度为8 / 24 ≈ 33.333%ant-col-6为6 / 24 25%以此类推push、pull、offset同样按index / 24的百分比计算。当index 0时生成display: none这正是Span0相当于隐藏列的底层来源mixin.less。断点栅格-xs、-sm、-md、-lg、-xl、-xxl通过media (min-width: screen-xxx-min)逐级包裹生成见 index.less其中-xs不加媒体查询、始终生效。Row本身的 flex 容器规则为display: flex; flex-flow: row wrap;index.less列换行后自然形成多行排列。在运行时层面Row还负责 gutter 的响应式计算OnAfterRenderAsync首次渲染时通过 JS 获取窗口宽度并注册resize监听Row.razor.csOptimizeSize根据窗口宽度确定当前断点随后SetGutterStyle在Row上生成负外边距margin-left/-right: -gutter/2并调用每个Col的RowGutterChanged让列以padding-left/-right: gutter/2补偿Row.razor.cs、Col.razor.cs从而实现列与列之间视觉等距且两端对齐。此外rtl.less 为 RTL 语言环境提供了push/pull/offset的方向翻转规则。七、测试验证栅格渲染行为的可预期性ant-design-blazor 为栅格提供了基于 bUnit 的单元测试位于 ColTests.cs可直接验证基础栅格的渲染输出默认渲染div classant-col ...Contents/div组合参数Span2, Order3, Offset4, Push5, Pull6, Flex1渲染为ant-col ant-col-2 ant-col-order-3 ant-col-offset-4 ant-col-pull-6 ant-col-push-5且内联样式为flex: 1 1 autoSpan 同时支持字符串与整数Span3与Span2均正确生成ant-col-3/ant-col-2响应式参数Xs6生成ant-col-xs-6Xs传EmbeddedProperty{ Span2, Order3, Offset4, Push5, Pull6 }时生成ant-col-xs-2 ant-col-xs-order-3 ant-col-xs-offset-4 ant-col-xs-push-5 ant-col-xs-pull-6Sm~Xxl各断点参数的 int 形式均有对应断言覆盖。这些测试用例从侧面印证了基础栅格中Span、响应式断点与EmbeddedProperty三类参数的渲染规则是稳定、可预期的读者在自定义栅格布局时可以直接参考这些断言来核对输出。八、小结ant-design-blazor 的基础栅格通过「一个GridRow 若干GridCol」的极简模型完整实现了 Ant Design 的 24 栅格系统GridRow负责行容器与 Flex 对齐、间隔管理GridCol负责列宽、偏移、排序与响应式断点两者在源码层面分别是Row与Col的别名通过 CascadingValue 建立了严格的「列必须放在行内」约束。从 Basic.razor 出发配合 Gutter、Offset、Sort、Responsive 与 Flex 等系列演示即可覆盖日常页面布局的绝大多数场景。赞分享UI组件前端【免费下载链接】ant-design-blazorA rich set of enterprise-class UI components based on Ant Design and Blazor.项目地址https://gitcode.com/gh_mirrors/an/ant-design-blazor点击查看免费下载相关推荐Ant Design Blazor 栅格布局实战从基础 GridRow/GridCol 到 24 列系统的源码级解析Ant Design Blazor 栅格布局实战从基础 GridRow/GridCol 到 24 列系统的源码级解析 本篇围绕 Ant Design Blaz前端UI组件设计系统Ant Design 基础栅格布局实战Row / Col 24 栅格系统从入门到进阶Ant Design 基础栅格布局实战Row / Col 24 栅格系统从入门到进阶 本文以 Ant Design 官方「基础布局」basicDemo 为UI组件前端设计系统Ant Design Blazor 栅格响应式布局实战GridRow/GridCol 的六断点参数与断点变化监听Ant Design Blazor 栅格响应式布局实战GridRow/GridCol 的六断点参数与断点变化监听 Ant Design Blazor 的栅格组前端UI组件设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考