MVVM架构在Android中的DataBinding实现案例

企业开发 2024-11-06 17:05
0 阅读

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：本实例展示了如何利用Google官方Data Binding库在Android应用中实现MVVM架构模式。通过Data Binding库，开发者能够简洁地将数据绑定到UI元素，从而提高代码的可读性和可维护性。实例中包括了MVVM架构的核心概念，以及如何使用表达式语言、Observable对象、BindingAdapter、Layout文件和DataBindingUtil等Data Binding库中的工具，实现双向数据绑定，以及如何通过简单的代码示例快速理解和实践Data Binding的用法。 基于google官方DataBinding的MVVM炒鸡简单实例

1. MVVM架构模式与Android应用开发

在当今快速发展的移动应用市场中，Android作为主要的开发平台之一，其应用开发模式随着技术的发展也在不断演变。MVVM（Model-View-ViewModel）架构模式，作为一种适应现代移动应用开发的模式，已经被越来越多的开发者采用。本章节将简要介绍MVVM架构模式的基本概念，并探讨它在Android应用开发中的应用。

1.1 MVVM架构模式概述

MVVM架构模式由三部分组成：Model（模型）、View（视图）和ViewModel（视图模型）。在Android开发中，Model负责数据层，处理数据的获取、存储等逻辑；View是用户界面，负责展示数据和接收用户输入；而ViewModel则充当两者之间的桥梁，主要职责是维护视图状态，并处理用户界面逻辑。

1.2 MVVM架构模式的优势

使用MVVM模式开发Android应用的主要优势在于它能够更好地解耦界面逻辑和业务逻辑，从而提高应用的可测试性和可维护性。通过数据绑定，ViewModel与View可以实现自动更新，开发者无需编写冗长的更新UI的代码，从而可以将更多的精力集中在业务逻辑的实现上。此外，MVVM也使得应用架构更易于横向扩展，更适应大型项目的开发需求。

1.3 MVVM在Android中的实践

在Android平台上实践MVVM模式时，我们通常会结合其他库和工具，如LiveData、ViewModel、Data Binding等，来实现一个更加高效和响应式的应用。Data Binding库不仅能够帮助开发者在XML布局文件中直接绑定数据，还能响应数据的变化，自动更新UI，极大地方便了MVVM模式下的数据绑定和UI更新操作。

通过本章内容的介绍，读者应能对MVVM架构模式有一个初步的理解，并掌握它在Android应用开发中的基本应用方法。后续章节将进一步深入探讨Data Binding库，它在MVVM架构中的核心作用，以及如何通过高级技巧进一步提升Android应用的开发效率和性能。

2. Google Data Binding库的作用与优势

2.1 Data Binding库概述

2.1.1 Data Binding的历史背景

Data Binding库是Google在Android开发中推广的一种模式，可以将布局中的UI组件与应用程序中的数据进行绑定。Data Binding库的核心是减少UI层和业务逻辑层之间的胶水代码，同时让代码的维护更加容易。这种机制从Web前端技术就已经开始流行，而在Android平台上，Data Binding库首次提供了官方支持，使得我们可以利用声明式编程的方式实现复杂的视图更新逻辑。

Data Binding的出现，是Android应用开发进化的一部分，从最早的直接在Activity或Fragment中操作UI，到后来的MVP模式，再到MVVM模式。Data Binding库能够帮助开发者更好地遵循单一职责原则和关注点分离原则，从而写出更加清晰、简洁和可维护的代码。

2.1.2 Data Binding与传统方式的对比分析

在传统的Android开发中，UI组件和数据模型是完全分离的。开发者需要编写大量的代码来同步UI和数据状态，例如在数据更新时调用 findViewById ，然后再找到对应的 View ，最后进行 setText 或其他设置属性的操作。这种方式不仅代码冗长，而且容易出错，尤其是当视图层级较深时，查找和更新UI元素将变得更加困难。

