Skip to content

导航与脚手架 Navigation & Scaffold

MiuixScaffold

Miuix 风格脚手架,编排顶栏、底栏、悬浮按钮、悬浮工具栏、Snackbar 与弹窗层;content 会收到脚手架计算出的内边距,由内容自行应用。

参数类型默认值说明
keyKey?Widget key
topBarWidget?null屏幕顶部的应用栏,通常是 MiuixTopAppBar
bottomBarWidget?null屏幕底部的栏,通常是 MiuixNavigationBar
floatingActionButtonWidget?null悬浮操作按钮
floatingActionButtonPositionMiuixFabPositionMiuixFabPosition.end悬浮操作按钮的位置
floatingToolbarWidget?null悬浮工具栏
floatingToolbarPositionMiuixToolbarPositionMiuixToolbarPosition.bottomCenter悬浮工具栏的位置
snackbarHostWidget?null承载 Snackbar 的组件,通常是 MiuixSnackbarHost
popupHostWidget?null承载弹窗与对话框的组件,为 null 时默认使用 MiuixPopupHost
containerColorColor?null脚手架背景色,默认 MiuixTheme.colors.surface;传入透明色可无背景
contentWindowInsetsEdgeInsets?null传给 content 的窗口内边距;为 null 时取 MediaQuery.paddingOf(context)
contentMiuixScaffoldContentBuilder必填屏幕主体内容;lambda 接收应应用到内容根部的内边距

示例:

dart
MiuixScaffold(
  topBar: MiuixSmallTopAppBar(title: 'Home'),
  bottomBar: MiuixNavigationBar(children: [/* ... */]),
  content: (padding) => Padding(padding: padding, child: bodyList),
)

MiuixScaffoldContentBuilder

MiuixScaffold.content 槽的类型别名。脚手架先测量顶/底栏与系统内边距,再把应应用到内容根部的 EdgeInsets 通过此回调传给内容;内容应自行用 Padding 包裹根部。

签名:

dart
typedef MiuixScaffoldContentBuilder = Widget Function(EdgeInsets contentPadding);
参数类型说明
contentPaddingEdgeInsets由脚手架计算出的内边距,应应用到内容根部

MiuixFabPosition

悬浮操作按钮(FAB)在 MiuixScaffold 中的位置。

说明
start底部起始侧,位于底栏(若存在)上方
center底部居中,位于底栏(若存在)上方
end底部结束侧,位于底栏(若存在)上方
endOverlay底部结束侧,覆盖在底栏(若存在)之上

MiuixToolbarPosition

悬浮工具栏在 MiuixScaffold 中的位置。枚举顺序与整型值一一对应(TopStart=0 … BottomCenter=7)。

说明
topStart顶部起始
centerStart中部起始
bottomStart底部起始
topEnd顶部结束
centerEnd中部结束
bottomEnd底部结束
topCenter顶部居中
bottomCenter底部居中

MiuixTopAppBar

大标题可折叠的 TopAppBar。必须配合 MiuixScrollBehavior 使用才能实现折叠/展开;不传 scrollBehavior 时表现为静态展开状态。

参数类型默认值说明
keyKey?Widget key
titleString必填标题文本
colorColor?null背景色,默认 MiuixTheme.colors.surface
titleColorColor?null折叠后小标题颜色
largeTitleString?null大标题,默认与 title 相同
largeTitleColorColor?null大标题颜色
subtitleString''副标题(展开时显示在大标题下方,折叠时显示在小标题下方)
subtitleColorColor?null副标题颜色
navigationIconWidget?null导航图标(leading)
actionsList<Widget>?null操作图标(trailing)
scrollBehaviorMiuixScrollBehavior?null控制折叠/展开的滚动行为
defaultWindowInsetsPaddingbooltrue是否应用默认窗口内边距
titlePaddingdoubleMiuixTopAppBarDefaults.titlePadding (26)标题水平内边距
navigationIconPaddingdoubleMiuixTopAppBarDefaults.navigationIconPadding (16)导航图标起始内边距
actionIconPaddingdoubleMiuixTopAppBarDefaults.actionIconPadding (16)操作图标末端内边距
bottomContentWidget?null标题区域下方的附加内容
blurredboolfalse是否启用毛玻璃背景(增强,非原版行为)。true 时背景变为对身后已绘制内容的实时高斯模糊 + 半透明色调,实现"内容透过顶栏虚化"。用 BackdropFilter 实现,需顶栏画在可滚动内容之上(MiuixScaffold 的 topBar 即是)
blurRadiusdouble24毛玻璃模糊半径(dp),仅 blurred=true 时生效;sigma = blurRadius × 0.45
blurTintAlphadouble0.55毛玻璃上叠加的背景色调不透明度 [0,1],仅 blurred=true 时生效。太高盖住模糊、太低对比不足

