1.layoutinflater.inflate å view.inflate çåºå«
2.elementui源码学习之仿写一个el-timeline
3.聊一聊实现Vue路由组件缓存遇到的修改w修险’坑‘
layoutinflater.inflate å view.inflate çåºå«
å¹³æ¶ListViewå è½½itemä¸ï¼adapterçgetViewæ¹æ³ä¸ï¼æ们ç»å¸¸ç¨å°ï¼
LayoutInflater.from(mContext).inflate(R.layout.it,parent,false);
è¿æ ·çæ¹æ³æ¥å è½½å¸å±xml,å¹³æ¶ä¸ç´å°±æ¯è¿ä¹ç¨çï¼ä¹æ²¡ä»ä¹çé®ãä»å¤©ç½ä¸çäºä¸ªèªå®ä¹å¸å±çæºç ï¼èªå®ä¹å¸å±ä¸å è½½å¸å±xmlç¨çView.inflateæ¹æ³ï¼
public class SettingItemView extends RelativeLayout {
private CheckBox cb_status;
private TextView tv_description;
private TextView tv_title;
private String desc_on;
private String desc_off;
private void iniView(Context context) {
View.inflate(context, R.layout.setting_item_view, this);//第ä¸ä¸ªåæ°ä¼ å¸å±æ件çç¶ç±»
cb_status=(CheckBox) this.findViewById(R.id.cb_status);
tv_description=(TextView) this.findViewById(R.id.tv_description);
tv_title=(TextView) this.findViewById(R.id.tv_title);
}
第ä¸æ¬¡è§ç¨è¿ç§æ¹å¼æ¥å è½½å¸å±çï¼çäºä¸ä»çlistviewå è½½item,ä¹æ¯ç¨è¿ç§æ¹å¼ï¼
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
View view;
ViewHolder holder;
if(convertView==null){
view=View.inflate(getApplicationContext(), R.layout.list_item_callsms, null);//æåä¸ä¸ªä¼ äºnull
holder=new ViewHolder();
holder.tv_number=(TextView) view.findViewById(R.id.tv_black_number);
holder.tv_mode=(TextView) view.findViewById(R.id.tv_black_mode);
holder.iv_delete=(ImageView) view.findViewById(R.id.iv_delete);
view.setTag(holder);
好å§ï¼çä¸ä¸View.inflateç说æï¼
Open Declaration View android.view.View.inflate(Context context, int resource, ViewGroup root)
Inflate a view from an XML resource. This convenience method wraps the
LayoutInflater class, which provides a full range of options for view
inflation.
Parameters: context The Context object for your activity or
application. resource The resource ID to inflate root A view group
that will be the parent. Used to properly inflate the layout_
*parameters.
See Also: LayoutInflater
æåæä¸å¥è®©ä½ çLayoutInflaterè¿ä¸ªç±»ï¼æçå®å é¨ä¹æ¯ç¨LayoutInflaterå®ç°çï¼è¿å ¥æºç ï¼
public static View inflate(Context context, int resource, ViewGroup root) {
LayoutInflater factory = LayoutInflater.from(context);
return factory.inflate(resource, root);
}
æç¶å é¨ä¹æ¯ç¨LayoutInflaterå®ç°çï¼ä¸ç¥é为å¥androidè¿è¦ç¨View.inflatå°è£ ä¸ä¸ããão(ãââ½âã)o
å ¶ä¸LayoutInflaterçInflateçä¸ä¸ªåæ°ææ为ï¼
对äºInflateçä¸ä¸ªåæ°(int resource, ViewGroup root, boolean attachToRoot)
å¦æinflate(layoutId, null )ålayoutIdçæå¤å±çæ§ä»¶ç宽é«æ¯æ²¡æææç
å¦æinflate(layoutId, root, false ) å认为åä¸é¢æææ¯ä¸æ ·ç
å¦æinflate(layoutId, root, true ) å认为è¿æ ·çè¯layoutIdçæå¤å±æ§ä»¶ç宽é«æè½æ£å¸¸æ¾ç¤º
对è¿ä¸ä¸ªåæ°åºå«ä¸ç解çè¯å¯ä»¥çè¿ç¯æç« ï¼
inflate第ä¸ä¸ªåæ°ææ
ä»æºç è§åº¦è§£æçæé大ç¥çï¼
Android LayoutInflateråçåæï¼å¸¦ä½ ä¸æ¥æ¥æ·±å ¥äºè§£View(ä¸)
以åå¦ä¸ç¯æè§å¾ä¸éçï¼
Android LayoutInflate深度解æ ç»ä½ 带æ¥å ¨æ°ç认è¯
çå®ï¼ä½ åºè¯¥ç¥éè¿ä¸ªåæ°ææäºï¼okï¼åæ¥çä¸é¢ä»£ç ï¼ è¿æ¶å°±å¯ä»¥æ¿æ¢ä¸ºlayoutInflaterçæ¹å¼äºï¼
对äºç¬¬ä¸ä¸ªèªå®ä¹å¸å±ï¼
//View.inflate(context, R.layout.setting_item_view, this);//第ä¸ä¸ªåæ°ä¼ å¸å±æ件çç¶ç±»
LayoutInflater.from(context).inflate(R.layout.setting_item_view, this, true);//çä»·äºä¸é¢
第äºä¸ªéé å¨ä¸getViewï¼
//view=View.inflate(getApplicationContext(), R.layout.list_item_callsms, null);
view=LayoutInflater.from(getApplicationContext()).inflate(R.layout.list_item_callsms,parent,false);
elementui源码学习之仿写一个el-timeline
本文记录了仿写el-timeline组件的细节,以深入理解饿了么UI组件的源码实现机制。本系列文章将持续更新,改源深入探讨elementui源码的码风学习与实践。可访问开源仓库,采用通过npm start运行代码,什设式新亚视源码郎心如铁结合注释辅助理解。计模
时间线组件构成包括:时间线小圆点、修改w修险时间线竖线条、源码时间戳与具体内容详情四个部分。改源如图所示。码风
时间线组件主要需求包括:按时间线正序或倒序展示、采用自定义时间线小圆点样式与颜色、什设式使用小图标替代时间线小圆点、计模控制时间戳与具体内容详情的修改w修险位置、时间戳的显示与隐藏。
对官方组件的php 发货 源码见解包括:提供与注入可以简化、时间戳位置优化、简约封装参考其他库组件。Antd与iview的时间线组件参数较为精简。
回顾知识点:数组方法的使用,如this.$slots.default.reverse();以及`:style`中的四元表达式应用,如`:style="border: ${ elementIcon} ${ borderColor}"`。
组件代码示例如下:`myTimeline`、`myTimelineItem`。thinkphp 源码系统完整代码在开源仓库,欢迎访问并star。
若本文对您有所助益,期待您的star,感谢支持!
聊一聊实现Vue路由组件缓存遇到的’坑‘
项目背景介绍
在进行公司后台管理系统开发时,遇到了一个在使用keep-alive和vue-router实现的路由组件缓存不生效的问题。该项目基于iview-admin@2.0进行开发,桌面挂件 源码全局状态管理采用vuex分module实现,路由配置采用vue-router进行表方式实现。项目属于基于RBAC的后台管理系统,涉及多用户多角色的权限控制和动态系统菜单功能。
问题解决
梳理问题并核对官方文档后,发现基本用法和组件缓存原理均无误。但深入检查后发现,问题出现在keep-alive的单线macd 源码include参数设置上。iview-admin@2.0中通过路由meata参数——notCache控制组件缓存。官方文档指出,当设为true时,页面在切换标签后不会缓存,但若需要缓存,则无需设置notCache字段,并确保页面组件的name属性与路由配置的name一致。项目中路由配置由后台功能决定,修改无法缓存页面的路由配置的name即可解决。
研究iview-admin源码
研究发现,iview-admin中将navTagList、menuList等数据保存在全局vuex的app模块中,navTagList动态更新当前打开的标签页,menuList根据路由记录的meta参数的access字段过滤。cacheList作为getters,计算出需要keep-alive缓存的组件name数组。通过动态修改keep-alive组件的exclude值来更新路由缓存规则。
iview-admin的局限性
iview-admin的权限路由控制采用路由meta参数的access数组来标记路由可访问的用户角色,根据路由记录计算用户菜单。这种实现存在不足,需要优化。
优化方案
对iview-admin的权限控制和路由配置进行优化,将路由分为基础路由和业务路由。基础路由直接配置到router中,业务路由动态注册。在vuex的user模块中添加获取用户路由配置的action,在用户登录成功后动态注册路由。
进一步研究
未来计划深入研究vue-router的view部分源码,理解router-view与keep-alive的关联。后续更新将在此分享。