使用Data Binding库，开发者可以将布局文件中的UI组件直接绑定到数据模型上。这样，当数据模型发生变化时，系统会自动更新UI组件，无需手动调用更新UI的代码，从而减少错误并提高开发效率。此外，Data Binding还支持使用表达式语言在布局文件中直接进行简单的逻辑处理，这让视图层的代码更加简洁和易于理解。

2.2 Data Binding库的主要优势

2.2.1 提高代码的可维护性和可读性

Data Binding库通过在布局XML文件中直接绑定数据，将UI逻辑与业务逻辑分离，使得数据的更新更加直观和简单。这种方式减少了对Activity或Fragment中 findViewById 和相关UI操作的依赖，使得整个代码结构更加清晰。

由于数据绑定在编译时就已经确定，开发者可以直接从布局文件中看到哪些数据与UI组件绑定，从而快速定位问题和理解数据流。这一点在大型项目中尤为明显，可以显著提高开发和维护效率。

2.2.2 简化UI更新流程，避免空指针异常

在没有Data Binding的环境下，更新UI时经常遇到的一个问题是空指针异常（NullPointerException）。因为开发者需要手动获取到View的实例，然后调用相关方法进行更新，这个过程中任何一个环节出错都可能导致异常的发生。

Data Binding通过数据绑定机制自动管理View的生命周期和状态，开发者只需要关注数据模型的更新。当数据变化时，Data Binding库会自动更新绑定的UI元素，从而极大地减少了空指针异常发生的概率。

2.2.3 增强编译时检查，减少运行时错误

使用Data Binding库后，很多UI逻辑的处理从运行时转移到了编译时。因为数据绑定关系在编译时就已经确定，这使得很多类型不匹配或者其他逻辑错误可以在编译阶段被捕捉和修复，而不是等到运行时出现。

例如，如果数据模型中有一个字符串字段和一个文本视图进行绑定，开发者在编写绑定表达式时，如果类型不匹配，编译器会直接报错，而不是等到运行时崩溃。这样的机制提高了代码的稳定性，并且提前暴露问题，降低了bug修复的成本。 

<layout xmlns:android="***">
   <data>
       <variable name="user" type="com.example.User"/>
   </data>
   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical">

       <TextView
           android:text="@{user.firstName}"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>

       <TextView
           android:text="@{user.lastName}"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>
   </LinearLayout>
</layout>

上面的XML布局示例中， user 对象的 firstName 和 lastName 属性分别绑定到两个 TextView 上。如果 user 对象的类型或字段名错误，编译器会立即提示错误信息。

通过这些优势，我们可以看出Data Binding库不仅仅是一种便捷的开发工具，更是提升代码质量、提高开发效率的有效手段。在接下来的章节中，我们将进一步探讨Data Binding库如何优化我们的开发流程，以及如何在实际项目中实现数据与UI的分离。

3. 数据与UI分离的MVVM核心思想

3.1 MVVM架构模式的基本原理

3.1.1 视图(View)、视图模型(ViewModel)、模型(Model)的角色与职责

MVVM架构模式将应用分为三个核心组件：视图(View)、视图模型(ViewModel)和模型(Model)，它们各自承担不同的角色与职责，相互之间通过数据绑定来实现通信。

  • 视图(View) ：是用户界面的可视化部分，负责展示数据和接收用户输入。在Android中，View通常指XML布局文件以及对应的Activity或Fragment。视图不包含任何业务逻辑，它只负责显示和交互。
  • 视图模型(ViewModel) ：充当View与Model之间的桥梁，用于封装UI逻辑。ViewModel包含视图的状态和命令逻辑，它通过数据绑定连接到视图，并持有业务逻辑，以保持视图的干净和简洁。当Model的数据发生变化时，ViewModel会通过数据绑定通知视图进行更新。
  • 模型(Model) ：代表应用的数据层，负责数据的持久化和业务逻辑。Model不依赖于视图，它处理数据的获取、存储和更新，并通过观察者模式通知ViewModel数据的改变。

3.1.2 数据绑定(data binding)在MVVM中的作用