示例:

dart
final behavior = miuixScrollBehavior();
MiuixTopAppBar(
  title: 'Title',
  subtitle: 'Subtitle',
  scrollBehavior: behavior,
  navigationIcon: MiuixIcon(vector: MiuixIcons.basic.back),
);

// 毛玻璃顶栏(内容透过顶栏虚化)
MiuixScaffold(
  topBar: const MiuixTopAppBar(title: 'Home', blurred: true),
  content: (padding) => ListView(padding: padding, children: [/* ... */]),
);

MiuixSmallTopAppBar

小标题静态 TopAppBar。不参与折叠/展开,固定显示居中标题;如传入 scrollBehavior,会把 state 的 heightOffsetLimit 锁为 0(pinned 效果)。

参数类型默认值说明
keyKey?Widget key
titleString必填标题文本
colorColor?null背景色,默认 MiuixTheme.colors.surface
titleColorColor?null标题颜色
subtitleString''副标题(居中显示在标题下方)
subtitleColorColor?null副标题颜色
navigationIconWidget?null导航图标(leading)
actionsList<Widget>?null操作图标(trailing)
scrollBehaviorMiuixScrollBehavior?null传入时把共享 behavior 锁为 pinned
defaultWindowInsetsPaddingbooltrue是否应用默认窗口内边距
titlePaddingdoubleMiuixTopAppBarDefaults.titlePadding (26)标题水平内边距
navigationIconPaddingdoubleMiuixTopAppBarDefaults.navigationIconPadding (16)导航图标起始内边距
actionIconPaddingdoubleMiuixTopAppBarDefaults.actionIconPadding (16)操作图标末端内边距
bottomContentWidget?null标题区域下方的附加内容

示例:

dart
MiuixSmallTopAppBar(title: 'Settings', subtitle: 'v1.0')

MiuixTopAppBarState

TopAppBar 的状态(继承 ChangeNotifier)。持有折叠偏移量、内容滚动偏移量等,通常由 MiuixScrollBehavior 持有并更新,由 MiuixTopAppBar 读取。

参数类型默认值说明
initialHeightOffsetLimitdoubledouble.negativeInfinity折叠高度上限(负数,表示允许的最大折叠像素数)
initialHeightOffsetdouble0初始折叠偏移量
initialContentOffsetdouble0初始内容滚动偏移量

主要属性:heightOffsetLimitheightOffset(夹在上限与 0 之间)、contentOffsetcollapsedFraction(0 展开、1 折叠)、overlappedFraction

MiuixScrollBehavior

滚动行为抽象。暴露 state(MiuixTopAppBarState)与 isPinned(是否固定,不随滚动收起)。

MiuixExitUntilCollapsedScrollBehavior

"折叠到顶部为止"的滚动行为。上滑时优先折叠 TopAppBar,完全折叠后才让下方内容滚动;下滑时优先展开。实现 MiuixScrollBehavior,isPinned 恒为 false。

参数类型默认值说明
stateMiuixTopAppBarState?缺省新建 MiuixTopAppBarState()关联状态
canScrollbool Function()?null是否处理滚动事件

MiuixScrollBehaviorListener

把滚动事件桥接到 MiuixExitUntilCollapsedScrollBehavior 的监听器;包裹任意可滚动组件,自动处理折叠/展开以及手势结束后的吸附动画。

参数类型默认值说明
keyKey?Widget key
behaviorMiuixExitUntilCollapsedScrollBehavior必填滚动行为
childWidget必填被包裹的可滚动子组件

示例:

