我在一个文件中写了很多代码我想将它转移到另一个文件并且仍然可以在 flutter 中顺利工作。可能吗？

Question

我有一个 ModalBottomSheet，我在里面写了很多代码 + 我的屏幕显示了一些其他小部件。问题：单个页面上有很多代码。 GOAL:I想把写在ModalBottomSheet中的代码分离到另外一个页面，还是像之前那样使用

Answer 1

是的，您可以——而且应该——将任何可重复使用的小部件提取到它自己的小部件中。检查 this article.

Answer 2

Miguel Ruivo 提到的文章对分离 UI 代码（widgets）很有帮助。

但是，您还应该将逻辑与 UI 分开。我相信您在小部件代码中有一些逻辑。我更喜欢使用屏幕代表视图的 MVVM 架构，每个视图都有自己的视图模型来管理所有逻辑。

我建议您查看 stacked package 及其教程。使用它会节省很多时间。

这是一个使用 BaseViewModel 的堆叠架构的非常简单和基本的示例。要拥有干净的文件夹结构，请创建主目录，并在其中创建两个文件：home_view.dart 和 home_view_model.dart

home_view.dart

import 'package:flutter/material.dart';
import 'package:sample_stacked_app/home/home_view_model.dart';
import 'package:stacked/stacked.dart';

class HomeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ViewModelBuilder<HomeViewModel>.reactive(
        onModelReady: (model) async => await model.initialise(),
        viewModelBuilder: () => HomeViewModel(),
        builder: (context, model, child) => Scaffold(
          appBar: AppBar(
            title: Text('Home View'),
            centerTitle: true,
          ),
          floatingActionButton: FloatingActionButton(
            child: Icon(
              Icons.swipe
            ),
            onPressed: () async {
              /*if(!hasError){
                setError('This is an error');
                notifyListeners();
              }else{
                setError(null);
                notifyListeners();
              }*/
              ///instead of writing all above code inside this view, move it to view model
              model.handleFloatingButtonPressed();
            },
          ),
          body: model.hasError // If model has error, show error message
              ? _buildErrorMessage(model.modelError.toString())
              : model.isBusy // If model is busy, show loading indicator
                  ? Center(child: _buildProgressBar())
                  : Center(
                    child: Container(
                        color: Colors.teal,
                        height: 100,
                        width: 100,
                      ),
                  ),
        ),
      ),
    );
  }

  Widget _buildErrorMessage(String errorMessage) {
    return Center(
      child: Text(errorMessage),
    );
  }

  Widget _buildProgressBar() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Center(
          child: CircularProgressIndicator(
            backgroundColor: Colors.red,
          ),
        ),
        SizedBox(height: 5.0,),
        Center(
          child: Text('Loading please wait...'),
        ),
      ],
    );
  }
}

home_view_model.dart

这里的 HomeViewModel class 扩展了 BaseViewModel。请阅读 docs 了解堆叠库中可用的视图模型以及如何使用它们。

import 'package:stacked/stacked.dart';

class HomeViewModel extends BaseViewModel{
  /// Called on view model initialisation
  Future<void> initialise() async{
    /// Sets isBusy to true
    setBusy(true);
    await getDataFromApi();
    setBusy(false);
  }

  void handleFloatingButtonPressed(){
    // Here you can write any code/logic
    if(!hasError){
      /// Set error
      setError('There is an error!');
      /// notifyListeners() updates the ui when called. It is like setState()
      notifyListeners();
    }else{
      /// Remove error
      setError(null);
      notifyListeners();
    }
  }

  getDataFromApi() async{
    // Get data from api
    await Future.delayed(Duration(seconds: 4), () {
      // Do something
    });
  }

}

我在一个文件中写了很多代码我想将它转移到另一个文件并且仍然可以在 flutter 中顺利工作。可能吗？

I have written a lot of code in one file I want to transfer it to another file and still work smoothly in flutter. Is it possible?

refactoring

dart

flutter