淘宝widget之弹出层(Popup)的巧用

合集下载

AndroidAnimation实战之屏幕底部弹出PopupWindow

AndroidAnimation实战之屏幕底部弹出PopupWindow Android动画的⼀个实战内容，从屏幕底部滑动弹出PopupWindow。

相信这种效果⼤家在很多APP上都遇到过，⽐如需要拍照或者从SD卡选择图⽚，再⽐如需要分享某些东西时，⼤多会采⽤这么⼀种效果：那这种效果如何实现呢？我们仿写⼀个这种效果的实例吧：1）我们⾸先定义⼀下，弹出窗⼝的页⾯布局组件：take_photo_pop.xml<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="/apk/res/android"android:layout_width="fill_parent"android:layout_height="wrap_content"android:gravity="center_horizontal"android:orientation="vertical"><LinearLayoutandroid:id="@+id/pop_layout"android:layout_width="fill_parent"android:layout_height="wrap_content"android:background="#ffffff"android:layout_alignParentBottom="true"android:gravity="center_horizontal"android:orientation="vertical"><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:clickable="false"android:gravity="center"android:text="修改头像"android:textColor="#8a8a8a"android:textSize="15sp" /><Viewandroid:layout_width="fill_parent"android:layout_height="0.1dp"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"android:background="#00c7c0" /><Buttonandroid:id="@+id/btn_take_photo"android:layout_width="fill_parent"android:layout_height="wrap_content"android:text="拍照"android:textColor="#0e61aa"android:textSize="18sp" /><Buttonandroid:id="@+id/btn_pick_photo"android:layout_width="fill_parent"android:layout_height="wrap_content"android:text="从相册选择"android:textColor="#0e61aa"android:textSize="18sp" /><Buttonandroid:id="@+id/btn_cancel"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_marginBottom="15dip"android:layout_marginTop="15dip"android:text="取消"android:textColor="#0e61aa"android:textSize="18sp"android:textStyle="bold" /></LinearLayout></RelativeLayout>2）现在定义动画，要知道该Popupwindow出现时是从页⾯底部向上滑动，消失时是从上向下滑动消失,，所以我们需要定义两个动画⽂件：退出动画pop_exit_anim.xml<?xml version="1.0" encoding="utf-8"?><set xmlns:android="/apk/res/android"><translateandroid:duration="200"android:fromYDelta="0"android:toYDelta="50%p" /><alphaandroid:duration="200"android:fromAlpha="1.0"android:toAlpha="0.0" /></set>显⽰动画pop_enter_anim.xml<?xml version="1.0" encoding="utf-8"?><set xmlns:android="/apk/res/android"><translateandroid:duration="200"android:fromYDelta="100%p"android:toYDelta="0" /><alphaandroid:duration="200"android:fromAlpha="0.0"android:toAlpha="1.0" /></set>关于这两个动画，此处不再多做解析，读过我之前博⽂的都应该知道啦，很简单的，若是看不懂？请点击此⽂上⽅的链接学习之。

手把手教会popupWindow从下往上弹出效果的实现

手把手教会popupWindow从下往上弹出效果的实现效果如图所示，点击开始按钮，popWindow从下往上出来，再点击popWindow外面，popWindow又从上往下消失可以看出来，上面的popupWindow是半透明的，后面我会细说。

最基本的是activity_main了，很简单，就只是一个button，这里我就不贴代码了。