dart
final behavior = miuixScrollBehavior();
MiuixScrollBehaviorListener(
  behavior: behavior,
  child: ListView(children: [/* ... */]),
);

miuixScrollBehavior

创建一个默认的 MiuixExitUntilCollapsedScrollBehavior 的顶层函数。

参数类型默认值说明
stateMiuixTopAppBarState?null关联状态
canScrollbool Function()?null是否处理滚动事件

返回:MiuixExitUntilCollapsedScrollBehavior

MiuixTopAppBarDefaults

TopAppBar 默认值(私有构造,仅静态常量)。

常量说明
titlePadding26标题水平内边距
navigationIconPadding16导航图标起始内边距
actionIconPadding16操作图标末端内边距
collapsedHeight52折叠状态下 TopAppBar 的高度
smallTopAppBarCenterHeight50SmallTopAppBar 的垂直中心高度
largeTitleBottomPadding4无副标题时大标题的底部内边距
subtitleBottomPadding8副标题的底部内边距
titleWidthFraction0.9居中标题与导航/操作之间的横向余量比例

MiuixNavigationBar

普通底部导航栏。children 通常由 2 到 5 个 MiuixNavigationBarItem 组成(断言长度 2..5),每项会被 Expanded 等分。

参数类型默认值说明
keyKey?Widget key
childrenList<Widget>必填导航项列表(长度须 2..5)
colorColor?null背景色,缺省用 colors.background
colorsMiuixNavigationBarColors?null颜色配置,缺省取主题默认
showDividerbooltrue是否显示顶部分隔线
defaultWindowInsetsPaddingbooltrue是否补充底部系统区留白
modeMiuixNavigationBarDisplayModeMiuixNavigationBarDisplayMode.iconAndText导航项显示模式

示例:

dart
MiuixNavigationBar(
  children: [
    MiuixNavigationBarItem(selected: index == 0, onPressed: () {}, icon: icon0, label: '首页'),
    MiuixNavigationBarItem(selected: index == 1, onPressed: () {}, icon: icon1, label: '我的'),
  ],
)

MiuixNavigationBarItem

普通导航项。icon 与 labelWidget 是槽位;未提供 labelWidget 时用 label 构造文本。

参数类型默认值说明
keyKey?Widget key
selectedbool必填是否选中
onPressedVoidCallback?必填点击回调;为 null 时禁用
iconWidget必填图标槽
labelString必填可访问性标签及默认可见文本
labelWidgetWidget?null自定义标签组件
enabledbooltrue是否启用
badgeWidget?null徽标槽,锚定在图标顶部末端

MiuixFloatingNavigationBar

悬浮式底部导航栏。内容按自身宽度排列,不参与等分,项目之间固定间隔 12(断言 children 长度 2..5)。

参数类型默认值说明
keyKey?Widget key
childrenList<Widget>必填导航项列表(长度须 2..5)
colorColor?null背景色,缺省用 colors.floatingBackground
colorsMiuixNavigationBarColors?null颜色配置,缺省取主题默认
cornerRadiusdoubleMiuixFloatingNavigationBarDefaults.cornerRadius (50)圆角半径
horizontalAlignmentAlignmentGeometryAlignmentDirectional.center水平对齐
horizontalOutSidePaddingdoubleMiuixFloatingNavigationBarDefaults.horizontalOutSidePadding (36)外侧水平内边距
shadowElevationdoubleMiuixFloatingNavigationBarDefaults.shadowElevation (1)是否显示阴影(>0 显示;阴影几何固定黑色 20%、blurRadius=10)
showDividerboolfalse是否显示描边
defaultWindowInsetsPaddingbooltrue是否应用默认 caption-bar inset(移动端为 0)

示例:

dart
MiuixFloatingNavigationBar(
  children: [
    MiuixFloatingNavigationBarItem(selected: true, onPressed: () {}, icon: icon0, label: '首页'),
    MiuixFloatingNavigationBarItem(selected: false, onPressed: () {}, icon: icon1, label: '我的'),
  ],
)

MiuixFloatingNavigationBarItem

悬浮导航项。

参数类型默认值说明
keyKey?Widget key
selectedbool必填是否选中
onPressedVoidCallback?必填点击回调;为 null 时禁用
iconWidget必填图标槽
labelString必填可访问性标签
enabledbooltrue是否启用
badgeWidget?null徽标槽

