序
基于安卓平台的消息弹性框架组件Snackbar-OHOS(https://github.com/MrEngineer13/SnackBar)实现了鸿蒙系统迁移和重构。代码已向(https://gitee.com/isrc _ ohos/SnackBar _ ohos)开放。欢迎下载使用，并给出宝贵意见！
背景
SnackBar-ohos和ToastDialog是目前最流行的消息显示组件。ToastDialog是一个转瞬即逝的消息显示框，不需要焦点，用户也无法与消息交互。SnackBar-ohos是一个全新的消息显示控件。与ToastDialog相比，SnackBar-ohos支持用户与消息的交互，方便用户进一步确认消息，提升操作体验。
组件效果显示
SnackBar-ohos组件通过弹出消息弹出来显示特定的消息，消息弹出会在指定的时间间隔后自动淡出，效果如图1所示。如果消息弹出框需要在自动淡出前消失，根据对话框中的提示点击“点击”按钮关闭，效果如图2所示。
图1 snack bar-OHOS消息框自动消失的效果
图2 snackbar-OHOS消息框点击消失的效果
示例解析
组件相对简单，没有复杂的跳转页面，只显示一个主界面。Sample部分负责主界面的显示布局，通过触发主界面上的提示按钮来显示消息弹出框。下面将详细解释SnackBar-ohos组件的使用，分为五个步骤：
第一步。导入SnackBar类并声明对象。
第二步。创建整体显示布局
第三步。向主界面按钮添加点击事件。
第四步。为消息弹出框的按钮设置消息监视器。
第五步。实例化SnackBar类对象并显示组件。
(1)导入SnackBar类并声明对象。
在MainAbility中导入SnackBar类并声明对象。
//导入SnackBar类
import.com . github . mrengineer 13 . snack bar . snack bar；
//声明对象
mSnackBar私有SnackBar mSnackBar(2)创建整体显示布局。
这个组件只有一个主界面，包含一个按钮和一个文本。按钮用于触发SnackBar-ohos组件的显示，文本用于显示按钮的功能。主界面用XML绘制，用setUIContent()方法显示。
super . setuicontent(resource table。布局_活动_小吃_酒吧)；(3)向主界面按钮添加点击事件
该步骤在主界面的按钮上添加一个点击事件，以触发消息弹出框的显示。
//设置按钮的收听事件
btn.setClickedListener(新组件。单击列表器(){ 0
@覆盖
公共空隙点击(组件组件){ 0
.//点击后，出现组件的消息弹出框。
}
});(4)为消息弹出框的按钮设置消息监控。
SnackBar_ohos组件的消息弹出框显示后，会有自己的按钮，用户点击按钮后消息弹出框会消失。为此按钮设置消息监控。当按钮被点击的消息被监控时，ToastDialog的消息出现在主界面，如图2所示。
//为消息弹出框上的按钮创建消息监视器。
com . github . mrengineer 13 . snackbar . snackbar . onmessageclicklistener messageClickListener=this；
.
@覆盖
公共void onMessageClick(顺序令牌){ 0
//点击按钮，界面下方会显示ToastDialog的消息。
ToastDialog ToastDialog=new to astdialog(this)；
toastDialog.setText('按钮已单击！');//设置提示文本
toastdialog . set alignment(layout alignment。底部)；//设置到标准对话框项目符号框位置
toastdialog . show()；//显示给标准对话框项目符号框
}(5)实例化SnackBar类对象并显示组件。
实例化SnackBar，并使用构造函数模式来设置组件的样式和显示。在下面的代码中，能力是指m。
ainAbility，component1是指主页面所在的布局。各接口的功能已在代码注释中详细给出，接口的具体实现将在Library解析一节给出，此处不再赘述。mSnackBar = new SnackBar.Builder(ability,component1) .withOnClickListener(messageClickListener) // 设置消息弹框上按钮的消息监听 .withMessage(message) // 设置消息弹框上的文本信息 .withActionMessage(btnMessage) // 设置消息弹框上按钮的文本信息 .withStyle(Color.GREEN.getValue()) // 设置消息弹框上文本信息的颜色 .withBackgroundColorId(Color.RED.getValue())// 设置消息弹框的背景颜色 .withDuration(duration) // 设置消息弹框显示时间 .show(); //设置消息弹框显示Library解析
Library向开发者提供SnackBar-ohos组件的创建、初始化、设置监听和显示的具体执行方法，通过调用上述方法可以实现SnackBar_ohos消息弹框的正常显示。此外，消息弹框属性是可以自定义的，如文本信息、点击事件颜色等。本节将围绕消息弹框的创建原理及消息弹框属性自定义的原理展开讲解。
在正式开始介绍之前，先为大家展示一下Library目录结构，如图3所示。和消息弹框的创建及属性自定义功能相关的类有三个，分别是Snack、SnackBar和SnackContainer类，其中，SnackBar是最主要的功能实现类，Snack和SnackContainer类均会在SnackBar类中被调用。
图3 Library目录结构
（1）Builder()方法创建消息弹框
在创建SnackBar类实例对象后，需要使用Builder()方法创建消息弹框，后续才可以设置消息弹框的自定义属性。其中，Builder()方法中的函数调用关系可以参考图4。
图4 Builder()方法关系调用示意图
在Builder()方法中，主要调用的是SnackBar类的构造方法，将Ability和Component作为参数传入到上述构造方法中；
public Builder(Ability ability,Component component) { mContext = ability.getApplicationContext();//设置本应用Context mSnackBar = new SnackBar(ability,component);//调用构造方法 }在SnackBar类的构造方法中，首先获取了主页布局的父布局作为ComponentContainer ，后将SnackContainer的布局和消息弹框的布局Layout_sb__snack添加到ComponentContainer 中，消息弹框创建完毕。
public SnackBar(Ability ability,Component component) { Context context = ability.getContext(); //实例化LayoutScatter用于转换xml得到Component对象 LayoutScatter scatter = LayoutScatter.getInstance(context); //获取整个主界面的父布局得到ComponentContainer 对象 ComponentContainer container = (ComponentContainer) component.getComponentParent(); //将SnackContainer的布局放入ComponentContainer中 scatter.parse(ResourceTable.Layout_sb__snack_container,container,true); //将消息弹框的布局放入ComponentContainer中 Component v = scatter.parse(ResourceTable.Layout_sb__snack,container,false); init(container, v);//调用初始化方法 }SnackBar类的构造方法中又调用了初始化方法init()，初始化操作主要负责对组消息弹框上的按钮设置点击事件，点击按钮后消息弹框消失。
private void init(ComponentContainer container, Component v) {//初始化 mSnackContainer = (SnackContainer) //创建布局容器 container.findComponentById(ResourceTable.Id_snackContainer); if (mSnackContainer == null) {//判断布局容器是否成功创建 mSnackContainer = new SnackContainer(container);//若未成功则重新创建 } mParentView = v; Text snackBtn = (Text) v.findComponentById(ResourceTable.Id_snackButton); snackBtn.setClickedListener(mButtonListener);//为消息弹框设置点击事件 } private final Component.ClickedListener mButtonListener = new Component.ClickedListener() {//消息弹框点击事件 @Override public void onClick(Component component) {//设置onClick()点击事件 if (mClickListener != null && mSnackContainer.isShowing()) {//如果被点击 //需要调用omMessageClick()方法 mClickListener.onMessageClick(mSnackContainer.peek().mToken); } mSnackContainer.hide();//消息弹框隐藏消失 } };（2）SnackBar_ohos消息弹框属性设置
消息弹框被创建好后，可以调用接口实现个性化定义，能够自定义的属性有以下几种：
withOnClickListener：消息弹框点击效果。在SnackBar_ohos消息弹框显示后，其点击事件是可以被自定义的，通过SnackBar类自带的OnMessageClickListener接口，重写onMessageClick()方法，将点击后要执行的行为写到此方法中。withMessage：消息弹框中显示的文字提示内容。参数形式是String类型字符串。withActionMessage：消息弹框点击事件的文字显示内容。参数形式同样也是String类型字符串。withStyle：消息弹框点击事件的文字颜色。参数是通过Color颜色类中的颜色，并使用getValue()方法获取到的颜色值。withBackgroundColorId：消息弹框背景颜色。参数与上一条withStyle获取方法同理。withDuration：消息弹框出现停留的时间间隔。参数是short类型的数值，单位是毫秒。withTypeFace；显示文字的字体。参数是Font字体类的值，可以选择加粗、下划线等。（3）show()方法显示
在设置好SnackBar_ohos消息弹框中所有想要自定义的属性之后，就可以设置消息弹框的显示了，这是通过调用show()方法实现的。该方法涉及到的类是图3中的Snack类，其原理是先实例化一个Snack类对象，用来设置展示信息，包括上述介绍过的消息弹框属性；再调用SnackBar类的showMessage()方法，将设置好的展示信息作为入参，即可得到预期的显示效果。
Snack message = new Snack(mMessage,//设置展示信息 (mActionMessage != null ? mActionMessage.toUpperCase() : null), mActionIcon, mToken, mDuration,//时间间隔 mTextColor != 100 ? mTextColor : Color.WHITE.getValue(),//字体颜色 //背景颜色 mBackgroundColor != 100 ? mBackgroundColor : Color.WHITE.getValue(), mHeight != 0 ? mHeight : 0, mTypeFace);//字体 if (mClear) { mSnackBar.clear(mAnimateClear); } mSnackBar.showMessage(message);//将设置好的信息message显示出来 return mSnackBar;项目贡献人
sdddm 等待的冬瓜 简单的小蚂蚁 bzdwk zjdyl