接下来的是，popWindow的界面了代码如下：这里注意我里面的那个注释<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="5dp"android:orientation="vertical" ><Buttonandroid:id="@+id/first"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginBottom="5dp"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"android:layout_marginTop="5dp"android:background="@android:color/holo_red_light"android:text="第一个按钮" /><Buttonandroid:id="@+id/second"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginBottom="5dp"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"android:background="@android:color/holo_red_light"android:text="第二个按钮" /><Buttonandroid:id="@+id/third"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginBottom="5dp"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"android:background="@android:color/holo_red_light"android:text="第三个按钮" /></LinearLayout>然后在res/下新建一个文件夹anim,进而anim下新建两个xml文件，如图所示：其中，pophidden_anim的代码如下<?xml version="1.0" encoding="utf-8"?><set xmlns:android="/apk/res/android"><translateandroid:duration="1000"android:fromYDelta="0"android:toYDelta="50%p" /><alphaandroid:duration="1000"android:fromAlpha="1.0"android:toAlpha="0.0" /></set>popshow_anim的代码如下<?xml version="1.0" encoding="utf-8"?><set xmlns:android="/apk/res/android"><translateandroid:duration="1000"android:fromYDelta="100%p"android:toYDelta="0" /><alphaandroid:duration="1000"android:fromAlpha="0.0"android:toAlpha="1.0" /></set>然后在values/styles.xml加入以下代码，变成这个样子，上面的那些是自带的<resources><style name="AppBaseTheme"parent="android:Theme.Lig ht"></style><style name="AppTheme"parent="AppBaseTheme"></style><style name="mypopwindow_anim_style"><item name="android:windowEnterAnimation">@anim/po pshow_anim</item><item name="android:windowExitAnimation">@anim/pop hidden_anim</item></style></resources>之后就是Activity里面的代码了，我里面都写好了所有的注释，应该可以看得很清楚package com.example.popwindow;import android.os.Bundle;import android.app.Activity;import android.content.Context;import android.graphics.drawable.BitmapDrawable;import android.graphics.drawable.ColorDrawable;import android.view.Gravity;import youtInflater;import android.view.Menu;import android.view.View;import android.view.View.OnClickListener;import android.view.WindowManager;import android.widget.Button;import android.widget.PopupWindow;import android.widget.PopupWindow.OnDismissListener;import android.widget.Toast;public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(yout.activity_main);Button start = (Button) findViewById(R.id.start);start.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {showPopwindow();}});}/*** 显示popupWindow*/private void showPopwindow() {// 利用layoutInflater获得ViewLayoutInflater inflater = (LayoutInflater) getSystemService(C YOUT_INFLATER_SERVICE);View view = inflater.inflate(yout.popwindowlayout, null);// 下面是两种方法得到宽度和高度 getWindow().getDecorView ().getWidth()PopupWindow window = new PopupWindow(view,youtParams.MATCH_PARENT,youtParams.WRAP_CONTENT);// 设置popWindow弹出窗体可点击，这句话必须添加，并且是truewindow.setFocusable(true);// 实例化一个ColorDrawable颜色为半透明ColorDrawable dw = new ColorDrawable(0xb0000000);window.setBackgroundDrawable(dw);// 设置popWindow的显示和消失动画window.setAnimationStyle(R.style.mypopwindow_anim_styl e);// 在底部显示window.showAtLocation(MainActivity.this.findViewById(R.id. start),Gravity.BOTTOM, 0, 0);// 这里检验popWindow里的button是否可以点击Button first = (Button) view.findViewById(R.id.first);first.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {System.out.println("第一个按钮被点击了");}});//popWindow消失监听方法window.setOnDismissListener(new OnDismissListener() {@Overridepublic void onDismiss() {System.out.println("popWindow消失");}});}}其中window.setFocusable(true)和window.setBackgroundDrawable()必须填写，如果是想让popWindow半透明，就是上面的那个方法，如果只是单纯的调用这个方法就这样写window.setBackgroundDrawable(new BitmapDrawable());。

弹出对话框功能模块(popup_？)

功能组： STMO
功能模块：
POPUP_TO_CONFIRM_CUST
POPUP_TO_INFORM
*------------------------------------------------------------------------------------------------*
功能组： SYSF
功能模块：POPUP_NO_LIST
*------------------------------------------------------------------------------------------------*
功能组： TB04
功能模块： POPUP_TO_SHOW_USERINFO
EXPORTIΒιβλιοθήκη G * TITLEBAR = ' '
* DIAGNOSE_OBJECT = ' '
text_question =
* TEXT_BUTTON_1 = 'Ja'(001)
功能模块：POPUP_DISPLAY_MESSAGE
*------------------------------------------------------------------------------------------------*
功能组： SOTR_EDIT
功能模块：POPUP_CONTEXT
*------------------------------------------------------------------------------------------------*