MiuixNavigationItem

导航项数据(@immutable)。

参数类型默认值说明
labelString必填可访问性标签及默认可见标签文本
iconWidget必填图标槽;组件会通过 IconTheme 提供尺寸和状态色
badgeWidget?null可选 badge 槽,锚定在图标的顶部末端

MiuixNavigationBarDisplayMode

导航项显示模式。

说明
iconAndText始终显示图标和文本
iconOnly仅显示图标
iconWithSelectedLabel始终显示图标,仅为选中项显示文本

MiuixNavigationBarColors

导航栏颜色,集中保存普通与悬浮导航栏使用的主题色(@immutable)。

参数类型默认值说明
backgroundColor必填普通导航栏背景色
floatingBackgroundColor必填悬浮导航栏背景色
contentColor必填图标和标签的基础颜色;状态透明度在此之上计算
dividerColor必填分隔线和悬浮描边颜色

MiuixNavigationBarDefaults

普通导航栏默认值(私有构造)。

常量说明
itemHeight64项目高度
iconSize26图标尺寸
labelFontSize12标签字号
iconTopPadding8图标顶部内边距
bottomPadding8底部内边距
selectedPressedAlpha0.5选中且按下透明度
unselectedPressedAlpha0.6未选中且按下透明度
unselectedAlpha0.4未选中透明度
selectionAnimationDuration300ms选择动画时长

静态方法 defaultColors(BuildContext) → MiuixNavigationBarColors:从当前主题创建默认颜色。

MiuixFloatingNavigationBarDefaults

悬浮导航栏默认值(私有构造)。

常量说明
horizontalOutSidePadding36外侧水平内边距
shadowElevation1阴影开关
horizontalPadding12内部水平内边距
itemSpacing12项目间距
iconSize28图标尺寸
iconPadding10图标内边距
selectedPressedAlpha0.5选中且按下透明度
unselectedPressedAlpha0.6未选中且按下透明度
unselectedAlpha0.4未选中透明度
cornerRadius50圆角,与 FloatingToolbarDefaults.CornerRadius 一致

静态方法 defaultColors(BuildContext) → MiuixNavigationBarColors:委托 MiuixNavigationBarDefaults.defaultColors。

MiuixNavigationRail

适合宽屏使用、可选展开控制器的 Miuix 导航栏。state 为空时使用经典折叠布局且不显示切换按钮;非空时栏宽、项目布局、选中背景和字号共享同一条弹簧动画。

参数类型默认值说明
keyKey?Widget key
childrenList<Widget>必填导航项列表,通常为 MiuixNavigationRailItem
stateMiuixNavigationRailState?null展开/折叠状态;为 null 时无切换按钮
headerWidget?null顶部头部内容
colorsMiuixNavigationRailColors?null颜色配置,缺省取主题默认
showDividerbooltrue是否显示右侧分隔线
defaultWindowInsetsPaddingbooltrue是否应用默认窗口内边距
minWidthdoubleMiuixNavigationRailDefaults.minWidth (80)折叠宽度
expandedWidthdoubleMiuixNavigationRailDefaults.expandedWidth (240)展开宽度
expandContentDescriptionStringMiuixNavigationRailDefaults.expandContentDescription ('Expand navigation rail')展开按钮无障碍描述
collapseContentDescriptionStringMiuixNavigationRailDefaults.collapseContentDescription ('Collapse navigation rail')折叠按钮无障碍描述
scrollControllerScrollController?null内部滚动控制器
iconSizedoubleMiuixNavigationRailDefaults.iconSize (28)项目图标尺寸;减小会同时降低项目高度(折叠/展开态都变矮)
itemVerticalPaddingdoubleMiuixNavigationRailDefaults.itemVerticalPadding (12)折叠态项目上下内边距
expandedItemVerticalPaddingdoubleMiuixNavigationRailDefaults.expandedItemContentVerticalPadding (14)展开态项目上下内边距;减小可直接降低展开态每项高度
labelFontSizedoubleMiuixNavigationRailDefaults.labelFontSize (12)折叠态标签字号
expandedLabelFontSizedoubleMiuixNavigationRailDefaults.expandedLabelFontSize (16)展开态标签字号