数据绑定是MVVM模式中将视图层和数据层连接起来的关键技术。它允许开发者将界面元素直接绑定到数据源，当数据源发生变化时，绑定的UI元素会自动更新，而无需编写额外的更新代码。数据绑定在MVVM中的作用包括但不限于：

  • 自动化UI更新 ：通过数据绑定，UI元素如TextView、ImageView等可以直接与数据源属性关联，当数据源更新时，UI元素会立即反映这些变化，从而避免了手动更新UI的复杂性。

  • 减少样板代码 ：传统MVC或MVP模式中，控制器或Presenter需要编写大量代码来手动更新UI。数据绑定减少了这种样板代码，让开发者能更加专注于业务逻辑的实现。

  • 提高代码的可维护性 ：由于数据绑定逻辑更加明确，代码的可读性和可维护性得到了提升。同时，错误定位也更容易，因为数据绑定的问题通常直观地反映在界面上。

  • 加强编译时检查 ：数据绑定在编译时进行类型检查，这有助于及早发现错误，例如类型不匹配或缺失的字段等问题。

接下来，我们将探讨如何在MVVM架构模式中实现数据与UI的分离。

3.2 实现数据与UI分离的策略

3.2.1 观察者模式(Observer pattern)的运用

观察者模式是实现数据与UI分离的重要策略之一。在MVVM架构中，视图模型(ViewModel)通常作为观察者，视图(View)作为被观察者。当ViewModel中的数据发生变化时，观察者模式会确保所有依赖于该数据的视图部分能够得到更新通知，而无需直接调用视图的更新方法。

在Android中，Data Binding库通过双向数据绑定机制支持观察者模式，从而简化了数据变更的追踪和UI更新的操作。例如，可以使用LiveData配合ViewModel来实现观察者模式。LiveData是生命周期感知的数据持有类，能够确保UI只在活跃的生命周期内进行更新。

3.2.2 数据绑定与UI更新的自动化处理

在MVVM模式中，数据绑定与UI更新的自动化处理是提高效率、减少错误的关键。开发者不再需要手动编写更新UI的代码，而是通过数据绑定框架来自动完成这些任务。具体而言，这可以通过以下几个步骤实现：

  1. 定义数据模型 ：在ViewModel中定义数据模型，模型中的属性将与视图组件绑定。

  2. 绑定数据源 ：在XML布局文件中使用Data Binding表达式将UI组件与数据模型属性绑定。

  3. 更新数据模型 ：在ViewModel中当数据发生变化时，自动通过数据绑定框架通知UI组件进行更新。

使用数据绑定时，开发者应当注意避免在ViewModel中直接引用Android框架的类，以保持视图模型的可测试性和可重用性。

为了更深入理解这一过程，我们可以通过一个简单的实例来说明。例如，在一个用户界面中显示用户信息，我们可以创建一个UserViewModel类，其中包含用户信息的相关属性。然后在XML布局文件中，我们将TextView的文本属性绑定到ViewModel中的相应属性。当ViewModel中的属性发生变化时，由于数据绑定，UI将自动更新显示最新的用户信息。 

<!-- activity_user.xml -->
<layout xmlns:android="***"
        xmlns:app="***"
        xmlns:tools="***">
    <data>
        <variable
            name="userViewModel"
            type="com.example.UserViewModel" />
    </data>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{userViewModel.userName}" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{userViewModel.userEmail}" />
    </LinearLayout>
</layout>

// UserViewModel.java
public class UserViewModel extends ViewModel {
    private MutableLiveData<String> userName = new MutableLiveData<>();
    private MutableLiveData<String> userEmail = new MutableLiveData<>();

    public UserViewModel() {
        // 模拟数据的加载
        userName.setValue("John Doe");
        userEmail.setValue("john.***");
    }

    public LiveData<String> getUserName() {
        return userName;
    }

    public LiveData<String> getUserEmail() {
        return userEmail;
    }
}

