Flutter 新聞客戶端 - 06 代碼規範、業務代碼組織、新聞首頁實現
B站視頻
www.bilibili.com/video/BV1Pp…git
1 本節目標
- 代碼規範
- 業務代碼組織
- 首頁代碼編寫
2 代碼規範
2.1 官方代碼規範
dart.dev/guides/lang…github
2.3 chrome 插件 <彩雲小譯 - 網頁翻譯插件>
chrome.google.com/webstore/de…web
2.4 阿里項目規範
github.com/alibaba/flu…chrome
3 業務界面代碼組織
3.1 redux、fish-redux
- redux 架構
- fish-redux 架構
進一步的細分，進行規範redux
github.com/alibaba/fis… medium.com/@dave790602…api
- fish-redux 代碼
3.2 bloc
- 架構
- 代碼組織
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 單獨文件
- 分類導航
lib/pages/main/categories_widget.dart架構
Widget newsCategoriesWidget({
List<CategoryResponseEntity> categories,
String selCategoryCode,
Function(CategoryResponseEntity) onTap,
}) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: categories.map<Widget>((item) {
return Container(
alignment: Alignment.center,
height: duSetHeight(52),
padding: EdgeInsets.symmetric(horizontal: 8),
child: GestureDetector(
child: Text(
item.title,
style: TextStyle(
color: selCategoryCode == item.code
? AppColors.secondaryElementText
: AppColors.primaryText,
fontSize: duSetFontSize(18),
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
),
),
onTap: () => onTap(item),
),
);
}).toList(),
),
);
}
複製代碼
- 頻道導航
lib/pages/main/channels_widget.dartapp
Widget newsChannelsWidget({
List<ChannelResponseEntity> channels,
Function(ChannelResponseEntity) onTap,
}) {
return Container(
height: duSetHeight(137),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: channels.map<Widget>((item) {
return Container(
width: duSetWidth(70),
height: duSetHeight(97),
margin: EdgeInsets.symmetric(horizontal: duSetWidth(10)),
child: InkWell(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// 圖標
Container(
height: duSetWidth(64),
margin: EdgeInsets.symmetric(horizontal: duSetWidth(3)),
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
left: 0,
top: 0,
right: 0,
child: Container(
height: duSetWidth(64),
decoration: BoxDecoration(
color: AppColors.primaryBackground,
boxShadow: [
Shadows.primaryShadow,
],
borderRadius:
BorderRadius.all(Radius.circular(32)),
),
child: Container(),
),
),
Positioned(
left: duSetWidth(10),
top: duSetWidth(10),
right: duSetWidth(10),
child: Image.asset(
"assets/images/channel-${item.code}.png",
fit: BoxFit.none,
),
),
],
),
),
// 標題
Text(
item.title,
textAlign: TextAlign.center,
overflow: TextOverflow.clip,
maxLines: 1,
style: TextStyle(
color: AppColors.thirdElementText,
fontFamily: "Avenir",
fontWeight: FontWeight.w400,
fontSize: duSetFontSize(14),
height: 1,
),
),
],
),
onTap: () => onTap(item),
),
);
}).toList(),
),
),
);
}
複製代碼
- 新聞行 Item
lib/pages/main/news_item_widget.dart框架
Widget newsItem(NewsItem item) {
return Container(
height: duSetHeight(161),
padding: EdgeInsets.all(duSetWidth(20)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// 圖
imageCached(
item.thumbnail,
width: duSetWidth(121),
height: duSetWidth(121),
),
// 右側
SizedBox(
width: duSetWidth(194),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// 做者
Container(
margin: EdgeInsets.all(0),
child: Text(
item.author,
style: TextStyle(
fontFamily: 'Avenir',
fontWeight: FontWeight.normal,
color: AppColors.thirdElementText,
fontSize: duSetFontSize(14),
height: 1,
),
),
),
// 標題
Container(
margin: EdgeInsets.only(top: duSetHeight(10)),
child: Text(
item.title,
style: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w500,
color: AppColors.primaryText,
fontSize: duSetFontSize(16),
height: 1,
),
overflow: TextOverflow.clip,
maxLines: 3,
),
),
// Spacer
Spacer(),
// 一行 3 列
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
// 分類
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: duSetWidth(60),
),
child: Text(
item.category,
style: TextStyle(
fontFamily: 'Avenir',
fontWeight: FontWeight.normal,
color: AppColors.secondaryElementText,
fontSize: duSetFontSize(14),
height: 1,
),
overflow: TextOverflow.clip,
maxLines: 1,
),
),
// 添加時間
Container(
width: duSetWidth(15),
),
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: duSetWidth(100),
),
child: Text(
'• ${duTimeLineFormat(item.addtime)}',
style: TextStyle(
fontFamily: 'Avenir',
fontWeight: FontWeight.normal,
color: AppColors.thirdElementText,
fontSize: duSetFontSize(14),
height: 1,
),
overflow: TextOverflow.clip,
maxLines: 1,
),
),
// 更多
Spacer(),
InkWell(
child: Icon(
Icons.more_horiz,
color: AppColors.primaryText,
size: 24,
),
onTap: () {},
),
],
),
),
],
),
),
],
),
);
}
複製代碼
- 郵件訂閱
lib/pages/main/newsletter_widget.dart
Widget newsletterWidget() {
return Container(
margin: EdgeInsets.all(duSetWidth(20)),
child: Column(
children: <Widget>[
// newsletter
Row(
children: <Widget>[
Text(
'Newsletter',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: duSetFontSize(18),
fontWeight: FontWeight.w600,
color: AppColors.thirdElement,
),
),
Spacer(),
IconButton(
icon: Icon(
Icons.close,
color: AppColors.thirdElementText,
size: duSetFontSize(17),
),
onPressed: () {},
),
],
),
// email
inputEmailEdit(
marginTop: 19,
keyboardType: TextInputType.emailAddress,
hintText: "Email",
isPassword: false,
controller: null,
),
// btn subcrible
Padding(
padding: EdgeInsets.only(top: 15),
child: btnFlatButtonWidget(
onPressed: () {},
width: duSetWidth(335),
height: duSetHeight(44),
fontWeight: FontWeight.w600,
title: "Subscribe",
),
),
// disc
Container(
margin: EdgeInsets.only(top: duSetHeight(29)),
width: duSetWidth(261),
child: Text.rich(TextSpan(children: <TextSpan>[
TextSpan(
text: 'By clicking on Subscribe button you agree to accept',
style: new TextStyle(
color: AppColors.thirdElementText,
fontFamily: "Avenir",
fontWeight: FontWeight.w400,
fontSize: duSetFontSize(14),
),
),
TextSpan(
text: ' Privacy Policy',
style: new TextStyle(
color: AppColors.secondaryElementText,
fontFamily: "Avenir",
fontWeight: FontWeight.w400,
fontSize: duSetFontSize(14),
),
recognizer: TapGestureRecognizer()
..onTap = () {
toastInfo(msg: 'Privacy Policy');
},
),
])),
),
],
),
);
}
複製代碼
- 推薦閱讀
lib/pages/main/recommend_widget.dart
Widget recommendWidget(NewsRecommendResponseEntity newsRecommend) {
return Container(
margin: EdgeInsets.all(duSetWidth(20)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// 圖
imageCached(
newsRecommend.thumbnail,
width: duSetWidth(335),
height: duSetHeight(290),
),
// 做者
Container(
margin: EdgeInsets.only(top: duSetHeight(14)),
child: Text(
newsRecommend.author,
style: TextStyle(
fontFamily: 'Avenir',
fontWeight: FontWeight.normal,
color: AppColors.thirdElementText,
fontSize: duSetFontSize(14),
),
),
),
// 標題
Container(
margin: EdgeInsets.only(top: duSetHeight(10)),
child: Text(
newsRecommend.title,
style: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
color: AppColors.primaryText,
fontSize: duSetFontSize(24),
height: 1,
),
),
),
// 一行 3 列
Container(
margin: EdgeInsets.only(top: duSetHeight(10)),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
// 分類
ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 120,
),
child: Text(
newsRecommend.category,
style: TextStyle(
fontFamily: 'Avenir',
fontWeight: FontWeight.normal,
color: AppColors.secondaryElementText,
fontSize: duSetFontSize(14),
height: 1,
),
overflow: TextOverflow.clip,
maxLines: 1,
),
),
// 添加時間
Container(
width: duSetWidth(15),
),
ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 120,
),
child: Text(
'• ${duTimeLineFormat(newsRecommend.addtime)}',
style: TextStyle(
fontFamily: 'Avenir',
fontWeight: FontWeight.normal,
color: AppColors.thirdElementText,
fontSize: duSetFontSize(14),
height: 1,
),
overflow: TextOverflow.clip,
maxLines: 1,
),
),
// 更多
Spacer(),
InkWell(
child: Icon(
Icons.more_horiz,
color: AppColors.primaryText,
size: 24,
),
onTap: () {},
),
],
),
),
],
),
);
}
複製代碼
藍湖設計稿
lanhuapp.com/url/lYuz1 密碼: gSKl
藍湖如今收費了，因此查看標記還請本身上傳 xd 設計稿 商業設計稿文件很差直接分享, 能夠加微信聯繫 ducafecat
YAPI 接口管理
代碼
參考
VSCode 插件
視頻
相關文章
- 1. Python爬取博客園新聞代碼
- 2. android新聞客戶端
- 3. Android新聞客戶端
- 4. Android 網頁抓取（實現新聞客戶端）
- 5. 新版網易新聞客戶端應用源碼
- 6. 新版網易新聞客戶端應用iOS源碼
- 7. 網站首頁head區代碼規範
- 8. 客戶端代碼實現
- 9. 網易新聞應用源碼完整版客戶端+服務端源碼
- 10. Hibernate-03新建客戶代碼實現
- 更多相關文章...
- • Markdown 代碼 - Markdown 教程
- • Eclipse 代碼模板 - Eclipse 教程
- • IntelliJ IDEA代碼格式化設置
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Python爬取博客園新聞代碼
- 2. android新聞客戶端
- 3. Android新聞客戶端
- 4. Android 網頁抓取（實現新聞客戶端）
- 5. 新版網易新聞客戶端應用源碼
- 6. 新版網易新聞客戶端應用iOS源碼
- 7. 網站首頁head區代碼規範
- 8. 客戶端代碼實現
- 9. 網易新聞應用源碼完整版客戶端+服務端源碼
- 10. Hibernate-03新建客戶代碼實現