后 5 个尺寸参数为增强项,默认值保持原值(非破坏),用于按需压缩侧栏项。

示例:

dart
final railState = MiuixNavigationRailState();
MiuixNavigationRail(
  state: railState,
  children: [
    MiuixNavigationRailItem(selected: true, onPressed: () {}, icon: icon0, label: '首页'),
    MiuixNavigationRailItem(selected: false, onPressed: () {}, icon: icon1, label: '设置'),
  ],
)

MiuixNavigationRailItem

导航栏项目,支持图标、标签以及可选徽标槽位。图标为装饰内容,项目语义仅朗读 label。

参数类型默认值说明
keyKey?Widget key
selectedbool必填是否选中
onPressedVoidCallback?必填点击回调;为 null 时禁用
iconWidget必填图标槽
labelString必填标签文本(无障碍朗读)
enabledbooltrue是否启用
badgeWidget?null徽标槽,锚定到图标右上角

MiuixNavigationRailState

控制 MiuixNavigationRail 展开与折叠的状态对象(继承 ChangeNotifier)。别名 MiuixNavigationRailController。

参数类型默认值说明
initialValueMiuixNavigationRailValueMiuixNavigationRailValue.collapsed初始展开状态

主要成员:currentValueisExpandedexpand()collapse()toggle()

MiuixNavigationRailController

MiuixNavigationRailState 的类型别名(typedef MiuixNavigationRailController = MiuixNavigationRailState)。

MiuixNavigationRailValue

导航栏的展开状态枚举。

说明
collapsed折叠
expanded展开

MiuixNavigationRailColors

导航栏颜色配置(@immutable)。

参数类型默认值说明
backgroundColor必填背景色
contentColor必填内容(图标/标签)色
indicatorColor必填选中指示器色
dividerColor必填分隔线色

MiuixNavigationRailDefaults

NavigationRail 默认值(私有构造)。

常量说明
minWidth80折叠宽度
expandedWidth240展开宽度
verticalPadding24垂直内边距
headerSpacing24头部间距
iconSize28图标尺寸
iconTextSpacing4图标与文字间距
itemVerticalPadding12项目垂直内边距
labelFontSize12折叠标签字号
expandedLabelFontSize16展开标签字号
expandedItemHorizontalMargin12展开项水平外边距
expandedItemCornerRadius16展开项圆角
collapsedIndicatorVerticalPadding4折叠指示器垂直内边距
expandedItemContentHorizontalPadding14展开项内容水平内边距
expandedItemContentVerticalPadding14展开项内容垂直内边距
expandedItemIconTextSpacing16展开项图标与文字间距
expandContentDescription'Expand navigation rail'展开描述
collapseContentDescription'Collapse navigation rail'折叠描述

静态方法 colors(BuildContext) → MiuixNavigationRailColors:从当前主题创建默认颜色。

MiuixTabRow

Miuix 标签栏。横向可滚动,选中项以 squircle 背景指示。

参数类型默认值说明
keyKey?Widget key
tabsList<String>必填标签文本列表
selectedTabIndexint必填选中项索引
onTabSelectedValueChanged<int>必填选中回调
colorsMiuixTabRowColors?null颜色配置,缺省取主题默认
minWidthdoubleMiuixTabRowDefaults.tabRowMinWidth (76)单个标签最小宽度
maxWidthdoubleMiuixTabRowDefaults.tabRowMaxWidth (98)单个标签最大宽度
heightdoubleMiuixTabRowDefaults.tabRowHeight (42)标签栏高度
cornerRadiusdoubleMiuixTabRowDefaults.tabRowCornerRadius (12)指示器圆角
itemSpacingdoubleMiuixTabRowDefaults.tabRowItemSpacing (9)项目间距
contentAlignmentAlignmentGeometryAlignment.center标签内容对齐
scrollControllerScrollController?null横向滚动控制器

示例:

dart
MiuixTabRow(
  tabs: ['全部', '未读', '已归档'],
  selectedTabIndex: index,
  onTabSelected: (i) => setState(() => index = i),
)

MiuixTabRowWithContour

