flutter 評論蓋樓實現

先上圖：  

 

經過觀察咱們能夠發現最外層是3樓等於3樓本身的內容加2樓，而2樓等於內容加一樓，1樓就只有內容。而後咱們發現一個規律：本樓=內容+上樓，1樓沒有上一樓怎麼辦？在 flutter 中很簡單了，就是一個 Widget，咱們能夠作個判斷，若是是一樓那麼他的上樓就是一個不佔空間的 Widget。樓層就蓋起來那就要用到一個for循環:

Widget referWidget;
for(int index = 0; index < referCount; index++){
  referWidget = buildRefer(refers.elementAt(index), index, index==0?emptyWidget:referWidget);
}

在 buildRefer 中第一個參數是當前評論內容，第二下標用來顯示當前樓層數，第三個就是上一樓，這裏能夠看到前面聽說的判斷第一樓時的上樓爲空放一個空 Widget。下面是關鍵代碼：

class CommentReferWidget extends StatelessWidget {
  final List<OscProjectCommentRefer> refers;
  const CommentReferWidget({Key key, this.refers}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    int referCount = refers?.length??0;
    Widget emptyWidget = Divider(color: Colors.transparent, height: 0,);
    if(referCount > 0) {
      Widget referWidget;
      for(int index = 0; index < referCount; index++){
        referWidget = buildRefer(refers.elementAt(index), index, index==0?emptyWidget:referWidget);
      }
      return referWidget;
    } else {
      return emptyWidget;
    }
  }

  Widget buildRefer(OscProjectCommentRefer refer, int index, Widget referWidget){
    return Container(
      padding: EdgeInsets.symmetric(horizontal: Dimens.gap_view_smaller, vertical: Dimens.gap_view_smaller),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black12, width: Dimens.gap_divider_height_smallest),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          referWidget,
          buildReferContent(refer, index),
        ],
      ),
    );
  }

  Widget buildReferContent(OscProjectCommentRefer refer, int index){
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: Dimens.gap_view_small, vertical: Dimens.gap_view_small),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(" ${index+1}  ", style: MyTextStyle.COMMENT_REFER_INDEX,),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text("${refer.author}", style: MyTextStyle.COMMENT_REFER_AUTHOR,),
                Offstage(
                  offstage: StringUtil.isEmpty(refer.pubDate),
                  child: Text("${refer.pubDate}", style: MyTextStyle.COMMENT_REFER_TIME,),
                ),
                Text(refer.content, style: MyTextStyle.LIST_ACTIVITY_CONTENT),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

引用到其餘格式文件就不放了，能夠本身隨便寫一個。

以上。