Flutter 项目实战 架构模式四

在Flutter项目中，我们可以使用MVVM架构模式来构建我们的应用程序。以下是一个简化的示例，展示了如何在Flutter中实现MVVM模式。

首先，我们需要创建一个Model类：

class UserModel {
  String name;
  String email;
 
  UserModel({required this.name, required this.email});
}

然后，我们创建一个ViewModel类，它负责处理应用程序的业务逻辑：

class UserViewModel {
  final UserModel _userModel;
 
  UserViewModel(this._userModel);
 
  void updateUserInfo(String name, String email) {
    // 更新用户信息的逻辑
  }
}

最后，我们创建一个StatefulWidget，它负责处理UI的渲染和用户交互：

class UserProfilePage extends StatefulWidget {
  @override
  _UserProfilePageState createState() => _UserProfilePageState();
}
 
class _UserProfilePageState extends State<UserProfilePage> {
  final UserViewModel _userViewModel = UserViewModel(UserModel(name: "John Doe", email: "johndoe@example.com"));
 
  TextEditingController _nameController = TextEditingController();
  TextEditingController _emailController = TextEditingController();
 
  @override
  void initState() {
    super.initState();
    _nameController.text = _userViewModel._userModel.name;
    _emailController.text = _userViewModel._userModel.email;
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Profile'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _nameController,
              decoration: InputDecoration(hintText: 'Name'),
              onSubmitted: (value) {
                _userViewModel.updateUserInfo(_nameController.text, _emailController.text);
              },
            ),
            TextField(
              controller: _emailController,
              decoration: InputDecoration(hintText: 'Email'),
              onSubmitted: (value) {
                _userViewModel.updateUserInfo(_nameController.text, _emailController.text);
              },
            ),
            // 其他UI组件
          ],
        ),
      ),
      // 其他部分
    );
  }
 
  @override
  void dispose() {
    _nameController.dispose();
    _emailController.dispose();
    super.dispose();
  }
}

在这个例子中，我们创建了一个UserProfilePage，它负责处理用户界面的渲染和用户交互。它通过ViewModel来管理用户数据，并在需要时更新用户界面。这样的分层架构使得代码更加模块化，易于维护和测试。