在这个例子中，任何对userName或userEmail的更改都会通过LiveData通知到绑定的视图，并且UI将会相应地自动更新。通过这种方式，我们实现了数据的自动化更新，同时保持了ViewModel的逻辑清晰和易于测试。

总之，数据绑定在MVVM架构模式中扮演着至关重要的角色，它不仅简化了UI的更新流程，还提高了代码的可维护性和可读性。在下一节中，我们将探讨Data Binding库中的表达式语言与可观察对象Observable，以进一步深化对数据绑定技术的理解。

4. Data Binding库中的表达式语言与可观察对象Observable

4.1 Data Binding表达式语言基础

4.1.1 表达式语言的语法规则

Data Binding库中的表达式语言是一种用于在XML布局文件中声明绑定逻辑的简洁语法。它支持从视图模型(ViewModel)中直接绑定数据，并能响应数据的变化自动更新UI。表达式语言的语法规则旨在尽可能地保持简单和直观，同时提供必要的功能。

  • 变量访问 : 表达式可以访问布局的变量，这些变量是由ViewModel或者Activity中的字段提供。使用 @{} 来包围变量名，例如 @{user.name} 表示访问名为user的变量中的name属性。
  • 方法调用 : 在表达式内可以直接调用变量的方法，前提方法没有参数且是无副作用的。例如， @{user.capitalizeName()} 会调用user对象的capitalizeName方法。
  • 运算符 : 支持常见的逻辑运算符如 && 、 || 、 == 、 != 等，以及算术运算符 + 、 - 、 * 、 / 。
  • 字符串拼接 : 使用 + 可以拼接字符串，如 @{"Hello " + user.name} 。
  • 资源引用 : 可以直接引用Android资源，如 @{string/app_name} 。
  • 条件运算 : 利用 ?: 提供三元运算符支持，例如 @{user.isActive ? "Active" : "Inactive"} 。

4.1.2 表达式语言的应用场景及示例

表达式语言在Data Binding中的应用场景十分广泛，几乎涉及到数据与视图交互的各个方面。以下是一些常见的使用场景和相应的示例。

  • 显示数据 : 在TextView中显示一个变量值，可以直接在 android:text 属性中使用表达式语言： 
<TextView
    android:text="@{user.name}"
    ... />
  • 条件显示 : 根据数据模型的状态改变组件的可见性： 
<TextView
    android:visibility="@{user.isActive ? View.VISIBLE : View.GONE}"
    ... />
  • 数据绑定 : 将视图的某个属性与数据模型中的复杂对象绑定： 
<RatingBar
    android:rating="@{product.rating}"
    ... />
  • 事件监听 : 在视图中设置点击事件处理器： 
<Button
    android:onClick="@{() -> viewModel.submitOrder()}"
    ... />
  • 资源引用 : 使用资源文件中的字符串资源： 
<TextView
    android:text="@{string/hello_world}"
    ... />
  • 逻辑运算 : 利用表达式语言进行逻辑判断： 
<TextView
    android:visibility="@{(user.name != null && user.name.contains("admin")) ? View.VISIBLE : View.GONE}"
    ... />

4.2 Observable对象的使用方法

4.2.1 创建Observable对象的多种方式

在Data Binding库中，Observable对象是一个关键的组件，它允许UI组件监听数据模型的变化，并在数据更新时自动刷新界面。创建Observable对象有几种不同的方式，满足不同场景的需求。

  • 使用LiveData : LiveData 是一个可观察的生命周期感知组件，当它的数据发生变化时，会通知所有活跃的观察者。它适用于响应数据变化并更新UI的场景，例如： 
LiveData<String> nameLiveData = new MutableLiveData<>();
  • 使用ObservableFields : ObservableField 类是Data Binding库提供的一个便捷类，它自动处理数据变化的通知。例如，创建一个字符串类型的ObservableField： 
ObservableField<String> nameObservableField = new ObservableField<>("John Doe");
  • 使用ObservableArrays : 当需要监听数组或集合的变化时，可以使用 ObservableArrayMap 或 ObservableArrayList ，它们分别用于映射和列表： 