带外轮廓标签栏。整体套一层 squircle 外框,指示器带 200ms 位移动画。

参数类型默认值说明
keyKey?Widget key
tabsList<String>必填标签文本列表
selectedTabIndexint必填选中项索引
onTabSelectedValueChanged<int>必填选中回调
colorsMiuixTabRowColors?null颜色配置,缺省取主题默认
minWidthdoubleMiuixTabRowDefaults.tabRowWithContourMinWidth (62)单个标签最小宽度
maxWidthdoubleMiuixTabRowDefaults.tabRowWithContourMaxWidth (84)单个标签最大宽度
heightdoubleMiuixTabRowDefaults.tabRowWithContourHeight (45)标签栏高度
cornerRadiusdoubleMiuixTabRowDefaults.tabRowWithContourCornerRadius (8)指示器圆角
itemSpacingdoubleMiuixTabRowDefaults.contourItemSpacing (5)项目间距
contentAlignmentAlignmentGeometryAlignment.center标签内容对齐
scrollControllerScrollController?null横向滚动控制器

示例:

dart
MiuixTabRowWithContour(
  tabs: ['日', '周', '月'],
  selectedTabIndex: index,
  onTabSelected: (i) => setState(() => index = i),
)

MiuixTabRowColors

标签栏颜色配置(@immutable)。提供 background(bool)content(bool) 便捷方法。

参数类型默认值说明
backgroundColorColor必填未选中背景色
contentColorColor必填未选中内容色
selectedBackgroundColorColor必填选中背景色
selectedContentColorColor必填选中内容色

MiuixTabRowDefaults

标签栏默认值(私有构造)。

常量说明
tabRowHeight42TabRow 高度
tabRowWithContourHeight45带轮廓版高度
tabRowCornerRadius12TabRow 圆角
tabRowWithContourCornerRadius8带轮廓版圆角
tabRowMinWidth76TabRow 最小标签宽
tabRowWithContourMinWidth62带轮廓版最小标签宽
tabRowMaxWidth98TabRow 最大标签宽
tabRowWithContourMaxWidth84带轮廓版最大标签宽
tabRowItemSpacing9TabRow 项目间距
contourItemSpacing5带轮廓版项目间距
contourPadding5带轮廓版内边距
itemHorizontalPadding12标签水平内边距
borderWidth1描边宽度

静态方法 defaultColors(BuildContext) → MiuixTabRowColors:从当前主题创建默认颜色。

MiuixBreadcrumbBar

横向面包屑导航栏。内容溢出时横向滚动;highlightIndex 为负数时同时关闭高亮和自动居中。

参数类型默认值说明
keyKey?Widget key
itemsList<MiuixBreadcrumbItem>必填面包屑段列表
onItemClickValueChanged<int>必填点击某段的回调
highlightIndexint?null高亮索引;null 表示最后一项,负数表示禁用高亮
enabledbooltrue是否启用
colorsMiuixBreadcrumbBarColors?null颜色配置,缺省取主题默认
insideMarginEdgeInsetsMiuixBreadcrumbBarDefaults.insideMargin (水平12/垂直8)内边距
itemMaxWidthdoubleMiuixBreadcrumbBarDefaults.itemMaxWidth (160)单段最大宽度
scrollControllerScrollController?null横向滚动控制器

示例:

dart
MiuixBreadcrumbBar(
  items: [
    MiuixBreadcrumbItem(path: 'root', text: '根目录'),
    MiuixBreadcrumbItem(path: 'docs'),
  ],
  onItemClick: (i) {},
)

MiuixBreadcrumbItem

单个路径段(@immutable)。

参数类型默认值说明
pathString必填用于重建完整路径的路径段
textString?null显示文本;为 null 时显示 path

MiuixBreadcrumbItemsPath

List<MiuixBreadcrumbItem> 的扩展。用分隔符拼接所有路径段的 path 字段,便于重建完整路径。

方法签名返回说明
joinToPath({String separator = '/'})Stringseparator 拼接所有 item 的 path 字段

示例:

dart
final items = [
  MiuixBreadcrumbItem(path: 'home'),
  MiuixBreadcrumbItem(path: 'docs'),
  MiuixBreadcrumbItem(path: 'api'),
];
final full = items.joinToPath(); // 'home/docs/api'

