颤振编码的最佳方法是什么

时间:2019-11-06 09:05:23

标签: flutter

我是波动代码的新手,它的小部件树对我来说很陌生,现在我想编码为一种最佳方法,例如将逻辑和小部件分开,所以我这样做了,但我不知道它的正确性和普通的还是最好的

我已经创建了文件夹screens/[has all screens] 嵌套为每个屏幕文件夹创建,像这样screens/upload/[has all files belong to this screen] 在里面我创建3个文件 screens/upload/upload_screen.dart screens/upload/upload_widgets.dart screens/upload/upload_logic.dart

上传屏幕

    class UploadScreen extends StatefulWidget {
  @override
  _UploadScreenState createState() => _UploadScreenState();
}

class _UploadScreenState extends State<UploadScreen> {
UploadWidgets uploadWidgets;

  @override
  Widget build(BuildContext context) {

     uploadWidgets = UploadWidgets(context);

    return ChangeNotifierProvider.value(
      value: UploadLogic(context),
      child: Consumer<UploadLogic>(
        builder: (context, logic, _){
          print(logic.chosenFile);
        return Scaffold(
          body:  logic.chosenFile == null ? uploadWidgets.buildInitContent() : Text('hello')
        );
        }
      ),
    );
  }
}

上传逻辑

import 'dart:io';

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

class UploadLogic with ChangeNotifier {
  BuildContext context;
  File chosenFile;
  UploadLogic(this.context);

  Future<void> pickupImageFromCameraApp() async {
    final File imageFile = await ImagePicker.pickImage(
      source: ImageSource.camera,
      imageQuality: 95,
      maxWidth: 600,
    );

    chosenFile = imageFile;
    notifyListeners();
  }
}

上传小部件

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import './upload_logic.dart';

class UploadWidgets {
  BuildContext context;
  UploadLogic uploadLogic;
  UploadWidgets(this.context) {
    uploadLogic = UploadLogic(context);
  }

  void showChoodeBottomModal() {
    showModalBottomSheet(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10), topRight: Radius.circular(10))),
        context: context,
        builder: (context) {
          return Container(
            height: 200,
            child: ListView(
              children: <Widget>[
                ListTile(
                  title: Text('From Cameara'),
                  subtitle: Text('Take your photo from your camer app'),
                  leading: Icon(Icons.camera),
                  onTap: ()=>uploadLogic.pickupImageFromCameraApp(),
                ),
                ListTile(
                  title: Text('From Gallary'),
                  subtitle: Text('choose your image from your gallary app'),
                  leading: Icon(Icons.photo_album),
                  onTap: () {},
                ),
                ListTile(
                  title: Text('From Cameara'),
                  leading: Icon(Icons.exit_to_app),
                  onTap: () => Navigator.of(context).pop(),
                ),
              ],
            ),
          );
        });
  }

  Widget buildInitContent() {
    return Container(
      color: Theme.of(context).accentColor,
      width: double.infinity,
      padding: EdgeInsets.all(10),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SvgPicture.asset(
            'assets/images/upload.svg',
            height: 300,
          ),
          SizedBox(
            height: 20,
          ),
          Text(
            'Upload A new image',
            style: TextStyle(fontSize: 30),
          ),
          SizedBox(
            height: 20,
          ),
          RaisedButton.icon(
            color: Theme.of(context).primaryColor,
            icon: Icon(
              Icons.file_upload,
              color: Colors.white,
            ),
            label: Text(
              'Choose a file',
              style: TextStyle(color: Colors.white),
            ),
            onPressed: () => showChoodeBottomModal(),
          )
        ],
      ),
    );
  }
}

2 个答案:

答案 0 :(得分:2)

您的方法是正确的。我曾经创建以下文件夹:

  1. 屏幕

  2. 实用程序

  3. 数据

  4. 组件

  5. 模型

每个组件内部都有多个文件夹,但是我必须警告您一些事情。 不要做所有事情 有些组件您将使用它一次,不要为一个窗口小部件使用一个文件!

答案 1 :(得分:1)

与许多其他编程语言一样,将代码分为多个文件是一个更好的选择,因为您可以更好地控制所做的事情。 尽管业余爱好者常用的方法是将所有代码写在几个文件中,然后在代码中丢失,但是拥有多个文件更好,更专业。