ObservableArrayMap<String, Object> map = new ObservableArrayMap<>();
map.put("name", "Alice");

ObservableArrayList<Object> list = new ObservableArrayList<>();
list.add("Hello");
  • 手动创建Observable : 如果库中没有提供合适的Observable类，也可以通过实现 Observable 接口来创建自定义的Observable对象。这要求实现 addObserver 、 removeObserver 和 setValue 等方法。

4.2.2 Observable对象与视图更新的联动机制

Observable对象与视图更新的联动机制是Data Binding框架的核心功能之一。当Observable对象的数据发生变化时，框架会自动触发UI的更新过程，无需手动刷新。

当Observable对象的值发生变化时，通过调用 setValue(T value) 方法来通知Data Binding系统，这将导致任何绑定到该数据的视图自动更新。例如，如果有一个TextView绑定了一个名为 userName 的 ObservableField<String> ，当调用 userName.setValue("New User") 后，TextView会立即显示更新后的字符串。

联动机制涉及的主要组件和步骤如下：

  1. 数据源的更新 : 当业务逻辑修改了数据模型中的Observable对象时，需要调用 setValue(T value) 方法来标记数据的变更。
  2. 数据绑定的刷新 : Data Binding系统会监听这些Observable对象的变化，一旦检测到数据变更，便触发一个内部的刷新流程。
  3. 视图的更新 : 绑定的视图组件会被自动更新为最新的数据值。

为了支持联动机制，Data Binding库提供了一个 DataBinderMapper 类用于映射布局中的变量ID到相应数据模型中的Observable对象。在编译时，Data Binding工具生成一个包含映射信息的类，这个过程使得运行时可以快速定位到数据模型中需要观察的数据。

这种方式极大地简化了Android开发中的数据同步问题，开发者无需手动编写刷新UI的代码，从而可以将更多的精力集中在业务逻辑和数据处理上。

5. Data Binding的高级应用与实例化过程

5.1 自定义 BindingAdapter 的实现

5.1.1 BindingAdapter的作用与定义方法

BindingAdapter 是Data Binding库中用于自定义属性绑定的注解。它允许开发者创建自定义的绑定逻辑，这样你就可以将属性值绑定到任何自定义视图属性上，或者为现有的属性创建新的绑定。通过使用BindingAdapter，可以避免在Activity或Fragment中编写样板式的代码。

要定义一个BindingAdapter，你需要在静态方法上使用这个注解，并指定要绑定的属性名。例如，如果你要绑定一个自定义视图的 customText 属性，你可以这样定义： 

@BindingAdapter("customText")
public static void setCustomText(YourCustomView view, String text) {
    view.setCustomText(text);
}

上述代码创建了一个名为 customText 的属性绑定，每当XML布局中出现 customText 属性时，都会调用 setCustomText 方法。

5.1.2 自定义数据绑定的高级应用案例

假设你有一个自定义的进度条控件，你想要为它添加一个名为 progressColor 的属性，通过这个属性可以改变进度条的颜色。你可以如下实现一个自定义BindingAdapter： 

@BindingAdapter("progressColor")
public static void setProgressColor(ProgressView view, @ColorInt int color) {
    view.setProgressColor(color);
}

然后在XML布局文件中，你就可以这样使用： 

<com.example.customviews.ProgressView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:progressColor="#FF0000"
    ... />

通过这种方式，你可以在布局文件中直接控制进度条颜色，而无需编写任何额外的Java或Kotlin代码。

5.2 XML布局文件中的数据绑定实现步骤

5.2.1 在XML布局中声明数据绑定

在布局文件中声明数据绑定非常简单。首先需要确保在项目的build.gradle文件中启用dataBinding： 

android {
    ...
    dataBinding {
        enabled = true
    }
}

启用后，你可以开始在布局文件中使用 <layout> 标签包裹根布局： 

