B站视频
https://www.bilibili.com/video/BV1Pp4y1C7hx
1 本节目标
- 代码规范
- 业务代码组织
- 首页代码编写
2 代码规范
2.1 官方代码规范
https://dart.dev/guides/language/effective-dart
2.3 chrome 插件 <彩云小译 - 网页翻译插件>
https://chrome.google.com/webstore/detail/lingocloud-web-translatio/jmpepeebcbihafjjadogphmbgiffiajh
2.4 阿里项目规范
https://github.com/alibaba/flutter-go/blob/master/Flutter_Go%20%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83.md
3 业务界面代码组织
3.1 redux、fish-redux
- redux 架构
- fish-redux 架构
进一步的细分,进行规范
https://github.com/alibaba/fish-redux/tree/master/doc
https://medium.com/@dave790602/flutter-architecture-fish-redux-9b753912224a
- fish-redux 代码
3.2 bloc
- 架构
https://bloclibrary.dev/#/
- 代码组织
3.3 简单就是美
3.4 如何平衡
- 是否团队开发
- 是否简单业务(20 页面)
- 是否重交互(视频社交、聊天 A)
4 新闻首页实现
4.1 界面组成分析
- 分类导航、推荐新闻、频道导航
- 新闻列表、广告 ad、邮件订阅
4.2 代码框架
...
class _MainPageState extends State<MainPage> {
@override
void initState() {
super.initState();
_loadAllData();
}
// 读取所有数据
_loadAllData() async {
}
// 分类菜单
Widget _buildCategories() {
return Container();
}
// 推荐阅读
Widget _buildRecommend() {
return Container();
}
// 频道
Widget _buildChannels() {
return Container();
}
// 新闻列表
Widget _buildNewsList() {
return Container();
}
// ad 广告条
// 邮件订阅
Widget _buildEmailSubscribe() {
return newsletterWidget();
}
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: <Widget>[
_buildCategories(),
Divider(height: 1),
_buildRecommend(),
Divider(height: 1),
_buildChannels(),
Divider(height: 1),
_buildNewsList(),
Divider(height: 1),
_buildEmailSubscribe(),
],
),
);
}
}
4.3 实现业务
- 创建 widget 单独文件