意一ineyee
意一ineyee

【跨平台开发Flutter】Flutter里的MVVM

目录
一、最原始的MVVM
二、使用Listener的MVVM
三、使用Provider的MVVM
四、使用GetX的MVVM

需求很简单：

  • 搜索框输入“张”时就请求前缀为“张”的用户数据、同时也请求后缀为“张”的用户数据，搜索框输入“李”时就请求前缀为“李”的用户数据、同时也请求后缀为“李”的用户数据
  • 请求完成后，前缀数据交给上面的ListView显示，后缀数据交给下面的ListView显示


一、最原始的MVVM

  • Model层
-----------person_model.dart-----------

/*
 Model的职责：Model只负责封装数据，不做任何其它操作。
 */

/// Person模型
class PersonModel {
  /// 普通构造方法
  PersonModel({
    this.name,
    this.sex,
    this.age,
  });

  /// 姓名
  String? name;

  /// 性别
  ///
  /// 0-未知，1-男，2-女
  int? sex;

  /// 年龄
  int? age;

  /// 工厂构造方法
  factory PersonModel.fromJson(Map json) => PersonModel(
        name: json["name"] == null ? null : json["name"],
        sex: json["sex"] == null ? null : json["sex"],
        age: json["age"] == null ? null : json["age"],
      );

  /// 模型转字典
  Map toJson() => {
        "name": name == null ? null : name,
        "sex": sex == null ? null : sex,
        "age": age == null ? null : age,
      };
}
  • View层
-----------search_bar_widget.dart-----------

/*
 View的职责：View负责响应与业务有关的事件并交给Controller去处理，怎么交给Controller呢？通过闭包、通知等。
 */

import 'package:flutter/material.dart';

/// 搜索框Widget
class SearchBarWidget extends StatelessWidget {
  SearchBarWidget({
    this.searchTextDidChangeCallback,
  });

  /// 搜索内容改变的回调
  final void Function(String text)? searchTextDidChangeCallback;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: TextField(
        textInputAction: TextInputAction.done,
        onSubmitted: (text) {
          if (searchTextDidChangeCallback != null) {
            searchTextDidChangeCallback!(text);
          }
        },
      ),
    );
  }
}

-----------prefix_list_view_widget.dart-----------

/*
 View的职责：View负责显示数据，那怎么显示数据呢？View可以持有ViewModel。
 */

import 'package:flutter/material.dart';

import 'package:flutter_mvvm/classes/view_model/person_view_model.dart';

/// 前缀列表Widget
class PrefixListViewWidget extends StatelessWidget {
  PrefixListViewWidget({
    required this.personViewModel,
  });

  final PersonViewModel personViewModel;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: ListView.builder(
        itemCount: personViewModel.prefixPersonViewModelList.length,
        itemBuilder: (context, index) {
          PersonViewModel personVM =
              personViewModel.prefixPersonViewModelList[index];

          return Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text(personVM.name),
              Text(personVM.sex),
              Text("${personVM.age}"),
            ],
          );
        },
        itemExtent: 100,
      ),
    );
  }
}

-----------suffix_list_view_widget.dart-----------

/*
 View的职责：View负责显示数据，那怎么显示数据呢？View可以持有ViewModel。
 */

import 'package:flutter/material.dart';

import 'package:flutter_mvvm/classes/view_model/person_view_model.dart';

/// 后缀列表Widget
class SuffixListViewWidget extends StatelessWidget {
  SuffixListViewWidget({
    required this.personViewModel,
  });

  final PersonViewModel personViewModel;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: ListView.builder(
        itemCount: personViewModel.suffixPersonViewModelList.length,
        itemBuilder: (context, index) {
          PersonViewModel personVM =
              personViewModel.suffixPersonViewModelList[index];

          return Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text(personVM.name),
              Text(personVM.sex),
              Text("${personVM.age}"),
            ],
          );
        },
        itemExtent: 100,
      ),
    );
  }
}
  • ViewModel层
-----------base_view_model.dart-----------

import 'package:flutter/cupertino.dart';

enum ViewState {
  loading, // 加载中
  success, // 加载成功
  empty, // 加载成功，但数据为空
  failure, // 加载失败
  noNetwork, // 没网
}

class BaseViewModel extends ChangeNotifier {
  ViewState _state = ViewState.success;

  ViewState get state => _state;

  set state(ViewState value) {
    _state = value;
    notifyListeners();
  }
}

-----------person_view_model.dart-----------

/*
 ViewModel的职责：
  1、ViewModel负责获取数据；
  2、ViewModel负责处理数据；
  3、ViewModel负责存储数据。
 */

import 'dart:convert';

import 'package:flutter/services.dart';

import 'package:flutter_mvvm/classes/model/person_model.dart';
import 'package:flutter_mvvm/classes/view_model/base_view_model.dart';

/// Person视图模型
class PersonViewModel extends BaseViewModel {
  // 命名构造方法，专门用来初始化_personModel
  PersonViewModel._from(PersonModel? personModel) {
    _personModel = personModel;
  }

  // 持有一个_personModel，以便处理数据：ViewModel一对一Model地添加属性并处理，搞成getter方法即可
  PersonModel? _personModel;

  /// 普通构造方法
  PersonViewModel();

  /// 存储数据：vm数组
  ///
  /// 真正暴露给外面使用的是vm数组，里面的数据已经处理好了，直接拿着显示就行了
  List prefixPersonViewModelList = [];
  List suffixPersonViewModelList = [];

  /// 存储数据：错误消息
  String errorMsg = "";

  /// 处理数据：姓名
  String get name {
    return _personModel?.name ?? "";
  }

  /// 处理数据：性别
  ///
  /// 0-未知，1-男，2-女
  String get sex {
    if (_personModel?.sex == 1) {
      return "男";
    } else if (_personModel?.sex == 2) {
      return "女";
    } else {
      return "未知";
    }
  }

  /// 处理数据：年龄
  int get age {
    return _personModel?.age ?? 0;
  }

  /// 请求前缀数据
  Future loadPrefixData(
      String params, void Function(bool isSuccess) completionHandler) async {
    await Future.delayed(Duration(seconds: 1));

    try {
      String path = "lib/assets/json/${params}_prefix.json";

      String jsonString = await rootBundle.loadString(path);
      List list = jsonDecode(jsonString);

      prefixPersonViewModelList.clear();
      for (Map map in list) {
        PersonModel personModel = PersonModel.fromJson(map);
        PersonViewModel personViewModel = PersonViewModel._from(personModel);
        prefixPersonViewModelList.add(personViewModel);
      }

      state = ViewState.success;
      completionHandler(true);
    } catch (error) {
      errorMsg = error.toString();

      state = ViewState.failure;
      completionHandler(false);
    }
  }

