Flutter Web網站之Markdown展示與博客列表

往期

上期回顧

上期主要實現了主題切換,通過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的道路上提供一丟丟的幫助。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。