wxpopupwindow用法 -回复

wxpopupwindow用法-回复了wxPopupWindow的用法。

wxPopupWindow是wxWidgets中的一个弹出窗口类，它可以在应用程序的任意位置创建一个临时窗口，并显示一些额外的信息或功能。

本文将介绍wxPopupWindow的用法，包括创建、显示、隐藏以及与其他控件的结合使用。

第一步：包含头文件<wx/popupwin.h>要使用wxPopupWindow类，首先需要包含头文件<wx/popupwin.h>。

这个头文件定义了wxPopupWindow以及与之相关的函数和类。

第二步：创建wxPopupWindow对象在需要使用wxPopupWindow的地方，创建一个wxPopupWindow 对象。

可以使用wxPopupWindow的默认构造函数创建对象，也可以使用带有参数的构造函数传递一些初始化参数。

例如，下面的代码创建了一个名为popupWindow的wxPopupWindow对象：cppwxPopupWindow* popupWindow = new wxPopupWindow(this);第三步：设置窗口的大小和样式在创建wxPopupWindow对象之后，可以设置它的大小和样式。

可以使用wxWindow类的相关函数来设置。

例如，可以使用SetSize函数设置窗口的大小，使用SetBackgroundColour函数设置窗口的背景颜色。

下面的代码演示了如何设置窗口的大小和背景颜色：cpppopupWindow->SetSize(wxSize(200, 100));popupWindow->SetBackgroundColour(wxColour(255, 255, 255));第四步：将控件添加到窗口wxPopupWindow是一个容器窗口，可以在其中添加其他控件，例如按钮、标签等。

可以使用相关的wxWindow类的函数将控件添加到wxPopupWindow中。

popupwindow简介

popupwindow简介PopupWindow简介PopupWindow是Android中的一个类，主要用于显示一个浮动视图，可以在任何视图组件上浮在前面，由用户触发，并在完成后自动关闭。

它可以用来显示用户输入数据的选择弹出窗口，例如下拉列表、菜单和进度条，也可以用在突出显示某些元素和提供额外信息的背景之上。

PopupWindow示例应用场景：1.显示下拉菜单当用户点击某个按钮时，弹出菜单进行选择，用PopupWindow比使用普通的menu item更灵活也容易处理。

2.屏幕提示在应用程序使用教学或者介绍中，我们可以使用PopupWindow，把需要重点讲解的地方高亮显示出来，并在那里进行提示。

PopupWindow的常用功能：1.控制弹出位置它具有指定窗口的位置的功能，例如：可以指定它相对于屏幕上任何位置的像素坐标以及在另一个视图的边缘上的对齐方式等等。

2. 背景设置设置弹出窗口的背景。

可以设置为系统自带的风格，也可以通过定义自己的Drawable背景来创建。

3. 固定大小PopupWindow还允许您强制弹出窗口的大小，使其维持固定的宽度和高度。

4. 取消、显示Show()和dismiss()方法是使用PopupWindow最常见的方式之一。

它允许您在任何时候取消显示PopupWindow。

5. 触摸事件处理PopupWindow具有可自定义触摸事件处理的功能（touch interceptor），这意味着您可以在用户尝试在视图上进行操作时捕获触摸事件。

PopupWindow的主要优点：1.功能灵活PopupWindow很灵活，几乎可以完美地拉伸设计和布局未知大小天然元素的UI。

2.数据展示可以将PopupWindow用于数据的展示，如动态表格、图片、视频等。

3.交互响应触控、手势等交互行为相对更灵活和全面。

4.节省空间PopupWindow可以节约界面空间，使得UI设计更加简介合理，也使得更多的信息可以展示。

关于wpf中popup中的一些用法的总结

在WPF（Windows Presentation Foundation）中，Popup控件是一个用于显示弹出窗口的控件。