  /// 请求后缀数据
  Future loadSuffixData(
      String params, void Function(bool isSuccess) completionHandler) async {
    await Future.delayed(Duration(seconds: 2));

    try {
      String path = "lib/assets/json/${params}_suffix.json";

      String jsonString = await rootBundle.loadString(path);
      List list = jsonDecode(jsonString);

      suffixPersonViewModelList.clear();
      for (Map map in list) {
        PersonModel personModel = PersonModel.fromJson(map);
        PersonViewModel personViewModel = PersonViewModel._from(personModel);
        suffixPersonViewModelList.add(personViewModel);
      }

      state = ViewState.success;
      completionHandler(true);
    } catch (error) {
      errorMsg = error.toString();

      state = ViewState.failure;
      completionHandler(false);
    }
  }
}
  • Controller层
-----------list_page.dart-----------

/*
 Controller的职责：
  1、Controller负责持有View，创建View，并把View添加到窗口上显示；
  2、Controller负责持有ViewModel，调用ViewModel的方法去请求数据；
  3、vm --> view：Controller调用vm的方法请求数据，请求完成后vm是通过回调的方式告诉Controller的：
    请求成功后Controller需要调用一下setState来刷一下UI，这样view就会去拿vm里最新存储的数据来展示了
    请求失败后Controller可以toast一下错误信息给用户看，或者调用一下setState来刷一下UI，刷成暂无数据那种view
  4、view --> vm：view产生的变化是通过回调告诉Controller的，Controller可以调用vm的方法把view发生的变化告诉它
 */

import 'package:flutter/material.dart';

import 'package:flutter_mvvm/classes/widget/search_bar_widget.dart';
import 'package:flutter_mvvm/classes/widget/prefix_list_view_widget.dart';
import 'package:flutter_mvvm/classes/widget/suffix_list_view_widget.dart';
import 'package:flutter_mvvm/classes/view_model/person_view_model.dart';

/// 列表界面
class ListPage extends StatefulWidget {
  const ListPage({Key? key}) : super(key: key);

  @override
  State createState() => _ListPageState();
}

class _ListPageState extends State {
  PersonViewModel _personViewModel = PersonViewModel();