<layout xmlns:android="***"
    xmlns:app="***">
    <data>
        <variable name="user" type="com.example.User"/>
    </data>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.firstName}"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"/>
        ...
    </LinearLayout>
</layout>

5.2.2 在Activity中实现数据的绑定与应用

在Activity中，你首先需要初始化绑定类，然后可以访问布局中的变量并设置数据： 

public class UserActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityUserBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_user);
        User user = new User("John", "Doe");
        binding.setUser(user);
    }
}

这段代码将 User 对象绑定到布局中声明的 user 变量上，之后在布局文件中使用 @{} 语法引用的属性会自动更新。

5.3 编译时与运行时的Data Binding处理

5.3.1 表达式库、Inherited Binding的作用

表达式库 是Data Binding库中的一个特性，它允许开发者在XML布局中编写表达式，这些表达式可以访问布局中的属性和变量。表达式库确保了这些表达式在编译时进行处理，而不是在运行时，这可以减少运行时错误并提高性能。

Inherited Binding 允许一个父布局将数据通过绑定传递给子视图，而不需要在每个子视图中重复设置相同的数据。这不仅减少了代码重复，而且提高了数据绑定的灵活性。

5.3.2 DataBindingUtil工具类的使用与优势

DataBindingUtil 工具类提供了一种简便的方式来访问和操作绑定类。例如，使用 DataBindingUtil.setContentView() 代替 setContentView() 可以确保布局被绑定。

优势包括：

  • 提升性能 ：通过编译时处理表达式，避免了运行时的反射。
  • 减少错误 ：编译时类型检查可以减少运行时的错误。
  • 提高代码可读性 ：自动生成的绑定类让数据绑定逻辑清晰，易于理解和维护。

5.4 实例化Activity与UI元素的数据绑定过程

5.4.1 Activity中数据绑定的初始化与管理

在Activity中初始化和管理数据绑定是确保应用性能和稳定性的重要部分。通过使用Data Binding，开发者可以避免在 onCreate 方法中处理大量的UI更新逻辑，而是通过声明性的方式在XML中完成。此外，数据绑定的生命周期与Activity的生命周期保持一致，这意味着当Activity被销毁时，数据绑定也会相应地被清理。

5.4.2 活学活用：一个简单的MVVM实例演示

假设我们有一个简单的用户界面，它显示用户的名字和姓氏，并有一个按钮用于更新名字。我们可以通过以下步骤来实现：

  1. 定义ViewModel： 
public class UserViewModel extends ViewModel {
    private MutableLiveData<String> firstName = new MutableLiveData<>();
    public LiveData<String> getFirstName() { return firstName; }

    public void updateName() {
        firstName.setValue("New First Name");
    }
}
  1. 布局文件中的绑定： 
<layout xmlns:android="***">
    <data>
        <variable name="userViewModel" type="com.example.UserViewModel"/>
    </data>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{userViewModel.firstName}"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="@{()->userViewModel.updateName()}"
            android:text="Update Name"/>
    </LinearLayout>
</layout>
  1. 在Activity中使用数据绑定和ViewModel： 
public class UserActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityUserBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_user);
        UserViewModel viewModel = ViewModelProviders.of(this).get(UserViewModel.class);
        binding.setUserViewModel(viewModel);
    }
}

通过这种方式，当按钮被点击时， updateName 方法会被触发，更新ViewModel中的 firstName ，然后由数据绑定自动更新UI。这显示了如何在实际案例中使用MVVM架构和Data Binding来简化代码和提高可维护性。

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：本实例展示了如何利用Google官方Data Binding库在Android应用中实现MVVM架构模式。通过Data Binding库，开发者能够简洁地将数据绑定到UI元素，从而提高代码的可读性和可维护性。实例中包括了MVVM架构的核心概念，以及如何使用表达式语言、Observable对象、BindingAdapter、Layout文件和DataBindingUtil等Data Binding库中的工具，实现双向数据绑定，以及如何通过简单的代码示例快速理解和实践Data Binding的用法。

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

猜你喜欢

目录

热门文章