Popup 控件本身是一个不可见的元素，只有在向Popup中添加内容（如文本框、按钮等）后，它才可见。

Popup 控件在UI中的使用非常灵活，可以用来实现各种自定义的弹出效果。

以下是关于WPF中Popup控件的一些常用属性和用法的总结：1.IsOpen属性：这是一个布尔值，用于指示Popup控件是否显示。

当设置为true时，Popup控件将显示；当设置为false时，Popup控件将隐藏。

2.StaysOpen属性：这也是一个布尔值，用于指示在Popup控件失去焦点时是否关闭Popup控件的显示。

如果设置为true，Popup控件将保持打开状态，即使它失去了焦点；如果设置为false，Popup 控件在失去焦点时将自动关闭。

3.PopupAnimation属性：这个属性用于设置Popup控件显示时的动画效果。

它只有在AllowsTransparency属性设置为true时才有用。

例如，可以设置为"Fade"表示Popup控件以渐入的方式显示。

4.PlacementTarget属性：这个属性用于设置Popup控件停靠的位置。

它通常绑定到一个控件上，表示Popup控件将相对于该控件进行定位。

例如，可以设置为一个CheckBox控件，这样Popup控件就会出现在该CheckBox控件的旁边。

5.Placement属性：这个属性用于指定Popup控件的定位方式。

它是一个枚举值，可以选择不同的定位方式，如RelativeTo、Absolute、Bottom、Top等。

6.PlacementRectangle属性：这个属性用于设置一个矩形，Popup控件在显示时将相对于此矩形进行定位。

这个矩形的位置也相对于PlacementTarget属性所设定的控件。

7.HorizontalOffset和VerticalOffset属性：这两个属性用于指定Popup控件在水平方向和垂直方向上的偏移量。

uni-popup 组件写法

一、介绍uni-popup组件uni-popup是一个弹出层组件，可以用于显示弹窗、下拉菜单、提示框等弹出式界面。

它是基于uni-app框架开发的，可以在各个评台上运行，包括H5、小程序、App等。

uni-popup组件具有丰富的配置选项，可以轻松实现各种弹出层效果，并提供丰富的事件回调和交互能力。

二、uni-popup的基本写法uni-popup组件的基本写法如下：```html<template><view><uni-popup v-model:show="{{showPopup}}"></uni-popup><button click="togglePopup">触发弹出层</button></view></template><script>export default {data() {return {showPopup: false};},methods: {togglePopup() {this.showPopup = !this.showPopup;}}};</script>```上面的代码演示了如何在uni-app中使用uni-popup组件。

首先在模板中引入uni-popup组件，并通过v-model绑定一个Boolean类型的变量来控制弹出层的显示与隐藏。

然后在按钮的点击事件中切换这个变量的值，从而触发或关闭弹出层。

三、uni-popup的配置选项uni-popup组件提供了丰富的配置选项，可以通过传入props来实现各种弹出层效果。

常用的配置选项包括：1. position：控制弹出层的位置，可以设置为top、bottom、left、right等值来指定弹出层的方向。

2. animation：控制弹出层的动画效果，可以设置为fade、slide、bounce等值来指定不同的动画效果。

Flutter超实用简单菜单弹出框PopupMenuButton功能

解释一下逻辑：
1. 首先定义了一个枚举
2. 然后在 AppBar 的「actions」里定义了 PopupMenuButton
3. 设置 icon 为 Icon(Icons.more_vert)
4. itemBuilder 需返回一个 List<PopupMenuEntry<T>>
5. 这里传入的值就是 PopupMenuItem<WhyFarther>
总结
以上所述是小编给大家介绍的Flutter 超实用简单菜单弹出框 PopupMenuButton功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
One of child [3] or icon [4] may be provided, but not both. If icon [5] is provided, then PopupMenuButton [6] behaves like an IconButton [7] .
If both are null, then a standard overflow icon is created (depending on the platform).
大致意思为：
当按下的时候显示一个菜单，选择了一个项目的时候会回调 onSelected ，传递的值是所选菜单的值。
可以提供 child or icon ，但是不能同时提供。
如果为空，则提供一个默认的图标，取决于平台。
构造函数
看完了官方说明，再来看构造函数：
const PopupMenuButton({ Key key, @required this.itemBuilder, this.initialValue, this.onSelected, this.onCanceled, this.tooltip, this.elevation = 8.0, this.padding = const EdgeInsets.all(8.0), this.child, this.icon, this.offset = Offset.zero, this.enabled = true, }) : assert(itemBuilder != null), assert(offset != null), assert(enabled != null), assert(!(child != null && icon != null)), // fails if passed both parameters super(key: key);

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