  @override
  Widget build(BuildContext context) {
    print("build");

    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter MVVM"),
      ),
      body: SafeArea(
        child: Column(
          children: [
            _buildSearchBarWidget(),
            Expanded(
              child: _buildPrefixListViewWidget(),
            ),
            Expanded(
              child: _buildSuffixListViewWidget(),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSearchBarWidget() {
    print("_buildSearchBarWidget");

    return Container(
      color: Colors.red,
      child: SearchBarWidget(
        searchTextDidChangeCallback: (text) {
          _personViewModel.loadPrefixData(text, (isSuccess) {
            if (mounted) {
              // 注意要判断一下当前界面还在不在视图树中，因为请求都是异步的，很有可能请求还没完成我们就退出界面了，退出界面时我们什么都不做即可
              if (isSuccess) {
                setState(() {});
              } else {
                print(_personViewModel.errorMsg);
              }
            }
          });

          _personViewModel.loadSuffixData(text, (isSuccess) {
            if (mounted) {
              // 注意要判断一下当前界面还在不在视图树中，因为请求都是异步的，很有可能请求还没完成我们就退出界面了，退出界面时我们什么都不做即可
              if (isSuccess) {
                setState(() {});
              } else {
                print(_personViewModel.errorMsg);
              }
            }
          });
        },
      ),
    );
  }

  Widget _buildPrefixListViewWidget() {
    print("_buildPrefixListViewWidget");

    return PrefixListViewWidget(
      personViewModel: _personViewModel,
    );
  }

  Widget _buildSuffixListViewWidget() {
    print("_buildPrefixListViewWidget");

    return SuffixListViewWidget(
      personViewModel: _personViewModel,
    );
  }
}


二、使用Listener的MVVM

相对于最原始的MVVM来说，它的变化其实就是【Controller调用vm的方法请求数据，请求完成后vm通过什么方式告诉Controller，之前是通过回调的方式，现在是通过Listener的方式】。

它的优势就是【界面退出时假如我们的请求还没走完，会自动移除监听】，也就是说就算网络请求完了也不会再触发Controller里的监听了，我们压根儿不需要关心这个界面在不在视图树里，只需要做业务即可。【它的劣势就是因为所有的业务都会触发同一个监听而使得代码判断起来复杂了，之前起码是一个业务一个回调、各管各的】，它给人感觉上好像是在数据驱动UI，但其实并不是，因为这里并不存在数据和UI的绑定操作，本质上还是数据变化后、我们手动刷新UI来展示最新的数据。

因此相对于最原始的MVVM来说，更推荐最原始的MVVM。

  • Model层和View层都不需要改动
  • ViewModel层
-----------base_view_model.dart-----------

import 'package:flutter/cupertino.dart';

enum ViewState {
  loading, // 加载中
  success, // 加载成功
  empty, // 加载成功，但数据为空
  failure, // 加载失败
  noNetwork, // 没网
}

class BaseViewModel extends ChangeNotifier {
  ViewState _state = ViewState.success;

  ViewState get state => _state;

  set state(ViewState value) {
    _state = value;
    notifyListeners();
  }
}

-----------person_view_model.dart-----------

/*
 ViewModel的职责：
  1、ViewModel负责获取数据；
  2、ViewModel负责处理数据；
  3、ViewModel负责存储数据。
 */

import 'dart:convert';

import 'package:flutter/services.dart';

import 'package:flutter_mvvm/classes/model/person_model.dart';
import 'package:flutter_mvvm/classes/view_model/base_view_model.dart';

/// PersonViewModel里所做的业务
class PersonViewModelService {
  static const String loadPrefixData = "loadPrefixData";
  static const String loadSuffixData = "loadSuffixData";
}

/// PersonViewModel里所做业务的结果
class PersonViewModelServiceResult {
  PersonViewModelServiceResult({
    required this.service,
    required this.isSuccess,
  });

  /// 具体是哪个业务
  String service;

  /// 结果
  bool isSuccess;
}

/// Person视图模型
///
/// 要想使用Listener，PersonViewModel得继承自或者混入ChangeNotifier
class PersonViewModel extends BaseViewModel {
  late PersonViewModelServiceResult serviceResult;

  // 命名构造方法，专门用来初始化_personModel
  PersonViewModel._from(PersonModel? personModel) {
    _personModel = personModel;
  }

  // 持有一个_personModel，以便处理数据：ViewModel一对一Model地添加属性并处理，搞成getter方法即可
  PersonModel? _personModel;

  /// 普通构造方法
  PersonViewModel();

  /// 存储数据：vm数组
  ///
  /// 真正暴露给外面使用的是vm数组，里面的数据已经处理好了，直接拿着显示就行了
  List prefixPersonViewModelList = [];
  List suffixPersonViewModelList = [];

  /// 存储数据：错误消息
  String errorMsg = "";

  /// 处理数据：姓名
  String get name {
    return _personModel?.name ?? "";
  }

  /// 处理数据：性别
  ///
  /// 0-未知，1-男，2-女
  String get sex {
    if (_personModel?.sex == 1) {
      return "男";
    } else if (_personModel?.sex == 2) {
      return "女";
    } else {
      return "未知";
    }
  }

  /// 处理数据：年龄
  int get age {
    return _personModel?.age ?? 0;
  }

  /// 请求前缀数据
  ///
  /// 请求完成后，本来是通过回调告诉Controller的，现在不要回调了，通过Listener告诉Controller
  Future loadPrefixData(String params) async {
    await Future.delayed(Duration(seconds: 1));

    try {
      String path = "lib/assets/json/${params}_prefix.json";

      String jsonString = await rootBundle.loadString(path);
      List list = jsonDecode(jsonString);

      prefixPersonViewModelList.clear();
      for (Map map in list) {
        PersonModel personModel = PersonModel.fromJson(map);
        PersonViewModel personViewModel = PersonViewModel._from(personModel);
        prefixPersonViewModelList.add(personViewModel);
      }

      state = ViewState.success;
      serviceResult = PersonViewModelServiceResult(
          service: PersonViewModelService.loadPrefixData, isSuccess: true);
      notifyListeners();
    } catch (error) {
      errorMsg = error.toString();

      state = ViewState.failure;
      serviceResult = PersonViewModelServiceResult(
          service: PersonViewModelService.loadPrefixData, isSuccess: false);
      notifyListeners();
    }
  }

  /// 请求后缀数据
  ///
  /// 请求完成后，本来是通过回调告诉Controller的，现在不要回调了，通过Listener告诉Controller
  Future loadSuffixData(String params) async {
    await Future.delayed(Duration(seconds: 2));

    try {
      String path = "lib/assets/json/${params}_suffix.json";

      String jsonString = await rootBundle.loadString(path);
      List list = jsonDecode(jsonString);

      suffixPersonViewModelList.clear();
      for (Map map in list) {
        PersonModel personModel = PersonModel.fromJson(map);
        PersonViewModel personViewModel = PersonViewModel._from(personModel);
        suffixPersonViewModelList.add(personViewModel);
      }

      state = ViewState.success;
      serviceResult = PersonViewModelServiceResult(
          service: PersonViewModelService.loadSuffixData, isSuccess: true);
      notifyListeners();
    } catch (error) {
      errorMsg = error.toString();

      state = ViewState.failure;
      serviceResult = PersonViewModelServiceResult(
          service: PersonViewModelService.loadSuffixData, isSuccess: false);
      notifyListeners();
    }
  }
}
  • Controller层
-----------list_page.dart-----------

/*
 Controller的职责：
  1、Controller负责持有View，创建View，并把View添加到窗口上显示；
  2、Controller负责持有ViewModel，调用ViewModel的方法去请求数据；
  3、vm --> view：Controller调用vm的方法请求数据，请求完成后vm是通过Listener而非回调的方式告诉Controller的：
    请求成功后Controller需要调用一下setState来刷一下UI，这样view就会去拿vm里最新存储的数据来展示了
    请求失败后Controller可以toast一下错误信息给用户看，或者调用一下setState来刷一下UI，刷成暂无数据那种view
  4、view --> vm：view产生的变化是通过回调告诉Controller的，Controller可以调用vm的方法把view发生的变化告诉它
 */

import 'package:flutter/material.dart';

import 'package:flutter_mvvm/classes/widget/search_bar_widget.dart';
import 'package:flutter_mvvm/classes/widget/prefix_list_view_widget.dart';
import 'package:flutter_mvvm/classes/widget/suffix_list_view_widget.dart';
import 'package:flutter_mvvm/classes/view_model/person_view_model.dart';

/// 列表界面
class ListPage extends StatefulWidget {
  const ListPage({Key? key}) : super(key: key);

  @override
  State createState() => _ListPageState();
}

class _ListPageState extends State {
  PersonViewModel _personViewModel = PersonViewModel();

  @override
  void initState() {
    // 第一步：_personViewModel添加监听
    //
    // 它里面任何时候、任何地方发出notifyListeners，都会触发这里添加好的监听
    // 那它里面什么时候、什么地方发出notifyListeners呢？当然就是请求完成的时候，在请求完成的回调里发出
    // 当然因为它内部可能会做多个业务，如果多个业务都发出了notifyListeners，则都会触发这里的同一个回调，因此我们会在它里面添加一个类来区分到底是哪个业务完成了，以便在监听里处理不同的业务
    _personViewModel.addListener(_personViewModelListener);

    super.initState();
  }

  // 第二步：_personViewModel处理监听
  void _personViewModelListener() {
    if (_personViewModel.serviceResult.service ==
        PersonViewModelService.loadPrefixData) {
      if (_personViewModel.serviceResult.isSuccess) {
        setState(() {});
      } else {
        print(_personViewModel.errorMsg);
      }
    } else if (_personViewModel.serviceResult.service ==
        PersonViewModelService.loadSuffixData) {
      if (_personViewModel.serviceResult.isSuccess) {
        setState(() {});
      } else {
        print(_personViewModel.errorMsg);
      }
    }
  }

  @override
  void dispose() {
    // 第三步：_personViewModel移除监听
    _personViewModel.removeListener(_personViewModelListener);

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    print("build");

    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter MVVM"),
      ),
      body: SafeArea(
        child: Column(
          children: [
            _buildSearchBarWidget(),
            Expanded(
              child: _buildPrefixListViewWidget(),
            ),
            Expanded(
              child: _buildSuffixListViewWidget(),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSearchBarWidget() {
    print("_buildSearchBarWidget");

    return SearchBarWidget(
      searchTextDidChangeCallback: (text) {
        _personViewModel.loadPrefixData(text);
        _personViewModel.loadSuffixData(text);
      },
    );
  }

  Widget _buildPrefixListViewWidget() {
    print("_buildPrefixListViewWidget");

    return PrefixListViewWidget(
      personViewModel: _personViewModel,
    );
  }

  Widget _buildSuffixListViewWidget() {
    print("_buildSuffixListViewWidget");

    return SuffixListViewWidget(
      personViewModel: _personViewModel,
    );
  }
}


三、使用Provider的MVVM

首先我们要明白Provider这个框架的首要功能是数据共享，所以我们这里使用Provider的首要目的就是用它来共享_personViewModel这个数据，因为我们的ListPage、PrefixListViewWidget和SuffixListViewWidget都使用到了同一个_personViewModel，当然我们的例子可能比较简单，【实际开发中你的一个界面里可能会由很多很多个Widget组成，而它们可能都需要使用同一个viewModel，甚至多个界面之间也需要使用同一个viewModel，那最原始的写法就是像最原始的MVVM里那样通过指针传递viewModel来共享，而Provider则提供了另外一种共享数据的方式——只要一堆Widget拥有同一个Provider作为父视图，那么这些Widget就都可以共享这个Provider绑定的viewModel数据】，这就是它相对于最原始MVVM的第一个变化，这个变化主要解决了viewModel传来传去的问题。（如果你只想一个界面内的多个Widget共享数据，那么这多个Widget的父视图就必须得是这个Provider，所以你可以把Provider包在这个界面上即可；如果你想多个界面之间共享数据，那么这多个界面的父视图就必须得是这个Provider，因此这个时候我们会把Provider包在App的最底层）

实现了上面的内容之后其实已经完成了Provider数据共享的功能，【但是我们会发现使用Provider时，它要求我们的ViewModel必须继承自或混入ChangeNotifier，这是因为Provider的第二个功能就是局部刷新，也就是说我们只需要在ViewModel里合适的时机、合适的地方发出一个notifyListeners，Provider就会自动触发它Consumer或Selector的回调来只刷新局部UI来展示最新的数据、当然我们也可以在些回调里Toast错误消息等。同时我们也只需要在ViewModel里发notifyListeners就行了，也不用像使用Listener那样考虑到底是什么业务完成了而做一堆判断，Controller里也没有什么监听，因为各个监听已经分散到了各个Consumer或Selector回调那里】，这就是它相对于最原始MVVM的第二个变化，这个变化主要解决了ViewModel怎么把变化告诉Controller的问题。

【它的优势就是更加简单的数据共享方式 + 响应式编程数据驱动UI。】【它的劣势就是Provider框架的侵入性太强了，而且代码编写起来有点费劲。】

因此相对于最原始的MVVM来说，你有余力的话可以学学Provider并应用在你的MVVM中。

  • App最底层
-----------main.dart-----------

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'package:flutter_mvvm/classes/page/list_page.dart';
import 'package:flutter_mvvm/classes/view_model/person_view_model.dart';

void main() {
  // 第一步：创建数据存放地，也就是我们想共享的view_model———即person_view_model.dart
  // 第二步：在App的最底层外再包一层ChangeNotifierProvider，并把我们需要共享的view_model传给ChangeNotifierProvider的create属性
  runApp(ChangeNotifierProvider(
    create: (ctx) => PersonViewModel(),
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ListPage(),
    );
  }
}
  • Model层不需要改动
  • ViewModel层
-----------base_view_model.dart-----------

import 'package:flutter/cupertino.dart';

enum ViewState {
  loading, // 加载中
  success, // 加载成功
  empty, // 加载成功，但数据为空
  failure, // 加载失败
  noNetwork, // 没网
}

class BaseViewModel extends ChangeNotifier {
  ViewState _state = ViewState.success;

  ViewState get state => _state;

  set state(ViewState value) {
    _state = value;
    notifyListeners();
  }
}

-----------person_view_model.dart-----------

/*
 ViewModel的职责：
  1、ViewModel负责获取数据；
  2、ViewModel负责处理数据；
  3、ViewModel负责存储数据。
 */

import 'dart:convert';

import 'package:flutter/services.dart';

import 'package:flutter_mvvm/classes/model/person_model.dart';
import 'package:flutter_mvvm/classes/view_model/base_view_model.dart';

/// Person视图模型
///
/// 【变化一】：要想使用Provider，PersonViewModel得继承自或者混入ChangeNotifier
class PersonViewModel extends BaseViewModel {
  // 命名构造方法，专门用来初始化_personModel
  PersonViewModel._from(PersonModel? personModel) {
    _personModel = personModel;
  }

  // 持有一个_personModel，以便处理数据：ViewModel一对一Model地添加属性并处理，搞成getter方法即可
  PersonModel? _personModel;

  /// 普通构造方法
  PersonViewModel();

  /// 存储数据：vm数组
  ///
  /// 真正暴露给外面使用的是vm数组，里面的数据已经处理好了，直接拿着显示就行了
  List prefixPersonViewModelList = [];
  List suffixPersonViewModelList = [];

  /// 存储数据：错误消息
  String errorMsg = "";

  /// 处理数据：姓名
  String get name {
    return _personModel?.name ?? "";
  }

  /// 处理数据：性别
  ///
  /// 0-未知，1-男，2-女
  String get sex {
    if (_personModel?.sex == 1) {
      return "男";
    } else if (_personModel?.sex == 2) {
      return "女";
    } else {
      return "未知";
    }
  }

  /// 处理数据：年龄
  int get age {
    return _personModel?.age ?? 0;
  }

  /// 请求前缀数据
  Future loadPrefixData(String params) async {
    await Future.delayed(Duration(seconds: 1));

    try {
      String path = "lib/assets/json/${params}_prefix.json";

      String jsonString = await rootBundle.loadString(path);
      List list = jsonDecode(jsonString);

      prefixPersonViewModelList.clear();
      for (Map map in list) {
        PersonModel personModel = PersonModel.fromJson(map);
        PersonViewModel personViewModel = PersonViewModel._from(personModel);
        prefixPersonViewModelList.add(personViewModel);
      }

      //【变化二】
      state = ViewState.success;
    } catch (error) {
      errorMsg = error.toString();

      //【变化二】
      state = ViewState.failure;
    }
  }

  /// 请求后缀数据
  Future loadSuffixData(String params) async {
    await Future.delayed(Duration(seconds: 2));

    try {
      String path = "lib/assets/json/${params}_suffix.json";

      String jsonString = await rootBundle.loadString(path);
      List list = jsonDecode(jsonString);

      suffixPersonViewModelList.clear();
      for (Map map in list) {
        PersonModel personModel = PersonModel.fromJson(map);
        PersonViewModel personViewModel = PersonViewModel._from(personModel);
        suffixPersonViewModelList.add(personViewModel);
      }

      //【变化二】
      state = ViewState.success;
    } catch (error) {
      errorMsg = error.toString();

      //【变化二】
      state = ViewState.failure;
    }
  }
}
  • View层
-----------prefix_list_view_widget.dart-----------

/*
 View的职责：View负责显示数据，那怎么显示数据呢？View可以持有ViewModel。
 */

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'package:flutter_mvvm/classes/view_model/person_view_model.dart';

/// 前缀列表Widget
class PrefixListViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("【PrefixListViewWidget】---build");

    return Container(
      color: Colors.green,
      // 第三步（get的情况）：在需要使用共享数据的Widget外包一层Consumer或者Selector来使用共享数据，需要get共享数据的地方使用Consumer
      // Consumer是个泛型，泛的型就是问要使用哪个viewModel里的数据，填进去即可
      child: Consumer(
        // Consumer有一个必添属性builder，接收一个函数作为属性值，该函数的第二个参数就是共享数据存放地
        // 当数据发生变化时，就会触发这个builder函数来刷新Widget，所以我们在这个函数里返回原始的Widget，从而达到Widget包裹Consumer的目的
        builder: (context, personViewModel, child) {
          print("【PrefixListViewWidget】------Consumer");

          return ListView.builder(
            itemCount: personViewModel.prefixPersonViewModelList.length,
            itemBuilder: (context, index) {
              PersonViewModel personVM =
                  personViewModel.prefixPersonViewModelList[index];

              return Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Text(personVM.name),
                  Text(personVM.sex),
                  Text("${personVM.age}"),
                ],
              );
            },
            itemExtent: 100,
          );
        },
      ),
    );
  }
}

-----------suffix_list_view_widget.dart-----------

/*
 View的职责：View负责显示数据，那怎么显示数据呢？View可以持有ViewModel。
 */

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'package:flutter_mvvm/classes/view_model/person_view_model.dart';

/// 后缀列表Widget
class SuffixListViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("【PrefixListViewWidget】---build");

    return Container(
      color: Colors.blue,
      // 第三步（get的情况）：在需要使用共享数据的Widget外包一层Consumer或者Selector来使用共享数据，需要get共享数据的地方使用Consumer
      // Consumer是个泛型，泛的型就是问要使用哪个viewModel里的数据，填进去即可
      child: Consumer(
        // Consumer有一个必添属性builder，接收一个函数作为属性值，该函数的第二个参数就是共享数据存放地
        // 当数据发生变化时，就会触发这个builder函数来刷新Widget，所以我们在这个函数里返回原始的Widget，从而达到Widget包裹Consumer的目的
        builder: (context, personViewModel, child) {
          print("【SuffixListViewWidget】------Consumer");

          return ListView.builder(
            itemCount: personViewModel.suffixPersonViewModelList.length,
            itemBuilder: (context, index) {
              PersonViewModel personVM =
                  personViewModel.suffixPersonViewModelList[index];

              return Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Text(personVM.name),
                  Text(personVM.sex),
                  Text("${personVM.age}"),
                ],
              );
            },
            itemExtent: 100,
          );
        },
      ),
    );
  }
}
  • Controller层
