一步一步完成Flutter應用開發-掘金App文章詳情完善

一天清晨發表於2021-03-25

緊接著上篇文章,將詳情頁面的評論以及相關文章頁面的構建

tutieshi_640x1343_3s.gif

遇到的問題

介面的構建比較簡單,重要的是如何巢狀,上篇用來markdown去載入詳情內容,看了看flutter_markdown這個庫的原始碼,發現有這麼一段程式碼

@override
  Widget build(BuildContext context, List<Widget> children) {
    return ListView(
      padding: padding,
      controller: controller,
      physics: physics,
      shrinkWrap: shrinkWrap,
      children: children,
    );
  }
複製程式碼

可以看出來裡面是巢狀了一個ListView元件,所以想要在這個列表的下面新增內容,涉及到ListView套用ListView元件。最大的問題就是滑動衝突的問題。強大的flutter也是為我們想好了解決的方案.子ListView元件控制不滑動。

physics: NeverScrollableScrollPhysics()
複製程式碼

緊接著shrinkWrap屬性:該屬性表示是否根據子元件的總長度來設定ListView的長度,預設值為false 。預設情況下,ListView的會在滾動方向儘可能多的佔用空間。當ListView在一個無邊界(滾動方向上)的容器中時,shrinkWrap必須為true

shrinkWrap: true,
複製程式碼

這樣可以給markdown元件加上這兩個屬性,再使用之前封裝好的common_list巢狀進來

Markdown(
      key: listGlobalKey,
      data: _markdownData,
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
    );
Expanded(
            child: CommonListWiget(
          scrollController: _scrollController,
          networkApi: (currentPage) async {
            return ['1', '2', '3'];
          },
          itemBuilder: (BuildContext context, int position) {
            if (position == 0) {
              return this.renderContent();
            }
            return Container(
                height: 200,
                width: Get.width,
                decoration: BoxDecoration(color: Colors.red));
          },
        ))
複製程式碼

就可以了。實現ListView套用ListView的無限高度的問題

相關文章構建

WechatIMG211.png

renderArts() {
    return Container(
      width: Get.width,
      decoration: BoxDecoration(color: Colors.white),
      child: Column(
        children: [
          Container(
            height: 40,
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.only(left: 20),
            child: Text('相關文章'),
          ),
          Divider(
            height: 1,
            color: Colors.grey,
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('一步一步完成Flutter應用開發-掘金App文章詳情, 懸浮,標題動畫'),
                Padding(padding: EdgeInsets.only(top: 10)),
                Text(
                  '14贊·5評論 一天清晨',
                  style: TextStyle(color: Colors.grey, fontSize: 12),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
複製程式碼

評論列表構建

分成3部分實現佈局 基本資訊,評論內容, 回覆內容 WechatIMG212.png

renderComment() {
    return Container(
      width: Get.width,
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
      decoration: BoxDecoration(color: Colors.white),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            child: Row(
              children: [
                Container(
                    margin: EdgeInsets.only(right: 10),
                    height: 40,
                    width: 40,
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.circular(20),
                    )),
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          Text(
                            '一天清晨',
                            style: TextStyle(color: Colors.blue),
                          ),
                          Container(
                            margin: EdgeInsets.only(left: 5),
                            padding: EdgeInsets.symmetric(
                                horizontal: 2, vertical: 2),
                            decoration: BoxDecoration(
                                color: Colors.blue,
                                borderRadius: BorderRadius.circular(4)),
                            child: Text(
                              'LV2',
                              style:
                                  TextStyle(color: Colors.white, fontSize: 10),
                            ),
                          )
                        ],
                      ),
                      Text('大前端開發·20小時之前',
                          style: TextStyle(color: Colors.grey, fontSize: 10))
                    ],
                  ),
                ),
                Container(
                  alignment: Alignment.topCenter,
                  width: 80,
                  height: 40,
                  // decoration: BoxDecoration(color: Colors.red),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Icon(
                        Icons.ac_unit,
                        size: 18,
                        color: Colors.grey,
                      ),
                      Icon(Icons.ac_unit, size: 18, color: Colors.grey)
                    ],
                  ),
                ),
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.symmetric(vertical: 10),
            padding: EdgeInsets.only(left: 50),
            child: Text('評論的內容是是啥啥事啥',
                style: TextStyle(color: Colors.black, fontSize: 14)),
          ),
          Container(
            margin: EdgeInsets.only(top: 10, bottom: 10, left: 50),
            padding: EdgeInsets.symmetric(horizontal: 10),
            width: Get.width - 50,
            decoration: BoxDecoration(color: Colors.black.withOpacity(0.1)),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(padding: EdgeInsets.only(top: 5)),
                RichText(
                    text: TextSpan(
                        text: '一天清晨(作者)',
                        style: TextStyle(color: Colors.blue),
                        children: [
                      TextSpan(
                          text: ' : 哈哈哈啊哈哈哈',
                          style: TextStyle(color: Colors.black)),
                    ])),
                Padding(padding: EdgeInsets.only(top: 10)),
                RichText(
                    text: TextSpan(
                        text: '一天清晨(作者)',
                        style: TextStyle(color: Colors.blue),
                        children: [
                      TextSpan(
                          text: ' 回覆 ', style: TextStyle(color: Colors.black)),
                      TextSpan(
                          text: '誰誰誰', style: TextStyle(color: Colors.blue)),
                      TextSpan(
                          text: ' : 哈哈哈啊哈哈哈',
                          style: TextStyle(color: Colors.black)),
                    ])),
                Padding(padding: EdgeInsets.only(top: 5)),
              ],
            ),
          )
        ],
      ),
    );
  }
複製程式碼

over~~~

相關文章