淘宝店铺设计Widget之弹出层的巧用自从淘宝出推出了旺铺2012之后，我们淘宝卖家在装修店铺的时候更加能随心所以的设计自己的店铺了，愿意就是我们能使用多个自定义内容区了。

但是，由于淘宝的限制，CSS权限依旧不对专业版的用户开放，所以我们在设计店铺的时候还是有很大的限制，比如：我们想让鼠标在经过某一块儿的时候让其变颜色（如下图），鼠标在依次经过以下模块儿的时候会变颜色。

这是什么原因呢？这里就是调用了淘宝的widget规范可以使其进行轮播。

这种轮播我们也可以用于自己的店铺的大图海报轮播，在这里我就不说这个了，主要是说怎么使鼠标经过的时候变色的原因。

谈到这个鼠标经过能变色也是我在装修店铺利用淘宝Widget规范的时候，突然想到的，其精髓所在就是利用了弹出层（Popup）。

好，下面我们进入正题：首先，我们先看一个弹出层的小例子（点击下载）：我们所需要的DOM结构本组件作为一个弹出层的效果，通过预先设置一个隐藏的弹出层，并且设置该弹出层的触点，通过鼠标滑入和移出触点来展示和隐藏弹出层效果代码如下：<div class="a2" style="width:200px;height:200px;"><img border="0" src="/imgextra/i1/872328887/T29IgrXeFaXXXXXXXX_!!87232888 7.png" width="200" height="200" /><div class="J_TWidget" data-widget-config="{'trigger':'.a2','align':{'node':'.a2','offset':[0,0], 'points':['cc','cc'] }}" data-widget-type="Popup" style="display:none;padding:0px;margin:0px;"><div style="opacity:0.6"><imgsrc="/imgextra/i3/872328887/T2bGktXXpaXXXXXXXX_!!8723288 87.jpg" /> </div> </div> </div>该段代码的效果如下图所示：鼠标未经过该区域的样式鼠标经过该区域后的样式配置参数列表使其变色了，其实就是一个弹出层，鼠标在经过的时候使其弹出即可，弹出的那个层跟导航的区域大小相同即可。