-----------list_page.dart-----------

/*
 Controller的职责：
  1、Controller负责持有View，创建View，并把View添加到窗口上显示；
  2、Controller负责持有ViewModel，调用ViewModel的方法去请求数据；
  3、vm --> view：Controller调用vm的方法请求数据，请求完成后vm是通过回调的方式告诉Controller的：
    请求成功后Controller需要调用一下setState来刷一下UI，这样view就会去拿vm里最新存储的数据来展示了
    请求失败后Controller可以toast一下错误信息给用户看，或者调用一下setState来刷一下UI，刷成暂无数据那种view
  4、view --> vm：view产生的变化是通过回调告诉Controller的，Controller可以调用vm的方法把view发生的变化告诉它
 */

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:fluttertoast/fluttertoast.dart';

import 'package:flutter_mvvm/classes/widget/search_bar_widget.dart';
import 'package:flutter_mvvm/classes/widget/prefix_list_view_widget.dart';
import 'package:flutter_mvvm/classes/widget/suffix_list_view_widget.dart';
import 'package:flutter_mvvm/classes/view_model/base_view_model.dart';
import 'package:flutter_mvvm/classes/view_model/person_view_model.dart';

/// 列表界面
class ListPage extends StatefulWidget {
  const ListPage({Key? key}) : super(key: key);

