用LinearLayout仿微信登录界面：从布局到交互的完整实践

简介这是一份面向Android初学者与初中级开发者的仿微信登录/注册界面项目包基于Android Studio和Java实现完整演示线性布局在用户认证界面中的典型用法适合需要快速搭建设计规范、交互完整的登录注册页面的开发者参考。压缩包约21.28MB共1289个文件包含35个Java源文件、73个XML布局与资源文件、120个JSON配置文件、Gradle构建脚本及APK安装包等另有DEX/class编译产物和图片素材可直接运行、对照编译或二次修改。项目覆盖登录界面与注册界面的完整结构从EditText、Button等基础控件到android:orientation、layout_weight等线性布局核心属性再到findViewById事件绑定、状态选择器、SharedPreferences状态保存等关键实现均可在源码中逐一找到对应代码。目前已有2732人学习适合用来系统梳理Android界面开发流程并借鉴微信绿色主题、圆角输入框等视觉细节。1. 为什么我用线性布局而不是约束布局来仿微信登录界面很多人拿到“仿微信登录、注册界面”这个需求第一反应是打开 Android Studio 新建项目拖一个 ConstraintLayout 进去然后开始拉辅助线和链条。但真做过的人都知道微信这种表单类界面本质上就是几组输入框加按钮的纵向堆叠用 LinearLayout 配合正确的 weight 和 gravity半小时就能把静态骨架搭完而且不易出现约束错乱的“玄学”拉扯问题。约束布局在这类界面上最大的优势是复杂层级适配而登录注册页恰恰是线性布局最舒服的领域结构简单、层级清晰、换机型时不容易翻车。这个标题对应的落地物是一个用 Android Studio 写的、以线性布局为骨架、还原微信登录和注册两套界面的工程压缩包。评判它的标准不应该是“像不像”而是三件事布局是否用纯 LinearLayout 完成、登录注册切换是否自然、输入框和按钮的交互细节是否到位。我下文按“先立理论、再给可抄作业的代码、最后讲坑”的顺序把它讲透你可以直接照着搭也可以拿去做课程设计或面试作品。2. 用 LinearLayout 搭建微信登录界面从根布局到输入框的属性体系2.1 为什么根布局必须用垂直 LinearLayout 而不是“一根筋”套嵌套微信登录页从上到下看依次是 Logo 区、手机号输入框、密码输入框、登录按钮、底部辅助入口。这种自上而下的结构在 Android 里最直接的映射就是垂直方向的 LinearLayout。方向用android:orientationvertical声明子视图按顺序排列不需要额外写约束关系。但这里有一个新手最容易踩的认知误区以为“根布局是 LinearLayout”就意味着整棵树里只能有 LinearLayout。实际上微信登录页中间有个横向排列的“手机号 清除按钮”底部有个“登录遇到问题”的文字链这些局部区域用横向 LinearLayout 更合理。所以合理的做法是外层一个垂直 LinearLayout 控制整体流内部用水平和垂直 LinearLayout 混合组织局部区块。这不是“乱套”而是线性布局的正确定位——它负责“一维流式排布”复杂二维关系才需要相对定位或约束。根布局的常见写法是这样的LinearLayout android:layout_widthmatch_parent android:layout_heightmatch_parent android:orientationvertical android:background#F5F5F5 android:paddingStart24dp android:paddingEnd24dp !-- Logo 区 -- LinearLayout android:layout_widthmatch_parent android:layout_height0dp android:layout_weight1 android:gravitycenter android:orientationvertical !-- 这里放 Logo 图片和标题 -- /LinearLayout !-- 表单区 -- LinearLayout android:layout_widthmatch_parent android:layout_heightwrap_content android:backgrounddrawable/bg_input_group android:orientationvertical !-- 手机号输入行、密码输入行 -- /LinearLayout !-- 登录按钮 -- Button android:layout_widthmatch_parent android:layout_height48dp / /LinearLayout这里有两个参数值得单独说。layout_weight1配合layout_height0dp是把 Logo 区设置为“占据剩余空间”的典型写法这样 Logo 会被推到屏幕中间偏上而不是紧贴顶部。paddingStart和paddingEnd用的是24dp这是 Android 表单界面比较通用的左右留白值过大显得松散过小在真机上会感觉内容贴边。很多人喜欢用paddingLeft/Right但官方推荐paddingStart/End因为前者在某些开启 RTL 布局的设备上表现不一致。2.2 输入框分组用背景 drawable 做出微信的“圆角白卡片”质感微信登录页的两个输入框并不是独立悬浮的而是共用一个圆角白色容器中间被一条细线分隔。这个细节用 LinearLayout 实现非常简单在表单区那个垂直 LinearLayout 上挂一个圆角背景然后在两个输入框之间加一条1dp高的分割线即可。分割线用View实现是最轻量的做法View android:layout_widthmatch_parent android:layout_height1dp android:background#E0E0E0 /圆角背景放在res/drawable目录下典型的bg_input_group.xml内容是shape xmlns:androidhttp://schemas.android.com/apk/res/android corners android:radius8dp / solid android:color#FFFFFF / /shape然后表单区的背景直接写android:backgrounddrawable/bg_input_group。这里说明一个关键点微信输入框本身是透明的背景色完全由容器提供。如果你直接给 EditText 设置白色背景圆角和分割线都会被输入框自带的背景盖住观感立刻就会失真。所以正确的层次是“容器提供白底圆角EditText 完全透明”这才是复刻微信质感的核心思路。输入框的属性设置也有讲究。微信输入框默认无边框、文字垂直居中、提示文字是浅灰色。对应到 EditText 上EditText android:idid/et_phone android:layout_widthmatch_parent android:layout_height52dp android:hint手机号 android:textSize16sp android:inputTypephone android:backgroundnull android:maxLines1 /backgroundnull是去掉 EditText 默认下划线的关键这一步不做你的输入框下面会多一条横线微信界面里没有这个东西。inputTypephone会调起数字键盘这是登录场景的常规配置。高度用52dp是因为系统的可点击区域最小建议值是 48dp留 4dp 余量可以避免部分机型上由于字体缩放导致的裁切。2.3 密码行的“横向 LinearLayout 权重”结构清除按钮和隐藏明文微信密码输入框右侧有一个“眼睛”图标点击可以切换明文和密文显示。这个结构用横向 LinearLayout 装一个 EditText 和一个小图标按钮比用 RelativeLayout 做“相对定位”要直观得多LinearLayout android:layout_widthmatch_parent android:layout_height52dp android:orientationhorizontal android:gravitycenter_vertical EditText android:idid/et_password android:layout_width0dp android:layout_heightmatch_parent android:layout_weight1 android:hint密码 android:inputTypetextPassword android:backgroundnull / ImageView android:idid/iv_toggle_pwd android:layout_widthwrap_content android:layout_heightwrap_content android:srcdrawable/ic_eye android:padding8dp android:contentDescription显示密码 / /LinearLayout这里layout_width0dp配合layout_weight1让 EditText 占据除了图标之外的所有宽度。如果写成wrap_content当用户输入长密码时EditText 会把图标挤出屏幕边界这个布局就崩了。gravitycenter_vertical保证 EditText 里的文字和右侧图标在垂直方向对齐视觉上才是一条水平线。contentDescription是给无障碍服务用的文本在模拟微信时别忘了写这也是代码规范的一部分。2.4 注册与登录的按钮状态差异LinearLayout 里怎么处理“主按钮”和“次按钮”登录按钮在微信里是绿色圆角矩形注册按钮在微信的登录页并不直接显示需要点击“注册”入口才切换过去。所以按钮这块两个页面往往共用一个按钮控件只改文字和跳转逻辑。按钮本身建议放在表单区下面与表单区保持 24dp 左右间距。用 MaterialButton 或原生 Button 均可但如果你希望按钮颜色能随输入状态变化没输手机号时灰色输完变绿色建议用 MaterialButton 并设置app:backgroundTintcom.google.android.material.button.MaterialButton android:idid/btn_login android:layout_widthmatch_parent android:layout_height48dp android:layout_marginTop24dp android:text登录 android:textSize16sp android:enabledfalse app:backgroundTintcolor/btn_gray android:stateListAnimatornull /stateListAnimatornull是为了去掉按钮默认的 elevation 阴影动画。微信的登录按钮是扁平风格没有悬浮阴影这个属性不加MaterialButton 在点击时会出现一个明显的“抬升”效果观感立刻不“微信”了。enabledfalse是初始状态后面会在逻辑部分通过监听输入文字来控制它变为可用。3. 登录与注册双界面切换一个 Activity 里复用容器的工程做法3.1 用一个布局文件承载两套表单View 的显示与隐藏切换传统做法是写两个 XML一个登录页一个注册页点击切换时用startActivity跳转。但微信的注册页是从登录页底部平滑推上来的更像“Tab 切换”而不是页面跳转。更贴近标题的做法是在同一个 Activity 里放两个垂直 LinearLayout一个表示登录表单区一个表示注册表单区用setVisibility来控制显示哪个。这个方案的核心是避免重复写大量相同属性。举个例子登录和注册都需要手机号输入框唯一区别是注册页多了“昵称”和“确认密码”两行。如果把两套表单完整写成两个布局代码冗余会非常大改成“复用输入框容器 动态增删行”的形式更优雅。注册页的布局结构大致是这样的LinearLayout android:idid/ll_register_form android:layout_widthmatch_parent android:layout_heightwrap_content android:orientationvertical android:backgrounddrawable/bg_input_group android:visibilitygone !-- 昵称输入行 -- EditText android:idid/et_nickname android:layout_widthmatch_parent android:layout_height52dp android:hint昵称 android:backgroundnull / View android:layout_widthmatch_parent android:layout_height1dp android:background#E0E0E0 / !-- 手机号输入行 -- EditText android:idid/et_register_phone android:layout_widthmatch_parent android:layout_height52dp android:hint手机号 android:inputTypephone android:backgroundnull / View android:layout_widthmatch_parent android:layout_height1dp android:background#E0E0E0 / !-- 密码输入行 -- EditText android:idid/et_register_pwd android:layout_widthmatch_parent android:layout_height52dp android:hint密码 android:inputTypetextPassword android:backgroundnull / /LinearLayoutvisibilitygone意味着初始状态不占用任何布局空间LinearLayout 会把它当作不存在。切换显示时用setVisibility(View.VISIBLE)这个属性在 LinearLayout 体系里比ConstraintLayout里更“干净”因为 gone 视图不会像约束布局那样影响其他视图的约束点不会引发连锁的约束失效问题。3.2 用字符串资源管理“切换文字”不要硬编码“登录”“注册”在切换逻辑里底部那句“没有账号注册”和“已有账号登录”的文字是动态变化的。如果直接在 Java 代码里写死字符串后期想改文案就要翻代码在 LinearLayout 这种结构简单的工程里规范做法是把文案收敛到strings.xmlstring namego_register没有账号注册/string string namego_login已有账号登录/string string namebtn_login登录/string string namebtn_register注册/string然后在 Activity 里这样切换tvSwitch.setOnClickListener(v - { if (isRegisterMode) { // 当前是注册模式切回登录 llLoginForm.setVisibility(View.VISIBLE); llRegisterForm.setVisibility(View.GONE); btnSubmit.setText(R.string.btn_login); tvSwitch.setText(R.string.go_register); isRegisterMode false; } else { // 当前是登录模式切到注册 llLoginForm.setVisibility(View.GONE); llRegisterForm.setVisibility(View.VISIBLE); btnSubmit.setText(R.string.btn_register); tvSwitch.setText(R.string.go_login); isRegisterMode true; } });这段逻辑里最容易漏掉的是isRegisterMode这个布尔变量。如果不维护它用户连续点击切换按钮时界面状态会和你预期的不一致比如第一次点切到注册第二次点又切到注册因为代码只判断了“当前是不是注册模式”但视图状态没有同步好。维护一个状态变量让“视图状态”和“逻辑状态”一一对应这是所有 UI 切换类功能的基本功在 LinearLayout 这种轻工程里同样不能省。3.3 注册页新增“确认密码”行用 addView 动态插入 vs. 预置隐藏微信注册页有“密码”和“确认密码”两个输入框。如果你的注册表单是完整的、固定的直接在 XML 里写两行就行。但如果你想做一个更“工程化”的版本可以尝试用代码动态插入一行EditText confirmPwd new EditText(this); confirmPwd.setHint(确认密码); confirmPwd.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD); confirmPwd.setBackground(null); LinearLayout.LayoutParams params new LinearLayout.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, dpToPx(52) ); llRegisterForm.addView(confirmPwd, params);动态插入的优点是布局文件更精简缺点是dpToPx换算、行间距处理都要自己来而且分割线也要手动加。我的建议是项目不大就老老实实在 XML 里预置用visibilitygone控制。动态 addView 适合那种“字段数量本身不确定”的场景一个登录注册项目没必要给自己增加复杂度。dpToPx的换算在动态插入时很容易写错这里给出一个稳定写法private int dpToPx(int dp) { return (int) (dp * getResources().getDisplayMetrics().density 0.5f); }为什么不直接用px写死因为不同设备密度不同dp是屏幕无关的必须经过密度换算才能在代码里生成正确尺寸的视图。加0.5f是四舍五入否则会丢精度导致高度忽高忽低。4. 输入校验与登录按钮的可用状态动态监听三个输入框4.1 初始灰色按钮到绿色按钮TextWatcher 的联合监听微信的登录按钮很“聪明”你只输入手机号、没输密码时按钮是灰色的、不可点的两个都填了才变成绿色。这个效果在 LinearLayout 工程里通过 TextWatcher 实现。给手机号和密码输入框分别注册 TextWatcher在afterTextChanged里统一检查两个输入框的内容更新按钮状态。注意一个关键点afterTextChanged是每次文字变化后回调一次包括删除、粘贴、自动填充所以统一放在这个回调里检查是最高效的不要放在onTextChanged里做逻辑处理那会在每输入一个字符时触发两次以上冗余检查。TextWatcher loginWatcher new TextWatcher() { Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } Override public void onTextChanged(CharSequence s, int start, int before, int count) { } Override public void afterTextChanged(Editable s) { boolean phoneFilled etPhone.getText().length() 0; boolean pwdFilled etPassword.getText().length() 0; btnLogin.setEnabled(phoneFilled pwdFilled); if (phoneFilled pwdFilled) { btnLogin.setBackgroundTintList(ColorStateList.valueOf(getColor(R.color.wechat_green))); } else { btnLogin.setBackgroundTintList(ColorStateList.valueOf(getColor(R.color.btn_gray))); } } }; etPhone.addTextChangedListener(loginWatcher); etPassword.addTextChangedListener(loginWatcher);这个代码里比较容易忽略的是同一个 TextWatcher 实例可以同时添加到两个 EditText 上。addTextChangedListener接收的是 TextWatcher 接口它不关心你监听的是哪个控件只要在afterTextChanged里读取的是两个输入框的最新内容即可。这样可以省掉重复创建两个 TextWatcher 的样板代码。4.2 手机号格式校验正则与 inputType 的边界很多仿微信的项目在输入框里加正则校验拦截格式错误的手机号。但这个校验放哪里、什么时候触发很有讲究。放在每次按键时触发会极其烦人——用户刚输入一个“1”你就弹提示“手机号格式不正确”体验非常糟糕。合理的做法是点“登录”按钮时再校验手机号和密码的格式。手机号判空和位数检查可以合在一起private boolean validateLoginInput() { String phone etPhone.getText().toString().trim(); String pwd etPassword.getText().toString().trim(); if (phone.isEmpty()) { Toast.makeText(this, 请输入手机号, Toast.LENGTH_SHORT).show(); return false; } if (!phone.matches(^1[3-9]\\d{9}$)) { Toast.makeText(this, 手机号格式不正确, Toast.LENGTH_SHORT).show(); return false; } if (pwd.isEmpty()) { Toast.makeText(this, 请输入密码, Toast.LENGTH_SHORT).show(); return false; } if (pwd.length() 6) { Toast.makeText(this, 密码至少6位, Toast.LENGTH_SHORT).show(); return false; } return true; }正则^1[3-9]\\d{9}$覆盖了目前主流号段。注意trim()先去掉首尾空格否则用户从输入法粘贴一个带空格的手机号校验会直接失败。实际生产环境里运营商号段随时会增加但这个正则作为课程设计和 Demo 完全够用。按钮的点击监听里只做两件事调validateLoginInput()返回 true 就走登录逻辑一般是跳转主页或弹 Toastfalse 就直接 return。这样校验逻辑和 UI 更新逻辑是分离的将来要接后端接口时只需要在验证通过的地方加网络请求就行。4.3 密码明文的切换逻辑与记住“当前状态”密码明文切换的按钮是那个小眼睛它的状态切换同样要维护一个布尔变量。这里要记住inputType切换会重置 EditText 的字体和光标位置所以你需要在切换后手动把光标移到最后。ivTogglePwd.setOnClickListener(v - { if (isPwdVisible) { etPassword.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD); ivTogglePwd.setImageResource(R.drawable.ic_eye_off); isPwdVisible false; } else { etPassword.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD); ivTogglePwd.setImageResource(R.drawable.ic_eye); isPwdVisible true; } etPassword.setSelection(etPassword.getText().length()); });注意setInputType不只是把textPassword换成textVisiblePassword那么简单它还会改变 EditText 内部的键盘类型和字体显示。这里有一个隐蔽的问题很多人写etPassword.setInputType(InputType.TYPE_TEXT_VARIATION_PASSWORD)结果输入框直接变成普通文本了因为忘记了保留TYPE_CLASS_TEXT这个基础类型。正确写法是TYPE_CLASS_TEXT | TYPE_TEXT_VARIATION_PASSWORD用按位或把两个类型组合起来。光标位置用setSelection恢复不恢复的话用户在高亮状态下切换明文密文文字会跳到选择状态的末尾之外看起来就像“光标丢了”这是 QQ、微信这类 App 里常见的细节模仿时要注意。5. 仿微信登录注册界面的 5 个必踩坑从布局错乱到键盘遮挡5.1 分割线“多出一截”的坑宽度单位不一致现象两个输入框之间的分割线看起来比输入框宽出一部分左右没有对齐。原因分割线的layout_widthmatch_parent在 LinearLayout 里会撑满整个父容器但父容器有左右 padding而分割线作为子视图使用时它的宽度是由父容器的paddingStart/End决定的如果输入框自己有 margin 或 padding分割线就会和输入框的实际可编辑区域错位。解决分割线的宽度不用match_parent而是跟随输入框的左右边界。常见做法是给分割线显式使用与输入框一致的 margin或者干脆去掉输入框的左右 margin让所有内容的边界统一由父容器 padding 控制。5.2 键盘弹起把按钮顶上去的问题现象点击输入框后软键盘弹起登录按钮被顶到键盘上方整个界面乱掉或者按钮被完全遮住。原因Activity 默认的windowSoftInputMode是adjustUnspecified各机型表现不一致在 LinearLayout 布局里内容整体会被压缩或上移没有为键盘预留滚动空间。解决在AndroidManifest.xml里给对应的 Activity 设置activity android:name.LoginActivity android:windowSoftInputModeadjustPan|adjustResize /adjustPan会把整个窗口上移保证输入框可见adjustResize会压缩窗口高度。对于 LinearLayout 的登录页adjustResize配合外层包一个 ScrollView 是更稳的方案因为表单内容多的时候压缩不会导致底部按钮被遮住。5.3 字号单位混用导致字体大小错乱现象模拟器上看正好的字号到真机上变小或变大或者用了sp之后用户调整系统字体大小界面结构直接崩坏。原因把sp写成了dp或者反过来。sp会跟随系统字体缩放dp不会。在登录注册这种需要输入大量文本的界面输入框的文字用sp是合理的但如果设置了固定高度52dp用户把系统字体调到特大文字会被裁掉。解决输入框高度用dp文字大小用sp这是标准做法。如果担心特大字体下裁切把输入框高度从固定值改成wrap_content并设置最小高度minHeight52dp。这样文字变大时输入框会自动长高不会裁字。5.4 切换登录注册时EditText 自动填充残留现象从登录切到注册手机号输入框里带着登录页输入的内容。原因登录和注册两个表单如果复用了同一个 EditText 的 id或者同一个 View 被设置了相同的内容保留切换可见性时EditText 的文字不会自动清空。用户以为是 Bug——我明明切到注册了怎么还留着登录的手机号。解决切换模式时手动清空注册表单里的输入public void switchToRegister() { etNickname.setText(); etRegisterPhone.setText(); etRegisterPwd.setText(); etConfirmPwd.setText(); }在setVisibility的同一逻辑里清空是成本最低的处理。不要试图依赖视图的onVisibilityChanged回调那个回调的触发时机在部分 ROM 上有延迟会导致“肉眼可见地闪了一下才清空”。5.5 按钮背景变绿但点击没反应点击区域被遮挡现象登录按钮看起来是亮的、可点的但点击之后没有触发点击事件。原因按钮上方某个透明的 View 覆盖了它把点击事件拦截了。在 LinearLayout 里最常见的场景是分割线 View 没有设置clickablefalse或者某处布局用了layout_weight撑满后挤压了按钮的点击区域。还有一种情况按钮设置了enabledfalse但背景没有变灰用户误以为可点。解决先在Layout Inspector里查看按钮的位置和实际点击区域重点检查它是否被一个半透明或全透明的 View 盖住。分割线 View 加上android:clickablefalse按钮的父容器不要设置clickable。注意enabledfalse的按钮即使在界面上是绿色也不会响应任何点击这不是 Bug是状态管理的预期行为。6. 验证“像不像微信”的三个维度交互手感、焦点流和屏幕适配仿微信界面最容易被人一眼看穿的不是像素偏差而是交互手感。具体来说有三个维度切换登录注册的过渡、键盘与表单的配合、不同屏幕宽度的适配。这里给你一个自查清单并附上对应的工程化处理技巧。第一个维度是过渡动画。微信切换登录与注册时底部表单的切换是有一个轻微上移动效的。在 LinearLayout 里给视图切换加动画可以直接借助ViewPropertyAnimatorllRegisterForm.setTranslationY(80f); llRegisterForm.setAlpha(0f); llRegisterForm.setVisibility(View.VISIBLE); llRegisterForm.animate() .translationY(0f) .alpha(1f) .setDuration(250) .start();这个动画只移动了注册表单本身登录表单的隐藏可以不做动画因为一个淡出一个上移已经能掩盖切换痕迹。注意translationY的起始值不要太大80f 在 mdpi 设备上大约是一条输入框的高度太大会有“过度动画”的廉价感。第二个维度是焦点流。仿微信的登录页里用户在手机号输入框点“下一项”键盘右下角的按键应该变为“下一步”再点一下焦点跳到密码框。这是 EditText 的imeOptions属性控制的EditText android:idid/et_phone android:imeOptionsactionNext android:inputTypephone /同时要在代码里处理setOnEditorActionListener否则焦点不会自动跳到下一个输入框etPhone.setOnEditorActionListener((v, actionId, event) - { if (actionId EditorInfo.IME_ACTION_NEXT) { etPassword.requestFocus(); return true; } return false; });这是键盘交互的细节自动聚焦可以借助requestFocus()实现配合adjustResize密码框会跟着键盘向上移动模拟出微信的“顺手”感。第三个维度是屏幕适配。LinearLayout 在小屏幕和折叠屏上表现不同我建议做两件事。第一件不要用固定layout_width480dp这类写法——这在 LinearLayout 里是合法的但小屏会横向溢出。统一用match_parent。第二件如果要做横屏适配LinearLayout 的纵向结构天然不适合横屏建议准备一份layout-land的横向布局或者在清单文件里锁定竖屏activity android:name.LoginActivity android:screenOrientationportrait /锁定竖屏不是偷懒而是产品层面的选择——微信登录页本身就不支持横屏。在仿制时锁定竖屏更贴近原版也能大幅减少适配工作量。如果你想做多屏适配的加分项可以额外提供values-sw600dp下的布局参数微调文件改改字号和间距不需要重新写布局。最后分享一个习惯每次改完布局参数不要只在模拟器上看。模拟器和真机的屏幕密度差异会让 LinearLayout 的间距和按钮高度看起来完全不同。我吃过一次亏模拟器上按钮和输入框之间 24dp 的间距刚刚好到某低端真机上就变得拥挤不堪原因是那台机子的系统字体默认偏大wrap_content的按钮实际高度比预期高出 20%。从那以后凡是涉及登录注册这类表单布局我都会在预览和真机之间来回切确保输入框不裁字、按钮不悬空。希望这些经验能帮你少走一段弯路。本文还有配套的精品资源点击获取