往期
- Flutter Web網站搭建教程
- Flutter Web網站之主頁框架搭建
- Flutter Web網站之Jetpack成型
- Flutter Web網站之ScrollView+GridView優化
- Flutter Web網站之最簡方式實現暗黑主題無縫切換
上期回顧
上期主要實現了主題切換，通過StreamBuilder來動態的切換ThemeData，最終達到效果。
本期內容
- Markdown文本展示
- 博客列表實現
UI 效果
兩種主題展示效果
- 示例 提供簡單的使用案例，幫助你初步了解該框架的使用方法
- 博客 提供高質量的博客，通過博客的學習，能更好的掌握，并避免不必要的坑，博客分了左右兩層，右邊內容展示的博客推薦位，推薦比較厲害的博主，希望你喜歡，目前該功能策劃中，預計之后的版本會完善邏輯
示例代碼實現
class Demos extends StatelessWidget {
final String markDownData ;
const Demos({Key key, this.markDownData}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Markdown(
data: markDownData??markdownData,
selectable: true,
imageDirectory: 'https://raw.githubusercontent.com'),
);
}
}
這里引入了一個框架flutter_markdown
flutter_markdown是flutter版本解析Markdown文本的框架
Markdown是一種輕量級標記語言，它允許人們使用易讀易寫的純文本格式編寫文檔，如果你還對Markdown不熟悉，如果你喜歡寫東西，建議學一學，點擊上面Markdown即可開始學習。
flutter_markdown: ^0.3.5
有了Markdown框架我們就很簡單的展示代碼的示例了。
博客代碼實現
class Blogs extends StatelessWidget {
final List<Components> componentsList;
const Blogs({Key key, this.componentsList}) : super(key: key);
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Expanded(
flex: 2,
child: Column(
children: <Widget>[
heightBoxBig,
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: componentsList.length,
itemBuilder: (context, index) {
Components components = componentsList[index];
return Card(
child: ListTile(
onTap: () {
launch(components.url);
},
title: textCardTitle(components.title),
subtitle: textCardSubTitle(components.subTitle),
leading: Image.asset(components.leading),
),
);
}),
),
],
),
),
ResponsiveWidget.isLargeScreen(context)
? Expanded(
flex: 1,
child: Column(
children: <Widget>[
heightBoxBig,
Card(
child: Image.asset(blogger),
)
],
),
)
: Container()
],
);
}
}
用Row將頁面橫向排列，用Expanded將頁面三等分，左邊占三分之二，用ListView.builder動態構建列表容器，并用Card+ ListTile展示卡片式的布局，ListTile設置左頭像leading，主標題title，子標題subtitle，并添加點擊事件onTap，實現博客url的跳轉。
源碼
請轉github代碼查看完整實現
ToDo
該部分內容后期慢慢給大家更新，請客觀不要著急，當然你可以參與進來，私聊我就行哦。
示例部準備下期實現，跳轉至詳情頁面，并展示用例。源碼已經完成點擊即可跳轉至github。博客，這里考慮到有很多優秀的大佬，寫過相關技術博客，幫你尋找最優秀的資源。功能設計如下圖新增按鈕。- Tags 部分下期實現，這部分也需要新的UI展現，標簽的功能類似與搜索，提供更快捷的方式查找想要的功能。
- 留言功能設計，在你們使用過程中肯定會有不同的建議，有了這個功能就能知道你們的心聲，所以這也是我們需要的實現的一個功能。
-
優秀的項目推薦，有很多優秀的項目等待著我們去發現，我一個人的能力有限，如果有更多的人來推薦，會不斷豐富我們的Jetpack內容。
- 源碼部分目前是跳轉至github，下期做下跳整，源碼將展示對該框架的源碼分析，標題部分將承載跳轉至github的責任
- 示例部分，博客部分不斷的加入新的進來
- 博客部分新增自我推薦入口，來收集你認為的對該框架解釋的好文章
結束
網站jetpack.net.cn，歡迎常來，也希望能在你學習Flutter的道路上提供一丟丟的幫助。
