一步一步完成Flutter应用开发-掘金App文章详情完善

紧接着上篇文章，将详情页面的评论以及相关文章页面的构建

遇到的问题

界面的构建比较简单，重要的是如何嵌套，上篇用来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的无限高度的问题

相关文章构建

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部分实现布局 基本信息，评论内容， 回复内容

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~~~