往期
- 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_markdownflutter_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的道路上提供一丢丢的帮助。
