简介
flutter_miuix 是一个适用于 Flutter 的 HyperOS 风格组件库,移植自 Compose Multiplatform 实现的 miuix。所有设计、动效与交互逻辑均与原版保持一致。
- 仓库:https://github.com/ChuxinNeko/flutter_miuix
- pub.dev:https://pub.dev/packages/flutter_miuix
- License:Apache-2.0
特性
- 完整组件覆盖:45+ 个组件,对应原版 100% 覆盖率,含 Button / TextField / Switch / Slider / NavigationBar / NavigationRail / Scaffold / TopAppBar / TabRow / BreadcrumbBar / BottomSheet / Dialog / Snackbar / Tooltip / Dropdown / ListPopup / CascadingMenu / ColorPicker / PullToRefresh 等
- Squircle 超椭圆圆角:通过
MiuixSquircleBorder复刻 iOS / HyperOS 标志性的「方中带圆」圆角 - Folme 弹簧动效:
MiuixSpringEngine+folmeSpring(damping, response),复刻原版的物理感过渡 - 液态玻璃 Liquid Glass:
MiuixTextureBlur(高斯模糊)+MiuixHighlight(着色器 bloom 高光描边),实现毛玻璃表面与发光边缘;另有一行开启的毛玻璃顶栏MiuixTopAppBar(blurred: true) - Monet 动态取色:基于
material_color_utilities+dynamic_color,支持从壁纸或种子色生成整套 miuix 配色(27 个角色) - OkLab / OkLCH / OkHSV 色彩空间:完整移植原版的感知均匀色彩数学,支撑 ColorPicker 的多色彩空间取色
- Vector Icon 系统:
MiuixVectorIcon+MiuixBasicIcons/MiuixExtendedIcons,支持路径解析、tint 着色与按名称检索 - 统一弹层基础设施:
MiuixPopupHost+MiuixPopupRegistry统一管理 Dialog / BottomSheet / ListPopup / Dropdown 的注册、分层与过渡
组件分类
| 分类 | 主要组件 | 文档 |
|---|---|---|
| 按钮 Buttons | MiuixButton · MiuixTextButton · MiuixIconButton · MiuixFloatingActionButton | 按钮与显示 |
| 输入 Inputs | MiuixTextField · MiuixSwitch · MiuixCheckbox · MiuixRadioButton · MiuixSlider · MiuixVerticalSlider · MiuixRangeSlider · MiuixSearchBar · MiuixNumberPicker | 输入 |
| 菜单 Menus | MiuixOverlayDropdownMenu · MiuixOverlayIconDropdownMenu · MiuixOverlayIconCascadingDropdownMenu | 浮层与反馈 |
| 显示 Display | MiuixText · MiuixCard · MiuixBadge · MiuixBadgedBox · MiuixHorizontalDivider · MiuixVerticalDivider · MiuixSmallTitle · MiuixBasicComponent | 按钮与显示 |
| 偏好 Preferences | MiuixArrowPreference · MiuixSwitchPreference · MiuixCheckboxPreference · MiuixRadioButtonPreference · MiuixSliderPreference · MiuixOverlayDropdownPreference · MiuixOverlaySpinnerPreference | 偏好设置 |
| 选择器 Pickers | MiuixColorPicker · MiuixHsvColorPicker · MiuixOkHsvColorPicker · MiuixOkLabColorPicker · MiuixOkLchColorPicker · MiuixColorPalette | 偏好设置 |
| 反馈 Feedback | MiuixSnackbar · MiuixSnackbarHost · MiuixTooltip · MiuixRichTooltip · MiuixOverlayDialog · MiuixLinearProgressIndicator · MiuixCircularProgressIndicator · MiuixInfiniteProgressIndicator | 浮层与反馈 |
| 浮层 Overlays | MiuixOverlayBottomSheet · MiuixWindowBottomSheet · MiuixFloatingToolbar · MiuixListPopupColumn · MiuixOverlayListPopup | 浮层与反馈 |
| 导航 Navigation | MiuixScaffold · MiuixTopAppBar · MiuixSmallTopAppBar · MiuixNavigationBar · MiuixFloatingNavigationBar · MiuixNavigationRail · MiuixTabRow · MiuixTabRowWithContour · MiuixBreadcrumbBar | 导航与脚手架 |
| 实用 Utility | MiuixSearchBar · MiuixVerticalScrollBar · MiuixHorizontalScrollBar · MiuixPullToRefresh · MiuixSurface | 导航 / 浮层 |
| 主题 Theming | MiuixTheme · MiuixSystemTheme · MiuixThemeController · MiuixColors · MiuixTextStyles · MiuixMotion | 主题、配色与动效 |
| 模糊 Blur | MiuixTextureBlur · MiuixHighlight · MiuixLayerBackdrop · MiuixLayerBackdropCapture | 模糊与液态玻璃 |
| 基础 Foundation | MiuixSquircleBorder · MiuixPressable · MiuixScrollEndHaptic · MiuixContentColor · MiuixSpringEngine · MiuixPopupHost | 基础设施 |
平台支持
| 平台 | 支持情况 | 备注 |
|---|---|---|
| Android | ✅ 完整支持 | 含壁纸动态取色(dynamic_color) |
| iOS | ✅ 完整支持 | 壁纸动态取色回退到种子色 |
| macOS | ✅ 完整支持 | 同 iOS |
| Windows | ✅ 完整支持 | 壁纸动态取色回退到种子色 |
| Linux | ✅ 完整支持 | 同 Windows |
| Web | ✅ 完整支持 | 动态取色回退 |
致谢
- compose-miuix-ui/miuix — 原版 miuix 项目(Compose Multiplatform 实现),本库的所有设计、动效与交互逻辑均源自该项目
- materialkolor — Kotlin 端的 Material 动态配色库,本库的
miuixColorsFromSeed等价于其核心流程