Firefox for iOS 组件库ComponentLibrary完全指南从入门、组件规范到新增组件实战【免费下载链接】firefox-iosFirefox for iOS项目地址: https://gitcode.com/GitHub_Trending/fi/firefox-iosComponentLibrary 是 Firefox for iOS 仓库中用于统一 UI 元素构建方式的 Swift 组件库目标是消除长期积累的UX 技术债让开发者在多个页面间复用设计一致、可无障碍访问、支持动态字体与主题切换的标准组件。读完本文你将掌握 ComponentLibrary 的定位与分类体系、通用组件与构建块的逐个用法含视图模型配置项、新增组件的完整流程与九条编码规范以及如何通过 SampleComponentLibraryApp 示例工程快速验证组件效果。背景为什么 Firefox for iOS 需要一套组件库Firefox for iOS 是一个大型应用随着时间推移不同页面上的 UI 元素在观感上逐渐出现差异形成了UX 技术债。逐视图修复这些差异需要大量重复开发时间。组件库Component Library正是为解决这一问题而生的开发者可以直接取用预构建组件减少从零创建 UI 元素的时间和精力组件与设计侧的 Figma components 和 AcornFirefox 的跨平台设计系统保持一致让开发者与设计师拥有共同语言提升协作效率通过对照 Android 端的 Fenix 组件firefox-android 仓库中的 Compose 组件保证各平台外观与行为对齐若存在分歧应由相关方讨论后达成一致。这套库以 Swift Package 形式存在于仓库中源码位于 BrowserKit/Sources/ComponentLibrary其目录结构按组件类型组织Buttons、BottomSheet、Headers、ContextualHintView、SwiftUI 等子目录。它同时被主应用firefox-ios/Client与示例应用SampleComponentLibraryApp依赖。什么是组件三类组件的划分标准组件UI Component是应用中可以多处复用的 UI 片段通常由设计师定义命名应沿用 Figma 或 Acorn 中的组件名。从开发者视角组件库将组件划分为三个通用类别通用组件General components不一定是严格意义上的UX 组件而是开发者需要的可复用构建单元。例如作为某个类型UITableViewcell 的基类供多个功能复用或者一个被多个功能组件复用的CardView。这类组件的定位是底层可复用单元随着库中示例增多会持续扩充。功能组件Feature components完全由设计师定义的组件可能依赖部分通用组件。仅服务于单一功能的组件应随功能代码一起存放而不是放进组件库。例如Jump back in跳回cell即使其底层复用了通用组件由于只在首页Homepage使用就应该放在首页代码中只有当该 cell 之后被多个功能复用时才把它移入组件库。构建块Building blocks供开发者用来支撑通用组件或功能组件的类它们未必与 UI 直接相关但常常是让代码组织更优雅的必要结构。例如允许把闭包当作按钮 action 的ActionButton、支持 Dynamic Type 尺寸自适应的ResizableButton、在滚动时提示更多内容的FadeScrollView。快速上手导入组件库并运行示例应用组件库是一个可通过 Swift Package Manager 导入的 Swift package。在你的工程中把它添加为依赖即可开始使用。入门说明详见 GettingStarted。仓库内提供了一个示例应用 SampleComponentLibraryApp用于演示如何导入与使用库中的各个组件其中每个组件在 SampleComponentLibraryApp/SampleComponentLibraryApp 下都有独立的示例页面目录如 BottomSheet、Buttons、CollapsibleCardView、Headers、ShadowCardView 等由 RootViewController.swift 统一组织入口。注意打开 Sample 应用前请先关闭 Client 主应用两者都依赖 BrowserKit同时打开会冲突。使用体验建议用 Xcode 打开 SampleComponentLibraryApp.xcodeproj运行后在列表中逐个查看组件示例切换 Light / Dark 主题、放大动态字体验证组件的主题适配与 Dynamic Type 表现这也是示例应用的核心价值之一后续可作为截图测试的基础。通用组件逐个拆解用法与配置要点以下通用组件在 ComponentLibrary.md 的 General 分区中列出每个组件都在 General Components 文档目录 下有自己的说明页且遵循视图 视图模型ViewModel的配置模式组件的外观细节通常封装在内部外部通过 ViewModel 注入标题、图标、无障碍标识等信息。BottomSheetViewController底部弹出的模态面板BottomSheetViewController是UIViewController的子类以 popover 形式从屏幕底部弹出的模态视图。其内容由另一个子视图控制器child view controller承载并嵌入其中关闭方式支持点击关闭按钮、下滑手势、点击面板外部区域均可通过其视图模型BottomSheetViewModel配置。关键设计点来自源码子控制器需遵循BottomSheetChild协议实现willDismiss()在面板即将关闭时被调用面板可配置cornerRadius默认 iOS 26 及以上为 24其余为 8、animationTransitionDuration默认 0.3s、animatesPresentation是否带动画、backgroundColor、shouldDismissForTapOutside点击外部是否关闭、shadowOpacity默认 0.3以及关闭按钮的无障碍标签与标识closeButtonA11yLabel/closeButtonA11yIdentifier下滑手势关闭有阈值判断拖拽位移 ≥ 200pt、或 ≥ 内容高度一半、或下滑速度 ≥ 700满足其一即关闭否则弹性回弹BottomSheetViewController.swift面板顶部内容使用FadeScrollView承载内容超高时可滚动iOS 26 及以上使用UIGlassEffect玻璃材质效果并支持主题切换时更新色调。CardView 与 ShadowCardView内容容器CardView是UIView的子类用于承载不同类型的内容。通过CardViewModel配置内容、无障碍标识与背景色。圆角与内边距是设计定死的不应调整按原样使用。需要阴影的卡片请使用ShadowCardView同样通过ShadowCardViewModel传入view与a11yId配置其内部固定了圆角8、阴影半径14、阴影偏移0, 2等 UX 常量并在layoutSubviews中依据圆角路径重算shadowPathShadowCardView.swift主题切换时根据 Nova 设计切换layer2/layer4背景色ShadowCardView.swift。CollapsibleCardView可折叠卡片CollapsibleCardView是ShadowCardView的子类点击后展开/收起内容。通过CollapsibleCardViewModel配置contentView展开后显示的内容视图title/titleA11yId标题及其无障碍标识expandButtonA11yId与展开/收起两种状态的无障碍标签expandButtonA11yLabelExpand/expandButtonA11yLabelCollapse收起时自动读 展开、展开时读 收起expandState初始状态默认.collapsedtelemetryCallback展开状态变化时的遥测回调。交互上点击标题区域UITapGestureRecognizer或点击右侧展开按钮chevronUp/chevronDown图标来自StandardImageIdentifiers都会触发状态切换并通过UIAccessibility.post(.layoutChanged)通知辅助功能CollapsibleCardView.swift。注意它重写了configure(_ viewModel: ShadowCardViewModel)并直接fatalError明确要求使用CollapsibleCardViewModel完成配置。ContextualHintView带箭头的提示气泡ContextualHintView是UIView的子类本质是会被装入带箭头 popover 的内容。通过ContextualHintViewModel配置箭头方向、标题、无障碍标识与点击行为。使用时通常在viewDidLayoutSubviews中设置preferredContentSize设置popoverPresentationController的 delegate 与 source view。HeaderView 与 NavigationHeaderView面板头部HeaderViewUIView子类用于底部面板等场景的头部展示标题、副标题、favicon、主按钮与关闭按钮支持无障碍与主题定制适合网页信息、用户资料等标题 副标题 动作按钮的展示NavigationHeaderView同样为UIView子类提供标题、返回按钮与关闭按钮适合菜单或多级模态视图内的导航。两者源码位于 Headers。CloseButton、LinkButton、PrimaryRoundedButton、SecondaryRoundedButton按钮家族CloseButtonUIButton子类用于关闭视图如底部面板。通过CloseButtonViewModel配置标题、字体与无障碍标识按钮尺寸不应调整按原样使用LinkButtonUIButton子类用于类似网页链接的操作通过LinkButtonViewModel配置标题、字体与无障碍标识颜色与间距保持默认PrimaryRoundedButton主操作按钮ResizableButton子类并遵循ThemeApplicable。源码中可见使用UIButton.Configuration.filled()圆角 iOS 26 及以上 32、其余 12垂直内边距 12、水平内边距 16configure(viewModel:)中注入标题、无障碍标识与可选的imageTitlePaddingPrimaryRoundedButton.swift。状态色完全由主题驱动正常/高亮/禁用分别取actionPrimary、actionPrimaryHover、actionPrimaryDisabled前景色取textInverted系列PrimaryRoundedButton.swiftSecondaryRoundedButton次级操作按钮使用方式与主按钮一致通过SecondaryRoundedButtonViewModel配置。颜色、圆角、间距同样保持默认。视图模型示例以 PrimaryRoundedButtonViewModel 为例let viewModel PrimaryRoundedButtonViewModel( title: 保存, a11yIdentifier: saveButton, imageTitlePadding: 8 // 可选图标与标题的间距 ) button.configure(viewModel: viewModel)PaddedSwitch开关控件PaddedSwitch是UIView子类内部包含一个ThemedSwitch为该开关增加了宽度方向的内边距。通过PaddedSwitchViewModel配置。其他相关组件文档目录中还包含 ActionFooterView标题 链接按钮形式的底部信息区与 RoundedButtonWithImage此外 SwiftUI 目录下还有一批 SwiftUI 实现PrimaryButtonStyle、SecondaryButtonStyle、PagingCarousel、AttributedLinkText等供 SwiftUI 场景复用同一套设计语言。构建块拆解开发者侧的支撑类ActionButton以闭包代替 selectorActionButton是ResizableButton的子类唯一目的是让按钮动作可以用闭包表达比 selector 更便捷。通过ActionButtonViewModel注入title、touchUpAction闭包、内边距与无障碍标识内部通过addTarget(_:action:for:)桥接到touchUpInside(sender:)再回调闭包ActionButton.swift。ResizableButtonDynamic Type 自适应按钮ResizableButton是UIButton的子类启用动态字体的尺寸自适应它重写intrinsicContentSize依据标题在当前可用宽度下的排版结果计算按钮固有尺寸并在layoutSubviews中同步preferredMaxLayoutWidth使标题自动换行ResizableButton.swift。buttonEdgeSpacing默认水平 8、垂直 0不应随意调整。注意这是纯开发用途的构建块并非设计组件设计师定义的按钮请看PrimaryRoundedButton/SecondaryRoundedButton。FadeScrollView滚动渐隐提示FadeScrollView是UIScrollView的子类通过CAGradientLayer在顶部/底部添加渐隐遮罩当内容未超出视口或已滚到顶/底时遮罩透明透明度 1反之对应区域渐隐透明度 0提示用户还有更多内容FadeScrollView.swift。它对 Dynamic Type 尤其有价值——大字号下内容常常溢出此控件能在不配置任何参数的情况下直接作为普通滚动视图使用。BottomSheet 的内容区正是复用了它。如何新增一个组件完整流程与九条规范新增组件分为两大步先把组件加入BrowserKit中的组件库 package再把示例加入 Sample 应用。第一步判断是否值得进入组件库如果 UI 组件只服务于单个功能就让它留在功能代码中如果其中有可复用的 UI 元素某种特定容器、某种特定按钮才值得移入组件库。若存在歧义应在 #firefox-ios-dev Slack 频道或周工程例会上与团队讨论确认。第二步在 ComponentLibrary 中添加组件将代码放到 BrowserKit/Sources/ComponentLibrary 下的相应文件夹Buttons、Headers、BottomSheet 等并严格遵守以下规范图片标识必须来自StandardImageIndentifiers见 StandardImageIdentifiers 相关定义。如果图片不是标准的那它大概率是功能组件不该放进组件库**无障碍标识a11y identifiers**应由 Client 应用注入并可自定义组件被复用时每个标识必须唯一注入通过视图模型完成本地化字符串与无障碍标签应由 Client 应用注入翻译资源在 Client 侧注入同样通过视图模型完成优先提供configure方法而非暴露公共属性形成统一的使用方式让代码更易维护和理解必须良好适配 Dynamic Type组件应能随内容尺寸动态调整自身大小任何情况下都不能使用固定高度四向top、bottom、trailing、leading都应做约束若使用居中约束需确认确实必要且工作正常仅居中会导致适配异常必须良好适配 RTL 语言使用 trailing/leading 约束需要时对图片做镜像翻转参考 UIKit 的imageFlippedForRightToLeftLayoutDirection必须良好适配 VoiceOver为图片注入可朗读标识保证用户听到的上下文正确约束要做对使 VoiceOver 高亮的区域与实际朗读内容一致必须遵循ThemeApplicable能正确响应主题管理器ThemeManager的切换——主题色通过applyTheme(theme:)注入如PrimaryRoundedButton中theme.colors.actionPrimary的用法必须补充文档组件要登记在 ComponentLibrary.md 落地页的 Topics 列表中并拥有自己的独立文档页参考 General Components 与 Building Blocks 目录下的写法。第三步在 Sample 应用中添加示例提示打开 Sample app xcodeproj 前需关闭 Client 主应用才能在 Sample 应用中正常浏览BrowserKit。为组件添加示例是强制步骤用于持续跟踪组件、演示用法并保持其相关性未来还可基于示例应用开展截图测试不同设备、不同字号、不同主题下的外观回归。具体步骤新增一个展示该组件的UIViewController约束要保证 Dynamic Type 正常工作控制器需遵循Themeable并listenForThemeChange确保组件主题化若组件有多个状态示例控制器要展示全部状态可放置多个组件实例新增一个遵循ComponentViewModel协议的组件视图模型协议与示例结构见 SampleComponentLibraryApp/SampleComponentLibraryApp/Protocol将新视图模型加入ComponentData数据数组组织入口见 RootViewController.swift完成随后即可按组件规范测试无障碍与主题切换表现。小结与建议ComponentLibrary 通过通用组件 / 功能组件 / 构建块三层分类和视图 视图模型 主题 无障碍 Dynamic Type RTL六位一体的约束把 Firefox for iOS 的 UI 建设从各自为政收敛为一套设计语言。开发者实践中应注意复用优先按钮、卡片、头部等通用元素一律从库中取用不要重复造轮子注入而非硬编码文案、无障碍标识通过 ViewModel 从 Client 注入保证唯一性与本地化示例先行新增组件必须同步补 Sample 示例与文档保持库的可维护性多端对齐与 Figma / Acorn 设计稿及 Android 端组件对照发现不一致时及时推动对齐讨论。相关材料可进一步阅读GettingStarted、HowToAddNewComponent、组件源码目录 BrowserKit/Sources/ComponentLibrary 及示例工程 SampleComponentLibraryApp。【免费下载链接】firefox-iosFirefox for iOS项目地址: https://gitcode.com/GitHub_Trending/fi/firefox-ios创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Firefox for iOS 组件库（ComponentLibrary）完全指南：从入门、组件规范到新增组件实战
Firefox for iOS 组件库ComponentLibrary完全指南从入门、组件规范到新增组件实战【免费下载链接】firefox-iosFirefox for iOS项目地址: https://gitcode.com/GitHub_Trending/fi/firefox-iosComponentLibrary 是 Firefox for iOS 仓库中用于统一 UI 元素构建方式的 Swift 组件库目标是消除长期积累的UX 技术债让开发者在多个页面间复用设计一致、可无障碍访问、支持动态字体与主题切换的标准组件。读完本文你将掌握 ComponentLibrary 的定位与分类体系、通用组件与构建块的逐个用法含视图模型配置项、新增组件的完整流程与九条编码规范以及如何通过 SampleComponentLibraryApp 示例工程快速验证组件效果。背景为什么 Firefox for iOS 需要一套组件库Firefox for iOS 是一个大型应用随着时间推移不同页面上的 UI 元素在观感上逐渐出现差异形成了UX 技术债。逐视图修复这些差异需要大量重复开发时间。组件库Component Library正是为解决这一问题而生的开发者可以直接取用预构建组件减少从零创建 UI 元素的时间和精力组件与设计侧的 Figma components 和 AcornFirefox 的跨平台设计系统保持一致让开发者与设计师拥有共同语言提升协作效率通过对照 Android 端的 Fenix 组件firefox-android 仓库中的 Compose 组件保证各平台外观与行为对齐若存在分歧应由相关方讨论后达成一致。这套库以 Swift Package 形式存在于仓库中源码位于 BrowserKit/Sources/ComponentLibrary其目录结构按组件类型组织Buttons、BottomSheet、Headers、ContextualHintView、SwiftUI 等子目录。它同时被主应用firefox-ios/Client与示例应用SampleComponentLibraryApp依赖。什么是组件三类组件的划分标准组件UI Component是应用中可以多处复用的 UI 片段通常由设计师定义命名应沿用 Figma 或 Acorn 中的组件名。从开发者视角组件库将组件划分为三个通用类别通用组件General components不一定是严格意义上的UX 组件而是开发者需要的可复用构建单元。例如作为某个类型UITableViewcell 的基类供多个功能复用或者一个被多个功能组件复用的CardView。这类组件的定位是底层可复用单元随着库中示例增多会持续扩充。功能组件Feature components完全由设计师定义的组件可能依赖部分通用组件。仅服务于单一功能的组件应随功能代码一起存放而不是放进组件库。例如Jump back in跳回cell即使其底层复用了通用组件由于只在首页Homepage使用就应该放在首页代码中只有当该 cell 之后被多个功能复用时才把它移入组件库。构建块Building blocks供开发者用来支撑通用组件或功能组件的类它们未必与 UI 直接相关但常常是让代码组织更优雅的必要结构。例如允许把闭包当作按钮 action 的ActionButton、支持 Dynamic Type 尺寸自适应的ResizableButton、在滚动时提示更多内容的FadeScrollView。快速上手导入组件库并运行示例应用组件库是一个可通过 Swift Package Manager 导入的 Swift package。在你的工程中把它添加为依赖即可开始使用。入门说明详见 GettingStarted。仓库内提供了一个示例应用 SampleComponentLibraryApp用于演示如何导入与使用库中的各个组件其中每个组件在 SampleComponentLibraryApp/SampleComponentLibraryApp 下都有独立的示例页面目录如 BottomSheet、Buttons、CollapsibleCardView、Headers、ShadowCardView 等由 RootViewController.swift 统一组织入口。注意打开 Sample 应用前请先关闭 Client 主应用两者都依赖 BrowserKit同时打开会冲突。使用体验建议用 Xcode 打开 SampleComponentLibraryApp.xcodeproj运行后在列表中逐个查看组件示例切换 Light / Dark 主题、放大动态字体验证组件的主题适配与 Dynamic Type 表现这也是示例应用的核心价值之一后续可作为截图测试的基础。通用组件逐个拆解用法与配置要点以下通用组件在 ComponentLibrary.md 的 General 分区中列出每个组件都在 General Components 文档目录 下有自己的说明页且遵循视图 视图模型ViewModel的配置模式组件的外观细节通常封装在内部外部通过 ViewModel 注入标题、图标、无障碍标识等信息。BottomSheetViewController底部弹出的模态面板BottomSheetViewController是UIViewController的子类以 popover 形式从屏幕底部弹出的模态视图。其内容由另一个子视图控制器child view controller承载并嵌入其中关闭方式支持点击关闭按钮、下滑手势、点击面板外部区域均可通过其视图模型BottomSheetViewModel配置。关键设计点来自源码子控制器需遵循BottomSheetChild协议实现willDismiss()在面板即将关闭时被调用面板可配置cornerRadius默认 iOS 26 及以上为 24其余为 8、animationTransitionDuration默认 0.3s、animatesPresentation是否带动画、backgroundColor、shouldDismissForTapOutside点击外部是否关闭、shadowOpacity默认 0.3以及关闭按钮的无障碍标签与标识closeButtonA11yLabel/closeButtonA11yIdentifier下滑手势关闭有阈值判断拖拽位移 ≥ 200pt、或 ≥ 内容高度一半、或下滑速度 ≥ 700满足其一即关闭否则弹性回弹BottomSheetViewController.swift面板顶部内容使用FadeScrollView承载内容超高时可滚动iOS 26 及以上使用UIGlassEffect玻璃材质效果并支持主题切换时更新色调。CardView 与 ShadowCardView内容容器CardView是UIView的子类用于承载不同类型的内容。通过CardViewModel配置内容、无障碍标识与背景色。圆角与内边距是设计定死的不应调整按原样使用。需要阴影的卡片请使用ShadowCardView同样通过ShadowCardViewModel传入view与a11yId配置其内部固定了圆角8、阴影半径14、阴影偏移0, 2等 UX 常量并在layoutSubviews中依据圆角路径重算shadowPathShadowCardView.swift主题切换时根据 Nova 设计切换layer2/layer4背景色ShadowCardView.swift。CollapsibleCardView可折叠卡片CollapsibleCardView是ShadowCardView的子类点击后展开/收起内容。通过CollapsibleCardViewModel配置contentView展开后显示的内容视图title/titleA11yId标题及其无障碍标识expandButtonA11yId与展开/收起两种状态的无障碍标签expandButtonA11yLabelExpand/expandButtonA11yLabelCollapse收起时自动读 展开、展开时读 收起expandState初始状态默认.collapsedtelemetryCallback展开状态变化时的遥测回调。交互上点击标题区域UITapGestureRecognizer或点击右侧展开按钮chevronUp/chevronDown图标来自StandardImageIdentifiers都会触发状态切换并通过UIAccessibility.post(.layoutChanged)通知辅助功能CollapsibleCardView.swift。注意它重写了configure(_ viewModel: ShadowCardViewModel)并直接fatalError明确要求使用CollapsibleCardViewModel完成配置。ContextualHintView带箭头的提示气泡ContextualHintView是UIView的子类本质是会被装入带箭头 popover 的内容。通过ContextualHintViewModel配置箭头方向、标题、无障碍标识与点击行为。使用时通常在viewDidLayoutSubviews中设置preferredContentSize设置popoverPresentationController的 delegate 与 source view。HeaderView 与 NavigationHeaderView面板头部HeaderViewUIView子类用于底部面板等场景的头部展示标题、副标题、favicon、主按钮与关闭按钮支持无障碍与主题定制适合网页信息、用户资料等标题 副标题 动作按钮的展示NavigationHeaderView同样为UIView子类提供标题、返回按钮与关闭按钮适合菜单或多级模态视图内的导航。两者源码位于 Headers。CloseButton、LinkButton、PrimaryRoundedButton、SecondaryRoundedButton按钮家族CloseButtonUIButton子类用于关闭视图如底部面板。通过CloseButtonViewModel配置标题、字体与无障碍标识按钮尺寸不应调整按原样使用LinkButtonUIButton子类用于类似网页链接的操作通过LinkButtonViewModel配置标题、字体与无障碍标识颜色与间距保持默认PrimaryRoundedButton主操作按钮ResizableButton子类并遵循ThemeApplicable。源码中可见使用UIButton.Configuration.filled()圆角 iOS 26 及以上 32、其余 12垂直内边距 12、水平内边距 16configure(viewModel:)中注入标题、无障碍标识与可选的imageTitlePaddingPrimaryRoundedButton.swift。状态色完全由主题驱动正常/高亮/禁用分别取actionPrimary、actionPrimaryHover、actionPrimaryDisabled前景色取textInverted系列PrimaryRoundedButton.swiftSecondaryRoundedButton次级操作按钮使用方式与主按钮一致通过SecondaryRoundedButtonViewModel配置。颜色、圆角、间距同样保持默认。视图模型示例以 PrimaryRoundedButtonViewModel 为例let viewModel PrimaryRoundedButtonViewModel( title: 保存, a11yIdentifier: saveButton, imageTitlePadding: 8 // 可选图标与标题的间距 ) button.configure(viewModel: viewModel)PaddedSwitch开关控件PaddedSwitch是UIView子类内部包含一个ThemedSwitch为该开关增加了宽度方向的内边距。通过PaddedSwitchViewModel配置。其他相关组件文档目录中还包含 ActionFooterView标题 链接按钮形式的底部信息区与 RoundedButtonWithImage此外 SwiftUI 目录下还有一批 SwiftUI 实现PrimaryButtonStyle、SecondaryButtonStyle、PagingCarousel、AttributedLinkText等供 SwiftUI 场景复用同一套设计语言。构建块拆解开发者侧的支撑类ActionButton以闭包代替 selectorActionButton是ResizableButton的子类唯一目的是让按钮动作可以用闭包表达比 selector 更便捷。通过ActionButtonViewModel注入title、touchUpAction闭包、内边距与无障碍标识内部通过addTarget(_:action:for:)桥接到touchUpInside(sender:)再回调闭包ActionButton.swift。ResizableButtonDynamic Type 自适应按钮ResizableButton是UIButton的子类启用动态字体的尺寸自适应它重写intrinsicContentSize依据标题在当前可用宽度下的排版结果计算按钮固有尺寸并在layoutSubviews中同步preferredMaxLayoutWidth使标题自动换行ResizableButton.swift。buttonEdgeSpacing默认水平 8、垂直 0不应随意调整。注意这是纯开发用途的构建块并非设计组件设计师定义的按钮请看PrimaryRoundedButton/SecondaryRoundedButton。FadeScrollView滚动渐隐提示FadeScrollView是UIScrollView的子类通过CAGradientLayer在顶部/底部添加渐隐遮罩当内容未超出视口或已滚到顶/底时遮罩透明透明度 1反之对应区域渐隐透明度 0提示用户还有更多内容FadeScrollView.swift。它对 Dynamic Type 尤其有价值——大字号下内容常常溢出此控件能在不配置任何参数的情况下直接作为普通滚动视图使用。BottomSheet 的内容区正是复用了它。如何新增一个组件完整流程与九条规范新增组件分为两大步先把组件加入BrowserKit中的组件库 package再把示例加入 Sample 应用。第一步判断是否值得进入组件库如果 UI 组件只服务于单个功能就让它留在功能代码中如果其中有可复用的 UI 元素某种特定容器、某种特定按钮才值得移入组件库。若存在歧义应在 #firefox-ios-dev Slack 频道或周工程例会上与团队讨论确认。第二步在 ComponentLibrary 中添加组件将代码放到 BrowserKit/Sources/ComponentLibrary 下的相应文件夹Buttons、Headers、BottomSheet 等并严格遵守以下规范图片标识必须来自StandardImageIndentifiers见 StandardImageIdentifiers 相关定义。如果图片不是标准的那它大概率是功能组件不该放进组件库**无障碍标识a11y identifiers**应由 Client 应用注入并可自定义组件被复用时每个标识必须唯一注入通过视图模型完成本地化字符串与无障碍标签应由 Client 应用注入翻译资源在 Client 侧注入同样通过视图模型完成优先提供configure方法而非暴露公共属性形成统一的使用方式让代码更易维护和理解必须良好适配 Dynamic Type组件应能随内容尺寸动态调整自身大小任何情况下都不能使用固定高度四向top、bottom、trailing、leading都应做约束若使用居中约束需确认确实必要且工作正常仅居中会导致适配异常必须良好适配 RTL 语言使用 trailing/leading 约束需要时对图片做镜像翻转参考 UIKit 的imageFlippedForRightToLeftLayoutDirection必须良好适配 VoiceOver为图片注入可朗读标识保证用户听到的上下文正确约束要做对使 VoiceOver 高亮的区域与实际朗读内容一致必须遵循ThemeApplicable能正确响应主题管理器ThemeManager的切换——主题色通过applyTheme(theme:)注入如PrimaryRoundedButton中theme.colors.actionPrimary的用法必须补充文档组件要登记在 ComponentLibrary.md 落地页的 Topics 列表中并拥有自己的独立文档页参考 General Components 与 Building Blocks 目录下的写法。第三步在 Sample 应用中添加示例提示打开 Sample app xcodeproj 前需关闭 Client 主应用才能在 Sample 应用中正常浏览BrowserKit。为组件添加示例是强制步骤用于持续跟踪组件、演示用法并保持其相关性未来还可基于示例应用开展截图测试不同设备、不同字号、不同主题下的外观回归。具体步骤新增一个展示该组件的UIViewController约束要保证 Dynamic Type 正常工作控制器需遵循Themeable并listenForThemeChange确保组件主题化若组件有多个状态示例控制器要展示全部状态可放置多个组件实例新增一个遵循ComponentViewModel协议的组件视图模型协议与示例结构见 SampleComponentLibraryApp/SampleComponentLibraryApp/Protocol将新视图模型加入ComponentData数据数组组织入口见 RootViewController.swift完成随后即可按组件规范测试无障碍与主题切换表现。小结与建议ComponentLibrary 通过通用组件 / 功能组件 / 构建块三层分类和视图 视图模型 主题 无障碍 Dynamic Type RTL六位一体的约束把 Firefox for iOS 的 UI 建设从各自为政收敛为一套设计语言。开发者实践中应注意复用优先按钮、卡片、头部等通用元素一律从库中取用不要重复造轮子注入而非硬编码文案、无障碍标识通过 ViewModel 从 Client 注入保证唯一性与本地化示例先行新增组件必须同步补 Sample 示例与文档保持库的可维护性多端对齐与 Figma / Acorn 设计稿及 Android 端组件对照发现不一致时及时推动对齐讨论。相关材料可进一步阅读GettingStarted、HowToAddNewComponent、组件源码目录 BrowserKit/Sources/ComponentLibrary 及示例工程 SampleComponentLibraryApp。【免费下载链接】firefox-iosFirefox for iOS项目地址: https://gitcode.com/GitHub_Trending/fi/firefox-ios创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考