我是波动代码的新手,它的小部件树对我来说很陌生,现在我想编码为一种最佳方法,例如将逻辑和小部件分开,所以我这样做了,但我不知道它的正确性和普通的还是最好的
我已经创建了文件夹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(),
)
],
),
);
}
}
答案 0 :(得分:2)
您的方法是正确的。我曾经创建以下文件夹:
屏幕
实用程序
数据
组件
模型
每个组件内部都有多个文件夹,但是我必须警告您一些事情。 不要做所有事情 有些组件您将使用它一次,不要为一个窗口小部件使用一个文件!
答案 1 :(得分:1)
与许多其他编程语言一样,将代码分为多个文件是一个更好的选择,因为您可以更好地控制所做的事情。 尽管业余爱好者常用的方法是将所有代码写在几个文件中,然后在代码中丢失,但是拥有多个文件更好,更专业。