MiuixBreadcrumbBarColors

面包屑颜色配置(@immutable)。

参数类型默认值说明
colorColor必填普通段前景色
highlightColorColor必填高亮段前景色
disabledColorColor必填禁用前景色
separatorColorColor必填分隔箭头色
backgroundColorColor必填普通段背景色
highlightBackgroundColorColor必填高亮段背景色
disabledBackgroundColorColor必填禁用背景色

MiuixBreadcrumbBarDefaults

面包屑默认值(私有构造)。

常量说明
insideMarginEdgeInsets(水平12, 垂直8)内边距
itemHeight32段高度
itemHorizontalPadding10段水平内边距
itemMaxWidth160段最大宽度

静态方法 defaultColors(BuildContext) → MiuixBreadcrumbBarColors:从当前主题构造默认颜色。

MiuixVerticalScrollBar

竖向滚动条。支持悬停/拖拽高亮与自动淡出。

参数类型默认值说明
keyKey?Widget key
adapterMiuixScrollBarAdapter必填绑定的滚动适配器
reverseLayoutboolfalse是否反向布局
trackPaddingEdgeInsetsEdgeInsets.zero轨道内边距
colorsMiuixScrollBarColorsMiuixScrollBarDefaults.colors颜色配置
thumbWidthdoubleMiuixScrollBarDefaults.thumbWidth (3.64)滑块宽度
cornerRadiusdouble?null圆角;为 null 时取 thumbWidth/2
thumbMinLengthdoubleMiuixScrollBarDefaults.thumbMinLength (36)滑块最小长度
endPaddingdoubleMiuixScrollBarDefaults.endPadding (3.46)末端内边距

示例:

dart
final controller = ScrollController();
Stack(children: [
  ListView(controller: controller, children: [/* ... */]),
  Positioned(right: 0, top: 0, bottom: 0,
    child: MiuixVerticalScrollBar(adapter: MiuixScrollBarAdapter(controller))),
])

MiuixHorizontalScrollBar

横向滚动条。参数与 MiuixVerticalScrollBar 相同。

参数类型默认值说明
keyKey?Widget key
adapterMiuixScrollBarAdapter必填绑定的滚动适配器
reverseLayoutboolfalse是否反向布局
trackPaddingEdgeInsetsEdgeInsets.zero轨道内边距
colorsMiuixScrollBarColorsMiuixScrollBarDefaults.colors颜色配置
thumbWidthdoubleMiuixScrollBarDefaults.thumbWidth (3.64)滑块宽度
cornerRadiusdouble?null圆角;为 null 时取 thumbWidth/2
thumbMinLengthdoubleMiuixScrollBarDefaults.thumbMinLength (36)滑块最小长度
endPaddingdoubleMiuixScrollBarDefaults.endPadding (3.46)末端内边距

MiuixScrollBarAdapter

统一适配 Flutter ScrollController。

参数类型默认值说明
controllerScrollController必填(位置参数)被适配的滚动控制器

主要成员:scrollOffsetviewportSizecontentSizemaxScrollOffsetscrollTo(double)(立即滚动到指定内容偏移,夹在有效范围内)。

MiuixScrollBarColors

滚动条颜色;null 表示未设置(@immutable)。

参数类型默认值说明
thumbColorColor?null滑块颜色
trackColorColor?null轨道颜色

MiuixScrollBarDefaults

滚动条默认值(私有构造)。

常量说明
thumbWidth3.64滑块宽度
endPadding3.46末端内边距
thumbMinLength36滑块最小长度
fadeDelayMillis1000淡出延迟(毫秒)
fadeDurationMillis500淡出时长(毫秒)
touchTargetWidth48触摸目标宽度
dragThumbWidth6拖拽时滑块宽度
thumbAlpha0.1默认滑块透明度
dragThumbAlpha0.3拖拽时滑块透明度
dragAnimationDurationMillis150拖拽高亮动画时长(毫秒)
colorsMiuixScrollBarColors()默认颜色(全 null)

静态方法 defaultColors(BuildContext) → MiuixScrollBarColors:返回默认 colors。

Released under the Apache-2.0 License.