mx_widget library

Classes

BasePainter
ColorPainter
CustomLayoutOption
DatePickerParams
DatePickerQuery
DotSwiperPaginationBuilder
DropPainter
FontFamily
FractionPaginationBuilder
MultipleOptionsQuery
MultiplePickerParams
MXActionSheet
MXActionSheetListModel
MXActionSheetListModelByGrid
MXAuthCode
MXAuthCodeController
MXAuthCodeState
MXAvatar
----------------------------------------------------------------------头像组件 text 文字头像的内容 icon icon头像展示的icon onTap 头像的点击事件 radius 头像自定义圆角,如果有优先取这个 iconSize 自定义icon大小,如果有优先取这个 modeEnum 头像类型icon/img/text/imgList sizeEnum 头像大小lager/medium/small textStyle 文字头像的文字自定义样式,如果有优先取这个 shapeEnum 头像新增circle/square avatarSize 自定义头像大小 avatarNetUrl 头像在线地址 avatarsPadding 头像组头像之间的间隔 avatarAssetsUrl 头像本地地址 avatarNetUrlList 头像组各个头像展示的图片网络链接 avatarsBorderWidth 头像组头像的外边框宽度 avatarAppendixText 头像组最后一头像展示的文字内容 avatarAssetsUrlList 头像组各个头像展示的图片本地链接 avatarAppendixCallback 头像组最后一头像是否拥有点击事件
MXBadge
-----------------------------------------------------------------------徽标组件 badgeCount 微标显示的数字 text 微标显示的内容文字 一般用于文字样式或者角标样式 typeEnum 微标样式 point/text/square/cornerMark/红点/文字样式/正方形形/角标 sizeEnum 微标大小 large/small/大/小 radiusEnum 微标圆角大小 large/small/大/小 badgeColor 微标颜色 trapezoidX 角标梯形横轴坐标 trapezoidY 角标梯形竖轴坐标
MXBottomNavBar
MXBottomNavBarIconConfig
MXBottomNavBarIconTextConfig
MXBottomNavBarItemBadgeConfig
MXBottomNavBarItemConfig
mxBottomNavBarIconConfig navBar的类型为纯icon,则每个navBarItem的配置 mxBottomNavBarTextConfig navBar的类型为纯文字,则每个navBarItem的配置 mxBottomNavBarIconTextConfig navBar的类型为icon+文字,则每个navBarItem的配置 mxBottomNavBarItemBadgeConfig 底部每个navBarItem的飘新配置
MXBottomNavBarTextConfig
MXButton
------------------------------------------------------------------按钮组件 text 文字内容 themeEnum 按钮主题色 品牌色/错误色/警告色/成功色 afterClickButtonCallback 点击按钮执行的回调方法 afterOnLonePressButtonCallback 长按按钮执行的回调方法 slot 按钮的插槽类型为Weight 当设置插槽后无法再继续设置默认icon与自定义icon组件 icon 使用组件自带的icon组件 disabled 按钮是否处于禁用状态 customIconWidget 自定义icon组件 typeEnum 按钮的类型 填充/文字/外框线 shape 椭圆/矩形带圆角/圆形 sizeEnum 按钮的尺寸 大/中/小/迷你 loading 按钮的loading状态
MXCalendar
MXCalendarController
日历组件的控制器 typeEnum 选择的类型 single/multiple/range defaultValue 默认需要选中的值 single下为DateTime/multiple下为List<DateTime> range 下为 MXCalendarValueByRange minDate 开始时间 如果携带具体日期如'2021,1,15' 则15日包括(15日)之前的日期无法选择 maxDate 结束时间 如果携带具体日期如'2021,12,18' 则18日包括(18日)之后的日期无法选择 dayBuilder 自定义单个日期渲染内容 disableds 无法选择的日期数组 weaknessColor 只有当选择类型为range 时生效,被选中之间的日期盒子背景颜色 aweakColor 被选中的日期盒子背景颜色 onSelect 日期被选择时
MXCalendarTime
MXCalendarValueByRange
MXCascaderController
-----------------------------------------------------------Cascader 级联选择器 用于多层级数据选择,主要为树形结构,可展示更多的数据。 options 树形结构的数据 onChange 值发生变更时触发 onClose 关闭抽屉时触发 onPick 单个选项被选中时触发
MXCascaderOptions
MXCell
MXCellGroup
MXCellModel
MXCheckBox
--------------------------------------------------------------------单选框组件 title 主要文字内容 desSub 描述文字内容,布局在主文字下方 iconSpace icon与内容的间距 iconBuilder 自定义icon的weiget构建方法 backgroundColor 单选框的背景颜色 iconSize icon的大小默认为22 disabled 按钮是否处于禁用状态 contentBuilder 自定义内容的weiget构建方法 checked 初始化时的选中状态 disabled 单选框是否可以使用 showDivide 是否在下方渲染分割线 titleMaxLine 主要文字的渲染行数,超过则显示省略号 desSubMaxLine 次要文字的渲染行数,超过则显示省略号 onCheckBoxValueChange 当选中状态发生变更时的回调函数 sizeEnum 单选框的大小 lager/medium modeEnum 单选框的模式 circle/square/card directionEnum 单选框的排列方式,left/right
MXCheckBoxSeries
MXCheckBoxSeriesController
MXCheckBoxSeriesState
MXCircleLoading
MXCollapse
------------------------------------------------------------------折叠面板组件 padding 容器的内边距 默认为16 customColor 面板的颜色 controller 面板控制器,可获取展开面板的值与通过控制器打开/关闭指定的面板 collapseIcon 右侧展开状态的icon图标 noCollapseIcon 右侧非展开状态的icon图标
MXCollapsePannerController
-----------------------------------------------------------折叠面板组件的控制器 initValue 初始化需要展开的值 isOnlyOne 折叠面板是否只有一个能展开 collapseItemList 折叠面板组的单个折叠面板 onChange 折叠面板暂开或关闭的回调事件
MXCollapsePannerModel
-------------------------------------------------------单个折叠面板组件的数据模型 id 折叠面板的id collapseNotice 右侧折叠面板展开的提醒文字 noCollapseNotice 右侧折叠面板收起的提醒文字 title 折叠面板的文字 child 折叠面板展开的内容 mxCollapsePlacementEnum 折叠面板展开的内容排列方式top/bottom
MXCollapseState
MXCountDown
-------------------------------------------------------------------倒计时组件 autoStare 是否自动开始倒计时 controller 用于控制倒计时,暂停或者恢复倒计时 backgroundColor 自定义的背景颜色只有当shape不为plain才成立 useUnit 是否开启中文单位替换默认的: size 倒计时大小 mini/medium/lager shape 倒计时样式 rect/cirl/plain format 倒计时的格式单位 ddhhmmss/ddhhmmsss/hhmmss/hhmmsss 最后携带sss将开启毫秒渲染 complatedWidget 自定义结束内容
MXCountDownController
MXCountDownState
MXDialog
----------------------------------------------------------------------弹窗组件
MXDivideLine
---------------------------------------------------------------------分割线组件 text 分割线显示的内容 color 分割线的颜色 margin 分割线的外边距,默认为左右各8物理像素 width 分割线的容器宽度,当为竖型时为单条竖线的宽度 height 分割线的线条高度 widget 自定义展示的内容,替换默认的文字组件 padding 分割线内容的左右内边距,默认为左右16的物理像素 useTextDivide 是否启用文字分割,隐藏线条,默认为false alignment 分割线排列方式 左/中/右
MXDrawer
MXDrawerModel
MXDrawerOptionsModel
MXDropDownMenu
MXExpendAbleText
------------------------------------------------------------文字多行自动收起组件
MXFabButtonController
----------------------------------------------------------------悬浮按钮控制器 用来显示及隐藏当前页面的悬浮按钮 context 上下文 state 类型overlayState model button按钮的模型层 immediatelyRender 是否立即渲染,注意⚠️如果是在initState方法中使用会报错。
MXFabButtonCustomPosition
MXFabButtonModel
MXFontStyle
MXForm
---------------------------------------------------------------------表单控件 用以收集、校验和提交数据,一般由输入框、单选框、复选框、选择器等控件组成。
MXFormController
MXFormItem
MXFormItemModel
MXFormRule
MXFormRuleResult
MXFormState
MXGrid
-----------------------------------------------------------------gird宫格组件 column 一行展示几个item的数量,当为0时item的大小为固定大小同时容器出现滚动条 useBorder item是否开启border theme norma与card 圆角 size 每个item的大小 itemList 需要渲染的item的列表 space 间距 竖轴与横轴之间的间距默认为0 gridItemAxis item的排列方式默认是垂直布局 mxGirdItemClickCallback item的点击事件
MXGridItemModel
MXIcon
---------------------------------------------------------------------icon组件 iconSizeEnum /// icon大小 iconColor /// 颜色 action icon的点击事件 icon icon图标 disabled icon点击是否禁用 iconFontSize icon图标的自定义大小
MXImage
----------------------------------------------------------------------图片组件 width 图片宽度 height 图片高度 color 图片背景颜色 netUrl 网络图片地址 file 文件格式的图片 assetsUrl 本地图片地址 errorWidget 图片加载错误的组件 loadingWidget 图片加载中的组件默认存在骨架屏 customRadius 图片自定义圆角只在roundSquare生效 modeEnum 图片展示的模式cut(裁切模式,图片大小超出容器大小只展示容器大小部分)/ cover(调整图片内容的大小以覆盖其容器)/circle(圆形图片fit依然是cover) fitWidth(根据图片宽度自适应高度) fitHeight(根据图片高度自适应宽度)/roundSquare(圆角图片)
MXIndexes
MXIndexesController
MXIndexesModel<T>
MXInput
--------------------input组件用于输入小段文字,如果需要输入长文本需改换成textarea组件 labelText 输入框左侧的文字内容 rightWidget 输入框右侧可以插入widget useRequire 是否使用提示符,提醒需要输入 description 输入框下方的提示内容文字 descriptionColor 提示内容文字的颜色 formatEnum 限制input输入框的格式,暂时支持数字 sizeEnum 输入框的大小 typeEnum 输入框的样式类型 disabled input是否禁用(只读) maxLength 最大可以输入的字符上限 obscureText 如果是密码输入框时使用。 autofocus 是否自动聚焦 textStyle 输入框文字的样式 focusNode 是否是聚焦元素节点 textAlign 输入框文字的排列方式 cursorColor 游标的颜色 placeholder 输入框内部无内容时的展位文字 keyboardType 限制输入的类型 inputBackgroundColor 输入框的背景颜色 placeholderStyle 占位内容文字的颜色 decoration 自定义输入框样式如存在,优先使用 onChange control内内容改变时的回调方法 onEditingComplete 如设置后如果点击键盘的下一个则会取消下个聚焦的focusNode元素并且会执行相应的回调函数 controller input的controller用于获取input中的内容或者对input内容进行操作 onSubmitted 当点击键盘确认按钮触发的方法并且携带input内容作为形参传入 contentPadding input内内容的边距 inputFormatters input输入框的验证方式例如下面只能输入英文且不能超过六个字符。 FilteringTextInputFormatter.allow(RegExp('a-zA-Z')),
MXMessage
MXMessageModel
title 标题 icon icon图标 useClose 是否显示关闭icon link 按钮文字 useScroll 是否开启滚动 onClose 当关闭时的回调事件 onButtonClick 存在button按钮时的按钮点击事件
MXNavBar
-------------------------------------------------------------------navBar组件 barLeftItems navBar 左侧的iconlist barRightItems navBar 右侧的iconlist titleWidget navBar 文字的组件优先于text titleContent navBar 标题内容 titleColor 标题颜色 titleWeight navBar 标题字重/默认为FontWeight.w500 useTitleCenter navBar 的tittle 是否居中展示 backgroundColor navBar 的背景颜色默认为白色 navBarHeight navBar 的高度默认44 useDefaultBack navBar 是否开启默认的点击返回 将渲染返回icon按钮 onHandleBack 返回的事件 navBarChild navBar下方的渲染插槽
MXNoticeBar
MXOptionsQuery
MXPagetransform
-----------------------------------------------------------------轮播图特殊样式 需要设置swiper的viewportFraction值根据情况设置,0-1 1不生效 margin 轮播图图片之间的间距如果需要生效 fade 轮播图除当前轮播的图片之外产生透明效果 scale 轮播图除当前轮播的图片之外产生缩放效果
MXPickers
MXPopover
MXPopoverModel
MXPopScope
--------------------------------------------------------------左滑两次退出组件 child 当前组件包裹的child部件类型为scaffold,其它不生效。 customConfrim 自定义成功的回调方法 customText 自定义提示内容 duration 下一次滑动的有效时间范围
MXPopUp
MXProgress
MXProgressController
MXProgressState
MXRadio
MXRadioSeries
MXRadioSeriesState
MXRate
-------------------------------------------------------------------rate评分组件 用于对某行为/事物进行打分。 initValue 初始化的值 useHalf 是否开启半分评价 count 评分总数/默认总分为5分 space 评分之间的间距/默认间距为8 size 评分大小/默认24 onchange 改变值时的回调函数 customSelectColor 自定义选中后的颜色 customUnSelectColor 自定义未选中的颜色 customUnselectIcon 自定义未选中的icon图标 customSelectIcon 自定义选中的icon图标
MXResult
MXSearchBar
------------------------------------------------------------searchBar搜索组件 backgroundColor 背景颜色 controller TextEditingController 控制器用于获取输入框的值 placeholder 占位符文字 height 输入框高度 disabled 输入框的禁用状态 autofocus 是否自动对焦 useDefaultBack 是否启用默认的返回事件 searchBarLeftIcon 输入框外部的icon searchBarRightIconList 输入框外部右侧的icon列表 inputLeftIcon 输入框内部的左侧icon 默认是search样式 inputRightIcon 输入框内部右侧的icon inputRightWidget 输入框内部右侧的自定义部件与icon冲突 themeEnum rect与round onChange输入框的内容改变的时候 onEditingComplete 当点击键盘确认的事件 onSubmitted 当点击键盘确认的事件这个会阻止下一个foucsNode的聚焦事件 maxLength 输入框最大可以输入的内容 focusNode 用于缓冲input输入框的节点,方便聚焦与失焦
MXSelectTag
MXSideBar
MXSideBarController
MXSideBarItemModel
MXSideBarState
MXSkeleton
当开启百分比后固定宽度失效,反之亦然。 当开启百分比后请如父组件为row/column,请使用Flexible容器包裹该组件,固定宽度不需要该操作 percentageWidth 是否开启百分比宽度默认为0为关闭 最大为1代表100% .3为30% width 骨架屏宽度 height 骨架屏高度必填 useAnimation 是否开启动画效果 默认打开 duration 动画持续时间,默认为1秒 curve 动画执行的贝塞尔曲线效果,默认为easeInOutSine useCircle 是否使用圆形形状 开启时推荐使用固定宽度使用百分比宽度会导致椭圆形状
MXStepper
-----------------------------------------------------------------数字步骤计数器 disabled 禁用步骤器 initValue 初始化的value stepperSizeEnum 步骤器的大小 stepperThemeEnum 步骤器的样式 controller 文本控制器用于获取步骤器的值 max 最大值 step 每次递增的值默认为1 min 最小值 onChangeCallback 改变时的回调方法 inputWidth 用于单独设置input框的宽度
MXSteps
MXStepsController
MXStepsItemModel
MXStepsState
MXSwiperCell
MXSwiperControllBar
-------------------------------------------------------------------轮播图指示器 margin 指示器的外边距 alignment 指示器的位置类型为Alignment builder 指示器的样式圆点/矩形/数字分别为MXSwiperPointControllerBar/ MXSwiperNumberControllerBar
MXSwiperNumberControllerBar
MXSwiperPointControllerBar
MXSwitch
----------------------------------------------------------------switch开关控件 isOn 是否打开 disabled 是否禁用 offColor 关闭时后呈现的颜色 activityColor 开启后呈现的颜色 sizeEnum switch的大小 modeEnum switch的样式fill/icon/text onChange 状态改变后的回调函数
MXTab
MXTabBar
MXTabBarVerticalView
MXTabBarView
MXTag
MXText
----------------------------------------------------------------------文字组件 使用该组件能让中文在android机中强制居中
MXTextArea
MXTheme
MXThemeConfig
MXToast
MXToastBody
MXUploadAbstractHooks
MXUploadImg
MXUploadImgController
NonePainter
OpacityTransformBuilder
OptionsPickerParams
PageIndicator
RadioCorner
RadioCornerIcon
RectSwiperPaginationBuilder
RotateTransformBuilder
ScaleAndFadeTransformer
ScalePainter
ScaleTransformBuilder
SlidePainter
Swiper
SwiperCellHandleController
SwiperControl
SwiperController
SwiperCustomPagination
SwiperPagination
SwiperPlugin
plugin to display swiper components
SwiperPluginConfig
SwiperPluginView
TDNoneIndicator
TDesign不展示下标
TDTabBarIndicator
TDesign自定义下标
TDTabBarVerticalIndicator
TDesign自定义下标 竖向
TextConfiguration
TextPaddingConfig
算法来自TDesign Flutter 通过Padding自定义Text居中算法
TransformBuilder<T>
TranslateTransformBuilder
trapezoidClip
UseMXCalendarByPopup
WarmPainter