  @override
  State createState() => _ListPageState();
}

class _ListPageState extends State {
  @override
  Widget build(BuildContext context) {
    print("build");

    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter MVVM"),
      ),
      body: SafeArea(
        child: Column(
          children: [
            _buildSearchBarWidget(),
            Expanded(
              child: _buildTwoListViewWidget(),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSearchBarWidget() {
    print("_buildSearchBarWidget");

    // 第三步（set的情况）：在需要使用共享数据的Widget外包一层Consumer或者Selector来使用共享数据，需要set共享数据的地方使用Selector
    // Selector是个泛型，而且还泛了两个型，第一个泛的型是问要使用哪个viewModel里的数据，填进去即可，第二个泛的型是转换之后的数据类型，比如我这里转换之后依然是使用PersonViewModel，那么我们填一样的类型即可（大多数情况都不需要转吧）
    return Selector(
      // Selector有一个必添属性selector，接收一个函数作为属性值，该函数的第二个参数就是共享数据存放地
      // 该函数用来指定Selector的两个泛型之间如何进行数据转换，这里我们不转换，所以返回原先的personViewModel
      // 如果转换后，则下面builder函数真正渲染Widget时的第二个参数就是转换后的ViewModel了，不转换的话builder函数的第二个参数就是原始的ViewModel
      selector: (ctx, personViewModel) {
        return personViewModel;
      },
      // Selector有一个必添属性builder，接收一个函数作为属性值，该函数的第二个参数就是共享数据存放地
      // 当数据发生变化时，就会触发这个builder函数来刷新Widget，所以我们在这个函数里返回原始的Widget，从而达到Widget包裹Selector的目的
      builder: (context, personViewModel, child) {
        print("_buildSearchBarWidget---Selector");

        return Container(
          color: Colors.red,
          child: SearchBarWidget(
            searchTextDidChangeCallback: (text) {
              personViewModel.loadPrefixData(text);
              personViewModel.loadSuffixData(text);
            },
          ),
        );
      },
      // 当共享数据发生变化时，是否执行builder方法重新构建Widget，我们可以设定为 return pre = next，不一样时才刷新，一样就不刷新
      // 但是因为本次案例里是仅仅set共享数据，不需要get变化后的共享数据来刷新Widget的情况，所以这种情况我们总是返回false就ok
      shouldRebuild: (prev, next) {
        return false;
      },
    );
  }

  Widget _buildTwoListViewWidget() {
    return Consumer(
        builder: (context, personViewModel, child) {
      switch (personViewModel.state) {
        case ViewState.success:
          return Column(
            children: [
              Expanded(
                child: _buildPrefixListViewWidget(),
              ),
              Expanded(
                child: _buildSuffixListViewWidget(),
              ),
            ],
          );
        default:
          Fluttertoast.showToast(
            msg: personViewModel.errorMsg,
            gravity: ToastGravity.CENTER,
          );

          return Center(
            child: Text("${personViewModel.errorMsg}"),
          );
      }
    });
  }

  Widget _buildPrefixListViewWidget() {
    print("_buildPrefixListViewWidget");

    return PrefixListViewWidget();
  }

  Widget _buildSuffixListViewWidget() {
    print("_buildPrefixListViewWidget");

    return SuffixListViewWidget();
  }
}


四、使用GetX的MVVM

GetX支持响应式编程，使用它可以非常简单地实现数据驱动UI的效果，只需要两步：一在ViewModel里把外界想监听的数据通过.obs搞成Observable，二在外界想使用数据的地方通过Obx(() => Widget)包裹真正的Widget搞成Observer，这样就可以数据驱动UI了，这就是它相对于最原始MVVM的第一个变化，这个变化主要解决了ViewModel怎么把变化告诉Controller的问题。

GetX也支持数据共享，也只需要两步：一在Controller里本来创建_viewModel的地方Get.put一下，二完事就可以在任何想使用_viewModel的地方Get.find到它来使用了，这就是它相对于最原始MVVM的第二个变化，这个变化主要解决了viewModel传来传去的问题。

【它的优势就是非常简单地响应式编程数据驱动UI + 非常简单得数据共享方式，比RxDart简单地多。】【它的劣势就是GetX框架的侵入性太强了。】

因此相对于最原始的MVVM来说，你有余力的话可以学学GetX并应用在你的MVVM中；相对于使用Provider的MVVM来说，则强烈推荐使用GetX，它的使用简直太简单了。

当然GetX还提供了很多其它的功能，如相对于系统自带的Navigator更加简单地路由管理、App国际化等，可以根据自己的情况选择使用。

  • Model层不需要改动
  • ViewModel层
-----------base_view_model.dart-----------

import 'package:get/get.dart';

enum ViewState {
  loading, // 加载中
  success, // 加载成功
  empty, // 加载成功，但数据为空
  failure, // 加载失败
  noNetwork, // 没网
}

class BaseViewModel extends GetxController {
  Rx state = ViewState.success.obs;
}

-----------person_view_model.dart-----------

/*
 ViewModel的职责：
  1、ViewModel负责获取数据；
  2、ViewModel负责处理数据；
  3、ViewModel负责存储数据。
 */

import 'dart:convert';

import 'package:flutter/services.dart';

import 'package:flutter_mvvm/classes/model/person_model.dart';
import 'package:flutter_mvvm/classes/view_model/base_view_model.dart';

/// Person视图模型
class PersonViewModel extends BaseViewModel {
  // 命名构造方法，专门用来初始化_personModel
  PersonViewModel._from(PersonModel? personModel) {
    _personModel = personModel;
  }

  // 持有一个_personModel，以便处理数据：ViewModel一对一Model地添加属性并处理，搞成getter方法即可
  PersonModel? _personModel;

  /// 普通构造方法
  PersonViewModel();

  /// 存储数据：vm数组
  ///
  /// 真正暴露给外面使用的是vm数组，里面的数据已经处理好了，直接拿着显示就行了
  List prefixPersonViewModelList = [];
  List suffixPersonViewModelList = [];

  /// 存储数据：错误消息
  String errorMsg = "";

  /// 处理数据：姓名
  String get name {
    return _personModel?.name ?? "";
  }

  /// 处理数据：性别
  ///
  /// 0-未知，1-男，2-女
  String get sex {
    if (_personModel?.sex == 1) {
      return "男";
    } else if (_personModel?.sex == 2) {
      return "女";
    } else {
      return "未知";
    }
  }

  /// 处理数据：年龄
  int get age {
    return _personModel?.age ?? 0;
  }

  /// 请求前缀数据
  Future loadPrefixData(String params) async {
    await Future.delayed(Duration(seconds: 1));

    try {
      String path = "lib/assets/json/${params}_prefix.json";

      String jsonString = await rootBundle.loadString(path);
      List list = jsonDecode(jsonString);

      prefixPersonViewModelList.clear();
      for (Map map in list) {
        PersonModel personModel = PersonModel.fromJson(map);
        PersonViewModel personViewModel = PersonViewModel._from(personModel);
        prefixPersonViewModelList.add(personViewModel);
      }

      loadSuffixData(params);
    } catch (error) {
      errorMsg = error.toString();

      state.value = ViewState.failure;
    }
  }

  /// 请求后缀数据
  Future loadSuffixData(String params) async {
    await Future.delayed(Duration(seconds: 2));

    try {
      String path = "lib/assets/json/${params}_suffix.json";

      String jsonString = await rootBundle.loadString(path);
      List list = jsonDecode(jsonString);

      suffixPersonViewModelList.clear();
      for (Map map in list) {
        PersonModel personModel = PersonModel.fromJson(map);
        PersonViewModel personViewModel = PersonViewModel._from(personModel);
        suffixPersonViewModelList.add(personViewModel);
      }

      state.value = ViewState.success;
    } catch (error) {
      errorMsg = error.toString();

      state.value = ViewState.failure;
    }
  }
}
  • View层
-----------prefix_list_view_widget.dart-----------

/*
 View的职责：View负责显示数据，那怎么显示数据呢？View可以持有ViewModel。
 */

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'package:flutter_mvvm/classes/view_model/base_view_model.dart';
import 'package:flutter_mvvm/classes/view_model/person_view_model.dart';

/// 前缀列表Widget
class PrefixListViewWidget extends StatelessWidget {
  final _personViewModel = Get.find();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Obx(
        () {
          print("---PrefixListViewWidget---");

          if (_personViewModel.state.value == ViewState.failure) {
            print(_personViewModel.errorMsg);

            return Center(
              child: Text("${_personViewModel.errorMsg})"),
            );
          } else {
            return ListView.builder(
              itemCount: _personViewModel.prefixPersonViewModelList.length,
              itemBuilder: (context, index) {
                PersonViewModel personVM =
                _personViewModel.prefixPersonViewModelList[index];

                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Text(personVM.name),
                    Text(personVM.sex),
                    Text("${personVM.age}"),
                  ],
                );
              },
              itemExtent: 100,
            );
          }
        },
      ),
    );
  }
}