代码如下：<div class="top04" style="background: none repeat scroll 0 0 transparent;height: 439px;overflow: hidden;position: relative;width: 950px;"><div class="J_TWidget" data-widget-type="Slide" data-widget-config="{'effect':'fade','autoplay':'true','duration':'0.6'}"><div class="ks-switchable-content" style="background: none repeat scroll 0 0 #FFFFFF;height:396px;padding:0;width: 946px;"><a href="#" target="_blank"><imgsrc="/imgextra/i3/872328887/T2b1ssXdFaXXXXXXXX_!!87232888 7.jpg"></a><a href="#" target="_blank"><imgsrc="/imgextra/i1/872328887/T2GuMtXdNXXXXXXXXX_!!872328 887.jpg"></a><a target="_blank"><imgsrc="/imgextra/i1/872328887/T2P57sXcVaXXXXXXXX_!!8723288 87.jpg"></a><a target="_blank"><imgsrc="/imgextra/i4/872328887/T2kXuKXXVcXXXXXXXX_!!872328 887.jpg"></a><a target="_blank"><imgsrc="/imgextra/i3/872328887/T2HdEsXgRaXXXXXXXX_!!8723288 87.jpg"></a></div><ul class="ks-switchable-nav yslider-stick" style=" background: none repeat scroll 0 0 #333333;bottom: 0;height: 39px;left: 0;line-height: 39px;position: absolute;width: 950px;z-index: 99;"><li class="" style="cursor: pointer;float: left;overflow: hidden;width: 190px;list-style:none;"><a class="a1" target="_blank" style="color: #FFFFFF;display: block;padding: 0;text-align: center;text-decoration: none;text-indent: 0;font-weight:300;"> 我是帅</a><div class="J_TWidget" data-widget-config="{'trigger':'.a1','align':{'node':'.a1','offset':[0,0], 'points':['cc','cc'] }}" data-widget-type="Popup" style="display:none;padding:0px;margin:0px;"><div style="opacity:0.6">//opacity为降低图片透明度<imgsrc="/imgextra/i4/872328887/T2lMUrXelaXXXXXXXX_!!87232888 7.jpg" /></div></div></li><li class="" style="cursor: pointer;float: left;overflow: hidden;width: 190px;list-style:none;"><a class="a6" target="_blank" style="color: #FFFFFF;display: block;padding: 0;text-align: center;text-decoration: none;text-indent: 0;font-weight:300;"> 我是帅</a><div class="J_TWidget" data-widget-config="{'trigger':'.a6','align':{'node':'.a6','offset':[0,0], 'points':['cc','cc'] }}" data-widget-type="Popup" style="display:none;padding:0px;margin:0px;"><div style="opacity:0.6"><imgsrc="/imgextra/i4/872328887/T2lMUrXelaXXXXXXXX_!!87232888 7.jpg" width="190" height="39" /></div></div></li><li class="ks-active" style="cursor: pointer;float: left;overflow: hidden;width: 190px;list-style:none"><a class="a3" target="_blank" style="color: #FFFFFF;display: block;padding: 0;text-align: center;text-decoration: none;text-indent: 0;font-weight:300;"> 你觉得呢</a><div class="J_TWidget" data-widget-config="{'trigger':'.a3','align':{'node':'.a3','offset':[0,0], 'points':['cc','cc'] }}" data-widget-type="Popup" style="display:none;padding:0px;margin:0px;"><div style="opacity:0.6"><imgsrc="/imgextra/i4/872328887/T2lMUrXelaXXXXXXXX_!!87232888 7.jpg" /></div></div></li><li class="" style="cursor: pointer;float: left;overflow: hidden;width: 190px;list-style:none"><a class="a4" target="_blank" style="color: #FFFFFF;display: block;padding: 0;text-align: center;text-decoration: none;text-indent: 0;font-weight:300;"> 要是你觉得我不帅</a><div class="J_TWidget" data-widget-config="{'trigger':'.a4','align':{'node':'.a4','offset':[0,0], 'points':['cc','cc'] }}" data-widget-type="Popup" style="display:none;padding:0px;margin:0px;"><div style="opacity:0.6"><imgsrc="/imgextra/i4/872328887/T2lMUrXelaXXXXXXXX_!!87232888 7.jpg" /></div></div></li><li class="" style="cursor: pointer;float: left;overflow: hidden;width: 190px;list-style:none"><a class="a5" target="_blank" style="color: #FFFFFF;display: block;padding: 0;text-align: center;text-decoration: none;text-indent: 0;font-weight:300;"> 那么请你跳出来</a><div class="J_TWidget" data-widget-config="{'trigger':'.a5','align':{'node':'.a5','offset':[0,0],'points':['cc','cc'] }}" data-widget-type="Popup" style="display:none;padding:0px;margin:0px;"><div style="opacity:0.6"> //opacity为降低图片透明度<imgsrc="/imgextra/i4/872328887/T2lMUrXelaXXXXXXXX_!!87232888 7.jpg" /></div></div></li></ul> </div> </div>将以上代码在淘宝店铺装修里测试即可得出一下结果了这样就能使我们的店铺在买家浏览的时候更加的有质感了。