Enums

DatePickerFormatType
DatePickerListUnitEnum
MultipleOptionsPropertyEnum
MXActionSheetListType
actionsheet options的类型
MXActionSheetTypeEnum
actionSheet组件
MXAvatarModeEnum
头像的模式
MXAvatarShapeEnum
头像展示的类型
MXAvatarSizeEnum
头像的大小
MXBadgeRadiusEnum
微标的圆角度数
MXBadgeSizeEnum
微标的大小
MXBadgeTypeEnum
MXBottomNavBarItemTypeEnum
MXBottomNavBarShapeEnum
MXBottomNavBarTypeEnum
bottomNavBar
MXButtonShapeEnum
按钮的形状枚举
MXButtonSizeEnum
按钮的尺寸大小的枚举
MXButtonStatusEnum
按钮的状态正常形态/按下/禁用
MXButtonThemeEnum
按钮的风格枚举
MXButtonTypeEnum
按钮的类型枚举
MXCalendarTypeEnum
日历组件
MXCellAlign
MXCellGroupType
cell 组件
MXCellType
MXCheckBoxDirectionEnum
checkBox的方向
MXCheckBoxModeEnum
checkBox的模式
MXCheckBoxSizeEnum
checkBox的大小类型
MXCollapsePlacementEnum
collapse 的排列位置
MXCountDownFormatEnum
countDown组件
MXCountDownShapeEnum
MXCountDownSizeEnum
MXDialogCustomWidgetDirectionEnum
MXDialogFooterDirectionEnum
dialog 按钮的排列方式
MXDivideAlignmentEnum
MXDrawerOptionItemPlacementEnum
drawer 抽屉菜单的
MXDrawerPlacementEnum
drawer 方向
MXDropDownMenuItemColumnsEnum
MXDropDownMenuOptionsEnum
下拉菜单的单个菜单item属性 value 对应id label 对应标题
MXFabButtonAligimentEnum
fab组件
MXFormAlign
form组件
MXFormPositionAlign
MXFormTypeEnum
MXGirdSizeEnum
gird 每个item的大小 minimedium 中等 large
MXGirdThemeEnum
gird 宫格组件 norma 一般 card 卡片
MXIconSizeEnum
icon组件的大小枚举
MXImageModeEnum
图片的模式
MXInputFormatEnum
MXInputSizeEnum
MXInputTypeEnum
MXLinkSizeEnum
link大小枚举
MXLinkThemeEnum
link theme类型
MXMessageTypeEnum
message的样式类型枚举
MXNoticeBarScrollDirectionEnum
noticeBar 跑马灯方向
MXNoticeThemeEnum
MXPopoverPositionEnum
popover组件
MXPopUpShowTypeEnum
popup 的出现方式类型
MXProgressThemeEnum
progress进度条组件
MXProgressTypeEnum
MXResultTypeEnum
result 结果页
MXSearchBarThemeEnum
searchBar 的样式
MXSideBarTypeEnum
sideBar组件
MXStepperSizeEnum
stepper步骤器组件
MXStepperThemeEnum
MXStepsTypeEnum
steps组件
MXSwitchModeEnum
MXSwitchSizeEnum
switch组件
MXTabBarOutlineTypeEnum
tabbar样式
MXTabSizeEnum
单个tab的大小枚举 大/小
MXTagModeEnum
tag组件
MXTagshapeEnum
tag形状
MXTagSizeEnum
tag大小
MXTagThemeEnum
tag主题
MXTextAreaAlignmentEnum
排列方式
MXTextAreaSizeEnum
MXTextAreaTypeEnum
textArea组件
MXToastDirectionEnum
MXUploadImgType
上传组件
OptionsPropertyEnum
PageIndicatorLayout
SwiperLayout