-----------suffix_list_view_widget.dart-----------

/*
 View的职责：View负责显示数据，那怎么显示数据呢？View可以持有ViewModel。
 */

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'package:flutter_mvvm/classes/view_model/base_view_model.dart';
import 'package:flutter_mvvm/classes/view_model/person_view_model.dart';

/// 后缀列表Widget
class SuffixListViewWidget extends StatelessWidget {
  final _personViewModel = Get.find();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Obx(() {
        print("---SuffixListViewWidget---");

        if (_personViewModel.state.value == ViewState.failure) {
          print(_personViewModel.errorMsg);

          return Center(
            child: Text("${_personViewModel.errorMsg})"),
          );
        } else {
          return ListView.builder(
            itemCount: _personViewModel.suffixPersonViewModelList.length,
            itemBuilder: (context, index) {
              PersonViewModel personVM =
                  _personViewModel.suffixPersonViewModelList[index];

              return Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Text(personVM.name),
                  Text(personVM.sex),
                  Text("${personVM.age}"),
                ],
              );
            },
            itemExtent: 100,
          );
        }
      }),
    );
  }
}
  • Controller层
-----------list_page.dart-----------

/*
 Controller的职责：
  1、Controller负责持有View，创建View，并把View添加到窗口上显示；
  2、Controller负责持有ViewModel，调用ViewModel的方法去请求数据；
  3、vm --> view：Controller调用vm的方法请求数据，请求完成后vm是通过回调的方式告诉Controller的：
    请求成功后Controller需要调用一下setState来刷一下UI，这样view就会去拿vm里最新存储的数据来展示了
    请求失败后Controller可以toast一下错误信息给用户看，或者调用一下setState来刷一下UI，刷成暂无数据那种view
  4、view --> vm：view产生的变化是通过回调告诉Controller的，Controller可以调用vm的方法把view发生的变化告诉它
 */

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'package:flutter_mvvm/classes/widget/search_bar_widget.dart';
import 'package:flutter_mvvm/classes/widget/prefix_list_view_widget.dart';
import 'package:flutter_mvvm/classes/widget/suffix_list_view_widget.dart';
import 'package:flutter_mvvm/classes/view_model/person_view_model.dart';

/// 列表界面
class ListPage extends StatelessWidget {
  final _personViewModel = Get.put(PersonViewModel());

