【Flutter&Dart】MVVM(Model-View-ViewModel)架构模式例子-http版本(30 /100)

动图更精彩

MVVM(Model-View-ViewModel)

特点

Model:负责数据管理和业务逻辑。

View:负责显示数据,通常是一个UI组件。

ViewModel:负责处理用户交互,更新Model,并将数据转换为View可以显示的格式。

适用场景

大型项目:适合大型项目,因为ViewModel可以很好地管理视图和模型之间的交互。

需要高可维护性和可扩展性的项目:ViewModel可以独立于View进行单元测试,提高代码的可维护性和可扩展性。

优缺点

优点:

ViewModel可以独立于View进行单元测试,提高测试覆盖率。

适合大型项目,结构清晰,易于维护和扩展。

与Flutter的StatefulWidget和StatelessWidget结合得很好。

缺点:

需要更多的代码来定义ViewModel和数据绑定。

代码结构相对复杂,新手上手可能需要一些时间。

推荐架构:MVVM

结构比起mvc的确难了不少,不过本就是中大型项目。只能硬头皮上了。

也不一定非要说mvvm。mvc,mvp等等按实际需要进行实际使用即可。不过练手用mvvm会提高熟悉度。

代码如下:

model 也放一起了,其实没有用到,只是为了符合结构。

ViewModel 如下:

dart 复制代码
import 'dart:convert';

import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;
import 'package:logger/logger.dart';


class ResponseResult {
  late int code;
  late String data;

  ResponseResult({required this.code, required this.data});

  factory ResponseResult.fromJson(Map<String, dynamic> json) {
    return ResponseResult(
      code: json['code'],
      data: json['data'],
    );
  }
}

class ApiModel extends ChangeNotifier {
  ResponseResult? _responseResult;
  ResponseResult? get responseResult => _responseResult;
  bool _isLoading = false;
  bool get isLoading => _isLoading;
  String _result = '';
  String get result => _result;

  Future<void> fetchHttp() async {
    _isLoading = true;
    notifyListeners();

    var url = 'https://api.apiopen.top/api/sentences';
    // url = 'https://cn.bing.com/';
    final response = await http.get(Uri.parse(url));

    if (response.statusCode == 200) {
      _result = response.body;
    } else {
      throw Exception('Failed to load user');
    }
    _isLoading = false;
    notifyListeners();
  }

  
}

view 如下:

dart 复制代码
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:smart_api/smartApi/model/api_model.dart';

class ApiDemo extends StatelessWidget {
  const ApiDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => ApiModel(),
      child: ApiView(),
    );
  }
}

class ApiView extends StatelessWidget {
  const ApiView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ApiView'),
      ),
      body: Consumer<ApiModel>(builder: (context, viewModel, child) {
        if (viewModel.isLoading) {
          return Center(
            child: CircularProgressIndicator(),
          );
        } else {
          return Text(viewModel.result);
        }
      }),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read<ApiModel>().fetchHttp();
        },
        child: Icon(Icons.send),
      ),
    );
  }
}

刚开始使用,的确不太友好,很多业务逻辑都不是很清晰,还需要再拆细致一些才能刚好理解

SmartApi开始折腾业务数据了,离原型版本又近一步了...

相关推荐
隆里卡那唔1 小时前
在dify中通过http请求neo4j时为什么需要将localhost变为host.docker.internal
http·docker·neo4j
雨白2 小时前
Jetpack系列(二):Lifecycle与LiveData结合,打造响应式UI
android·android jetpack
9527华安2 小时前
FPGA实现40G网卡NIC,基于PCIE4C+40G/50G Ethernet subsystem架构,提供工程源码和技术支持
fpga开发·架构·网卡·ethernet·nic·40g·pcie4c
~山有木兮2 小时前
LiteHub中间件之限流实现
网络·http·中间件
kk爱闹3 小时前
【挑战14天学完python和pytorch】- day01
android·pytorch·python
游戏开发爱好者83 小时前
iOS App首次启动请求异常调试:一次冷启动链路抓包与初始化流程修复
websocket·网络协议·tcp/ip·http·网络安全·https·udp
2501_915106323 小时前
频繁迭代下完成iOS App应用上架App Store:一次快速交付项目的完整回顾
websocket·网络协议·tcp/ip·http·网络安全·https·udp
每次的天空5 小时前
Android-自定义View的实战学习总结
android·学习·kotlin·音视频
恋猫de小郭6 小时前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
断剑重铸之日6 小时前
Android自定义相机开发(类似OCR扫描相机)
android