Extensions

MXColors on MXThemeConfig
MXFontFamily on MXThemeConfig
MXFonts on MXThemeConfig
MXRadius on MXThemeConfig
圆角规范
MXShadow on MXThemeConfig
阴影样式规范
MXSpaces on MXThemeConfig
widget与widget的间隔规范

Constants

horizontalPadding → const double
kDefaultAutoplayDelayMs → const int
default auto play delay
kDefaultAutoplayTransactionDuration → const int
Default auto play transition duration (in millisecond)
kMaxValue → const int
kMiddleValue → const int
weekMap → const Map<int, String>

Properties

isCustomStyle bool
getter/setter pair
mxEventCenter → EventCenter
final
mxSwiperCellFontSize double
final
mxSwiperCellPadding double
final
paddingSpace double
getter/setter pair

Typedefs

AvatarAppendixCallback = void Function()
ButtonEvent = void Function()
ContentBuilder = Widget? Function(BuildContext context, bool isCheck)
checkBox自定义内容控件
DatePickerCallback = void Function(DateTime)
datepicker组件的点击事件类型
DrawerBuild = Widget Function(BuildContext context)
DrawerOptionsClick = void Function(MXDrawerOptionsModel)
IconBuilder = Widget? Function(BuildContext context, bool isCheck)
checkBox自定义icon控件
MXActionSheetConfirm = void Function(MXActionSheetListModel model)
MXAuthCodeConfirmCallback = void Function(List<int>)
authCode 验证码回调方法
MXBottomNavOnChange = void Function(int index)
bottomNavBar组件的点击事件类型
MXCalendarOfDayBuilder = Widget Function(BuildContext context, DateTime currentTime, {bool? isActivity, bool? isDisabled, bool? isEnd, bool? isRange, bool? isStart})
MXCalendarOnChange = void Function(dynamic value)
MXCalendarOnSelect = void Function(DateTime time)
MXCascaderOnchange = void Function(String id, MXCascaderOptions? lastSelectOption)
cascader组件的回调事件方法
MXCascaderOnpick = void Function(MXCascaderOptions lastSelectOption)
MXCellOnClick = void Function(DragDownDetails details)
MXCollapseOnChange = void Function(List<String>? value)
MXCountDownOnChange = void Function(int time)
countDown组件改变的回调方法
MXCountDownOnFinish = void Function()
MXDatePickerListType = Map<DatePickerListUnitEnum, List<int>>
MXDatePickerScrollContollers = Map<DatePickerListUnitEnum, FixedExtentScrollController>
MXDialogLoadingCallback = Future<bool> Function()
dialongloading状态的回调方法
MXDropDownMenuOnChangeCallback = void Function(List<String>)
下拉菜单
MXFormItemBuilder = Widget Function(MXFormItemModel value)
MXFormRuleValidator = MXFormRuleResult Function(dynamic value)
MXGirdItemClickCallback = void Function(int index)
gird 单个item 点击事件 index 对应数组下标
MXIconAction = void Function()
icon组件的点击事件类型
MXIndexesContentItemBuilder = Widget Function<T>(T params)
MXIndexesHeaderBuilder = Widget Function(MXIndexesModel params)
MXIndexesItemClick = void Function<T>(T params)
indexes组件
MXNavBarOnBack = void Function()
navBar组件的点击事件类型
MXRateOnchange = void Function(double index)
rate 组件
MXSideBarItemBuilder = Widget Function(MXSideBarItemModel model, bool isActivity)
MXSideBarOnTabChange = void Function(int index)
MXStepperOnChangeCallback = void Function(int value)
MXStepsItemBuilder = Widget Function(bool isActivity, {required int index})
MXSwitchOnChange = void Function(bool value)
switch组件的点击事件类型
MXTagSelectOnChange = void Function(bool value)
selectTag组件的点击事件类型
OnCheckBoxValueChange = void Function(bool checkValue)
checkBox点击事件
OptionsPickerCallback = void Function(List)
optionsPicker组件的点击事件类型
SideBarPageItemBuilder = Widget Function(int index)
SwiperDataBuilder = Widget Function(BuildContext context, dynamic data, int index)
SwiperOnTap = void Function(int index)
SwiperPaginationBuilder = Widget Function(BuildContext context, SwiperPluginConfig config)