  @override
  Widget build(BuildContext context) {
    print("build");

    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter MVVM"),
      ),
      body: SafeArea(
        child: Column(
          children: [
            _buildSearchBarWidget(),
            Expanded(
              child: _buildPrefixListViewWidget(),
            ),
            Expanded(
              child: _buildSuffixListViewWidget(),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSearchBarWidget() {
    print("_buildSearchBarWidget");

    return Container(
      color: Colors.red,
      child: SearchBarWidget(
        searchTextDidChangeCallback: (text) {
          _personViewModel.loadPrefixData(text);
        },
      ),
    );
  }

  Widget _buildPrefixListViewWidget() {
    print("_buildPrefixListViewWidget");

    return PrefixListViewWidget();
  }

  Widget _buildSuffixListViewWidget() {
    print("_buildPrefixListViewWidget");

    return SuffixListViewWidget();
  }
}

你可能感兴趣的:(【跨平台开发Flutter】Flutter里的MVVM)

  • 斤斤计较的婚姻到底有多难？ 白心之岂必有为
    很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
  • 情绪觉察日记第37天 露露_e800
    今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
  • 芦花鞋一四 许叶晗
    又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
  • QQ群采集助手，精准引流必备神器 2401_87347160 其他经验分享
    功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
  • 关于沟通这件事，项目经理不需要每次都面对面进行 流程大师兄
    很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
  • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
  • 铭刻于星（四十二） 随风至
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
  • 底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说 造命者说
    底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
  • 2020-01-25 晴岚85
    郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
  • 随笔 | 仙一般的灵气 海思沧海
    仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
  • 想家 爆米花机
    也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
  • 【iOS】MVC设计模式 Magnetic_h iosmvc设计模式objective-c学习ui
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
  • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
  • 一百九十四章. 自相矛盾 巨木擎天
    唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • 10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
    本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
  • C语言宏函数 南林yan C语言c语言
    一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
  • 地推话术，如何应对地推过程中家长的拒绝 校师学
    相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业
  • 谢谢你们，爱你们！ 鹿游儿
    昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
  • C语言如何定义宏函数？ 小九格物 c语言
    在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
  • 微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务java架构
    在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
  • 理解Gunicorn：Python WSGI服务器的基石 范范0825 ipythonlinux运维
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
  • 小丽成长记（四十三） 玲玲54321
    小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习
  • 学点心理知识，呵护孩子健康 静候花开_7090
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
  • 2021年12月19日，春蕾教育集团团建活动感受——黄晓丹 黄错错加油
    感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
  • Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断 尐尐呅
    结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序
  • c++ 的iostream 和 c++的stdio的区别和联系 黄卷青灯77 c++算法开发语言iostreamstdio
    在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
  • 瑶池防线 谜影梦蝶
    冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而
  • 爬山后遗症 璃绛
    爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！
  • 二分查找排序算法 周凡杨 java二分查找排序算法折半
    一：概念 二分查找又称 折半查找（ 折半搜索/ 二分搜索），优点是比较次数少，查找速度快，平均性能好；其缺点是要求待查表为有序表，且插入删除困难。因此，折半查找方法适用于不经常变动而 查找频繁的有序列表。首先，假设表中元素是按升序排列，将表中间位置记录的关键字与查找关键字比较，如果两者相等，则查找成功；否则利用中间位置记录将表 分成前、后两个子表，如果中间位置记录的关键字大于查找关键字，则进一步
  • java中的BigDecimal bijian1013 javaBigDecimal
            在项目开发过程中出现精度丢失问题，查资料用BigDecimal解决，并发现如下这篇BigDecimal的解决问题的思路和方法很值得学习，特转载。         原文地址：http://blog.csdn.net/ugg/article/de
  • Shell echo命令详解 daizj echoshell
    Shell echo命令 Shell 的 echo 指令与 PHP 的 echo 指令类似，都是用于字符串的输出。命令格式： echo string 您可以使用echo实现更复杂的输出格式控制。 1.显示普通字符串: echo "It is a test" 这里的双引号完全可以省略，以下命令与上面实例效果一致： echo Itis a test 2.显示转义
  • Oracle DBA 简单操作 周凡杨 oracle dba sql
    --执行次数多的SQL select sql_text,executions from (      select sql_text,executions from v$sqlarea order by executions desc      ) where rownum<81;  &nb
  • 画图重绘 朱辉辉33 游戏
      我第一次接触重绘是编写五子棋小游戏的时候，因为游戏里的棋盘是用线绘制的，而这些东西并不在系统自带的重绘里，所以在移动窗体时，棋盘并不会重绘出来。所以我们要重写系统的重绘方法。   在重写系统重绘方法时，我们要注意一定要调用父类的重绘方法，即加上super.paint(g)，因为如果不调用父类的重绘方式，重写后会把父类的重绘覆盖掉，而父类的重绘方法是绘制画布，这样就导致我们
  • 线程之初体验 西蜀石兰 线程
    一直觉得多线程是学Java的一个分水岭，懂多线程才算入门。 之前看《编程思想》的多线程章节，看的云里雾里，知道线程类有哪几个方法，却依旧不知道线程到底是什么？书上都写线程是进程的模块，共享线程的资源，可是这跟多线程编程有毛线的关系，呜呜。。。 线程其实也是用户自定义的任务，不要过多的强调线程的属性，而忽略了线程最基本的属性。 你可以在线程类的run()方法中定义自己的任务，就跟正常的Ja
  • linux集群互相免登陆配置 林鹤霄 linux
    配置ssh免登陆 1、生成秘钥和公钥    ssh-keygen -t rsa 2、提示让你输入，什么都不输，三次回车之后会在~下面的.ssh文件夹中多出两个文件id_rsa 和 id_rsa.pub    其中id_rsa为秘钥，id_rsa.pub为公钥，使用公钥加密的数据只有私钥才能对这些数据解密    c
  • mysql : Lock wait timeout exceeded; try restarting transaction aigo mysql
    原文：http://www.cnblogs.com/freeliver54/archive/2010/09/30/1839042.html   原因是你使用的InnoDB   表类型的时候, 默认参数:innodb_lock_wait_timeout设置锁等待的时间是50s, 因为有的锁等待超过了这个时间,所以抱错.   你可以把这个时间加长,或者优化存储
  • Socket编程 基本的聊天实现。 alleni123 socket
    public class Server { //用来存储所有连接上来的客户 private List<ServerThread> clients; public static void main(String[] args) { Server s = new Server(); s.startServer(9988); } publi
  • 多线程监听器事件模式(一个简单的例子) 百合不是茶 线程监听模式
        多线程的事件监听器模式   监听器时间模式经常与多线程使用,在多线程中如何知道我的线程正在执行那什么内容,可以通过时间监听器模式得到        创建多线程的事件监听器模式 思路:    1, 创建线程并启动,在创建线程的位置设置一个标记     2,创建队
  • spring InitializingBean接口 bijian1013 javaspring
    spring的事务的TransactionTemplate，其源码如下： public class TransactionTemplate extends DefaultTransactionDefinition implements TransactionOperations, InitializingBean{ ... } TransactionTemplate继承了DefaultT
  • Oracle中询表的权限被授予给了哪些用户 bijian1013 oracle数据库权限
            Oracle查询表将权限赋给了哪些用户的SQL，以备查用。 select t.table_name as "表名", t.grantee as "被授权的属组", t.owner as "对象所在的属组"
  • 【Struts2五】Struts2 参数传值 bit1129 struts2
    Struts2中参数传值的3种情况 1.请求参数绑定到Action的实例字段上 2.Action将值传递到转发的视图上 3.Action将值传递到重定向的视图上   一、请求参数绑定到Action的实例字段上以及Action将值传递到转发的视图上 Struts可以自动将请求URL中的请求参数或者表单提交的参数绑定到Action定义的实例字段上，绑定的规则使用ognl表达式语言
  • 【Kafka十四】关于auto.offset.reset[Q/A] bit1129 kafka
    I got serveral questions about  auto.offset.reset. This configuration parameter governs how  consumer read the message from  Kafka when  there is no initial offset in ZooKeeper or
  • nginx gzip压缩配置 ronin47 nginx gzip 压缩范例
    nginx gzip压缩配置 更多 0 nginx gzip 配置   随着nginx的发展，越来越多的网站使用nginx，因此nginx的优化变得越来越重要，今天我们来看看nginx的gzip压缩到底是怎么压缩的呢？ gzip(GNU-ZIP)是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用
  • java-13.输入一个单向链表，输出该链表中倒数第 k 个节点 bylijinnan java
    two cursors. Make the first cursor go K steps first. /* * 第 13 题：题目：输入一个单向链表，输出该链表中倒数第 k 个节点 */ public void displayKthItemsBackWard(ListNode head,int k){ ListNode p1=head,p2=head;
  • Spring源码学习-JdbcTemplate queryForObject bylijinnan javaspring
    JdbcTemplate中有两个可能会混淆的queryForObject方法： 1. Object queryForObject(String sql, Object[] args, Class requiredType) 2. Object queryForObject(String sql, Object[] args, RowMapper rowMapper) 第1个方法是只查
  • [冰川时代]在冰川时代,我们需要什么样的技术? comsci 技术
         看美国那边的气候情况....我有个感觉...是不是要进入小冰期了?      那么在小冰期里面...我们的户外活动肯定会出现很多问题...在室内呆着的情况会非常多...怎么在室内呆着而不发闷...怎么用最低的电力保证室内的温度.....这都需要技术手段...   &nb
  • js 获取浏览器型号 cuityang js浏览器
    根据浏览器获取iphone和apk的下载地址 <!DOCTYPE html> <html> <head>     <meta charset="utf-8" content="text/html"/>     <meta name=
  • C# socks5详解 转 dalan_123 socketC#
    http://www.cnblogs.com/zhujiechang/archive/2008/10/21/1316308.html  这里主要讲的是用.NET实现基于Socket5下面的代理协议进行客户端的通讯，Socket4的实现是类似的，注意的事，这里不是讲用C#实现一个代理服务器，因为实现一个代理服务器需要实现很多协议，头大，而且现在市面上有很多现成的代理服务器用，性能又好，
  • 运维 Centos问题汇总 dcj3sjt126com 云主机
    一、sh 脚本不执行的原因 sh脚本不执行的原因 只有2个 1.权限不够 2.sh脚本里路径没写完整。   二、解决You have new mail in /var/spool/mail/root 修改/usr/share/logwatch/default.conf/logwatch.conf配置文件 MailTo = MailFrom   三、查询连接数
  • Yii防注入攻击笔记 dcj3sjt126com sqlWEB安全yii
    网站表单有注入漏洞须对所有用户输入的内容进行个过滤和检查，可以使用正则表达式或者直接输入字符判断，大部分是只允许输入字母和数字的，其它字符度不允许；对于内容复杂表单的内容，应该对html和script的符号进行转义替换：尤其是<,>,',"",&这几个符号 这里有个转义对照表： http://blog.csdn.net/xinzhu1990/articl
  • MongoDB简介[一] eksliang mongodbMongoDB简介
    MongoDB简介 转载请出自出处：http://eksliang.iteye.com/blog/2173288 1.1易于使用        MongoDB是一个面向文档的数据库，而不是关系型数据库。与关系型数据库相比，面向文档的数据库不再有行的概念，取而代之的是更为灵活的“文档”模型。        另外，不
  • zookeeper windows 入门安装和测试 greemranqq zookeeper安装分布式
    一、序言       以下是我对zookeeper 的一些理解：      zookeeper 作为一个服务注册信息存储的管理工具，好吧，这样说得很抽象，我们举个“栗子”。       栗子1号：       假设我是一家KTV的老板，我同时拥有5家KTV，我肯定得时刻监视
  • Spring之使用事务缘由(2-注解实现) ihuning spring
      Spring事务注解实现   1. 依赖包：     1.1 spring包：           spring-beans-4.0.0.RELEASE.jar           spring-context-4.0.0.
  • iOS App Launch Option 啸笑天 option
    iOS 程序启动时总会调用application:didFinishLaunchingWithOptions:，其中第二个参数launchOptions为NSDictionary类型的对象，里面存储有此程序启动的原因。   launchOptions中的可能键值见UIApplication Class Reference的Launch Options Keys节 。 1、若用户直接
  • jdk与jre的区别（_） macroli javajvmjdk
    简单的说JDK是面向开发人员使用的SDK，它提供了Java的开发环境和运行环境。SDK是Software Development Kit 一般指软件开发包，可以包括函数库、编译程序等。  JDK就是Java Development Kit JRE是Java Runtime Enviroment是指Java的运行环境，是面向Java程序的使用者，而不是开发者。 如果安装了JDK，会发同你
  • Updates were rejected because the tip of your current branch is behind qiaolevip 学习永无止境每天进步一点点众观千象git
    $ git push joe prod-2295-1 To [email protected]:joe.le/dr-frontend.git ! [rejected] prod-2295-1 -> prod-2295-1 (non-fast-forward) error: failed to push some refs to '[email protected]
  • [一起学Hive]之十四-Hive的元数据表结构详解 superlxw1234 hivehive元数据结构
    关键字：Hive元数据、Hive元数据表结构   之前在 “[一起学Hive]之一–Hive概述，Hive是什么”中介绍过，Hive自己维护了一套元数据，用户通过HQL查询时候，Hive首先需要结合元数据，将HQL翻译成MapReduce去执行。 本文介绍一下Hive元数据中重要的一些表结构及用途，以Hive0.13为例。   文章最后面，会以一个示例来全面了解一下，
  • Spring 3.2.14，4.1.7，4.2.RC2发布 wiselyman Spring 3
      Spring 3.2.14、4.1.7及4.2.RC2于6月30日发布。   其中Spring 3.2.1是一个维护版本(维护周期到2016-12-31截止)，后续会继续根据需求和bug发布维护版本。此时，Spring官方强烈建议升级Spring框架至4.1.7 或者将要发布的4.2 。   其中Spring 4.1.7主要包含这些更新内容。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他