首页 > 编程语言 > Flutter实现微信朋友圈功能
2021
12-09

Flutter实现微信朋友圈功能

本文实例为大家分享了Flutter实现微信朋友圈功能的具体代码,供大家参考,具体内容如下

今天给大家实现一下微信朋友圈的效果,下面是效果图

下面还是老样子,还是以代码的方式进行讲解

import 'package:dio/dio.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:nursery_school_gardener/view/main/dynamic/FriendView/FriendCell.dart';
 
 
class Dynamic extends StatefulWidget {
  @override
  _DynamicState createState() => _DynamicState();
}
 
class _DynamicState extends State<Dynamic> {
  // 朋友圈信息数据
  List<Result> cachesData;
  @override
  void initState() {
    super.initState();
  }
 
  @override
  Widget build(BuildContext context) {
    return CustomScaffold(
      contentWidget: Expanded(
          flex: 1,
          child: ListView.builder(// 朋友圈列表
          itemBuilder: (BuildContext context, int index) {
            // 每一条的朋友圈
            return FriendCell(
              result: cachesData[index],//将数据传入每一条列表中
            );
          },
          itemCount: cachesData.length(),
        ),
      ),
    );
  }
 
}

上面就是列表,下面是列表中的每一个样式

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:nursery_school_gardener/util/ColorUtils.dart';
 
 
class FriendCell extends StatefulWidget {
  // 上一页传过来的数据
  Result result;
  FriendCell({this.result, Key key}) : super(key: key);
  @override
  _FriendCellState createState() => _FriendCellState();
}
 
class _FriendCellState extends State<FriendCell> {
  TextEditingController editingController = new TextEditingController();
  // 照片展示样式,1张、2|4张、或者其他
  Widget makePictureCount(List<KgPhotosList> pics) {
    if (pics.length == 1) {
      return GestureDetector(
        onTap: () {
          //点击图片
        },
        child: Container(
          margin: EdgeInsets.fromLTRB(0, 10, 50, 10),
          width: MediaQuery.of(context).size.width - 164,
          height: (MediaQuery.of(context).size.width - 164) / 2,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("images/hsf2.jpg"),//展示的图片根据需求展示不同类型
              fit: BoxFit.cover,
            ),
            borderRadius: BorderRadius.circular(8),
          ),
        ),
      );
    } else if (pics.length == 4 || pics.length == 2) {
      return Container(
        margin: EdgeInsets.fromLTRB(0, 10, 0, 10),
        child: Wrap(
          spacing: 5,
          runSpacing: 5,
          alignment: WrapAlignment.start,
          children: pics
              .map(
                (p) => GestureDetector(
                  onTap: () {
                    //点击图片
                  },
                  child: Container(
                    width: (MediaQuery.of(context).size.width - 164) / 2.2,
                    height: (MediaQuery.of(context).size.width - 164) / 2.2,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage("images/hsf2.jpg"),//展示的图片根据需求展示不同类型
                        fit: BoxFit.cover,
                      ),
                      borderRadius: BorderRadius.circular(8),
                    ),
                  ),
                ),
              )
              .toList(),
        ),
      );
    } else if (pics.length == 3 || pics.length > 4) {
      
      return Container(
        margin: EdgeInsets.fromLTRB(0, 10, 0, 10),
        child: Wrap(
          spacing: 5,
          runSpacing: 5,
          alignment: WrapAlignment.start,
          children: pics
              .map(
                (p) => GestureDetector(
                  onTap: () {
                    //点击图片
                  },
                  child: Container(
                     width: (MediaQuery.of(context).size.width - 164) / 3,
                     height: (MediaQuery.of(context).size.width - 164) / 3,
                     decoration: BoxDecoration(
                        image: DecorationImage(
                           image:AssetImage("images/hsf2.jpg"),//展示的图片根据需求展示
                         fit: BoxFit.cover,
                       ),
                        borderRadius: BorderRadius.circular(8),
                     ),
                  ),
                ),
              )
              .toList(),
        ),
      );
    } else {
      return Container();
    }
  }
 
  bool _isShow = true;
 
  @override
  Widget build(BuildContext context) {
    bool deleteStatus = widget.result.addTeacher !=
        Variable.share().loginData.result.userInfo.id;
    return Container(
      margin: new EdgeInsets.only(left: 12, right: 12, bottom: 12),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: ColorUtils.WHITE,
        boxShadow: [
          BoxShadow(
              color: ColorUtils.MAIN_BG, blurRadius: 10.0, spreadRadius: 1.0),
        ],
      ),
      child: Stack(
        children: [
          Container(
            child: Column(
              children: <Widget>[
                Flex(
                  direction: Axis.horizontal,
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    //头像
                    Container(
                      width: 40,
                      height: 40,
                      margin: EdgeInsets.fromLTRB(15, 20, 15, 0),
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: AssetImage("images/hsf2.jpg"),//用户头像
                          fit: BoxFit.cover,
                        ),
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                    Expanded(
                      child: Container(
                        margin: EdgeInsets.fromLTRB(0, 20, 60, 0),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
//姓名
 Text(
      "姓名",
           style: TextStyle(
                      fontSize: 17,
                      color: Color(0XFF4D6CAB),
                      fontWeight: FontWeight.w500),
                            ),
                            SizedBox(
                              height: 5,
                            ),
                            //动态内容
                            Text(
                              "内容",
                              style: TextStyle(fontSize: 15),
                            ),
                            SizedBox(
                              height: 5,
                            ),
//发表的图片,上一页面传递来的属性
    makePictureCount(widget.result.kgPhotosList),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
Stack(
     children: [
             Flex(
                 direction: Axis.horizontal,
                 mainAxisAlignment: MainAxisAlignment.start,
                 children: <Widget>[
//发布的时间
                 Container(
                     margin: EdgeInsets.only(left: 70, bottom: 5),
                        child: Text(
                            "时间",
                            style: TextStyle(
                                fontSize: 12, color: Color(0XFFB2B2B2)),
                          ),
                        ),
//删除朋友圈按钮 deleteStatus代表是否是自己的朋友圈,是可以删除,
      Offstage(
              offstage: deleteStatus,
              child: GestureDetector(
                     onTap: () {
                              CustomDialog.show(context,
                                  title: "动态删除",
                                  message: "你确定要删除当前动态吗?", callBack: (flag) {
                                if (flag) {
                                  delteDynamic();
                                }
                              });
                            },
                            child: Container(
                              margin: EdgeInsets.only(left: 5, bottom: 5),
                              child: Text(
                                "删除",
                                style: TextStyle(
                                    fontSize: 12,
                                    color: ColorUtils.BLUE_NORMAL),
                              ),
                            ),
                          ),
                        ),
//管理员驳回按钮,看是否是管理员,可以通过和驳回朋友圈
  Offstage(
        offstage: ToolUtils.isContainsElement(
                  Variable.share().USER_DYNAMIC_TYPE),
                          child: GestureDetector(
                            onTap: () {
                              CustomDialog.show(
                                context,
                                title: "动态通过",
                                message: "你确定要通过当前动态吗?",
                                callBack: (flag) {
                                  if (flag) {}
                                },
                              );
                            },
                            child: Container(
                              margin: EdgeInsets.only(left: 5, bottom: 5),
                              child: Text(
                                "通过",
                                style: TextStyle(
                                    fontSize: 12,
                                    color: ColorUtils.BLUE_NORMAL),
                              ),
                            ),
                          ),
                        ),
//管理员驳回按钮,看是否是管理员,可以通过和驳回朋友圈
     Offstage(
           offstage: ToolUtils.isContainsElement(
               Variable.share().USER_DYNAMIC_TYPE),
           child: GestureDetector(
                 onTap: () {
                  CustomInputDialog.show(context,
                    title: "动态驳回",
                  message: "你确定要驳回当前动态吗?", callBack: (flag) {
                                if (flag) {}
                              });
                            },
                            child: Container(
                              margin: EdgeInsets.only(left: 5, bottom: 5),
                              child: Text(
                                "驳回",
                                style: TextStyle(
                                    fontSize: 12,
                                    color: ColorUtils.BLUE_NORMAL),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
  Container(
       margin: EdgeInsets.only(right: 20),
          child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
               Offstage(
                 offstage: _isShow,
                    child: AnimatedContainer(
                         decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5),
                                  color: Color(0XFF4C5154)),
                       duration: Duration(milliseconds: 100),
                         width: 130,
                      height: 30,
                 child: Flex(
          direction: Axis.horizontal,
children: <Widget>[
// 点赞模块
   Expanded(
             flex: 1,
              child: Row(
                     mainAxisAlignment:
                     MainAxisAlignment.center,
                          children: <Widget>[
                                 Icon(
                                  Icons.favorite_border,
                                  color: Colors.white,
                                  size: 15,
                                ),
                               SizedBox(
                            width: 5,
                   ),
              InkWell(
     onTap: () {
 // 点赞功能
         setState(
                 () {
              isShow();
               addPraise();
                   },
                   );
                  },
              child: Text(
               "赞",
                 style: TextStyle(
                      color: Colors.white,
                        fontSize: 12),
                    ),
              ),
         ],
     ),
 ),
// 评论模块
 Expanded(
       flex: 1,
       child: Row(
       mainAxisAlignment:
       MainAxisAlignment.center,
       children: <Widget>[
            Icon(
                   Icons.sms,
                   color: Colors.white,
                    size: 15,
                            ),
                             SizedBox(
                           width: 5,
                          ),
                            InkWell(
                            onTap: () {
                               setState(
                                 () {
                                  isShow();
                                   addDiscuss("我是评论内容");
                                    },
                               );
                            },
                          child: Text(
                                   "评论",
                                 style: TextStyle(
                                     color: Colors.white,
                                  fontSize: 12),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
     ),
          SizedBox(
            width: 10,
               ),
                  InkWell(
                     onTap: () {
                     isShow();
                            },
                            child: Image.asset(
                              "images/button.png",
                              width: 22,
                              height: 18,
                            ),
                          ),
                        ],
               ),
            ),
       ],
   ),
//评论模块
 Offstage(
    offstage:
             widget.result.kgPraiseList.length == 0 ? true : false,
                  child: Container(
                    constraints: BoxConstraints(minWidth: double.infinity),
                    margin: EdgeInsets.fromLTRB(70, 10, 15, 0),
                    padding:
                        EdgeInsets.only(top: 5, bottom: 5, left: 10, right: 10),
//因为点赞和评论是两个控件,所以当他俩存在的时候需要设置对应的圆角,保证UI
    decoration: BoxDecoration(
       borderRadius: BorderRadius.only(
                 topLeft: Radius.circular(8),
                 topRight: Radius.circular(8),
                 bottomLeft: Radius.circular(
                              widget.result.kgDiscussList.length == 0 ? 8 : 0),
                          bottomRight: Radius.circular(
                              widget.result.kgDiscussList.length == 0 ? 8 : 0)),
                      color: Color(0XFFF3F3F5),
                    ),
                    child: Wrap(
                        alignment: WrapAlignment.start,
                        runSpacing: 5,
                        spacing: 5,
                        children: likeView(widget.result.kgPraiseList.length)),
                  ),
                ),
//点赞模块
   Offstage(
    offstage:
         widget.result.kgDiscussList.length == 0 ? true : false,
              child: Container(
                    constraints: BoxConstraints(minWidth: double.infinity),
                    margin: EdgeInsets.fromLTRB(70, 0, 15, 0),
                    padding:
                        EdgeInsets.only(top: 5, bottom: 5, left: 10, right: 10),
                    //因为点赞和评论是两个控件,所以当他俩存在的时候需要设置对应的圆角,保证UI
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(
                              widget.result.kgPraiseList.length == 0 ? 8 : 0),
                          topRight: Radius.circular(
                              widget.result.kgPraiseList.length == 0 ? 8 : 0),
                          bottomLeft: Radius.circular(8),
                          bottomRight: Radius.circular(8)),
                      color: Color(0XFFF3F3F5),
                    ),
                    child: Wrap(
                        alignment: WrapAlignment.start,
                        runSpacing: 5,
                        spacing: 5,
                        children: talkView(widget.result.kgDiscussList.length)),
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
              ],
            ),
          ),
          Offstage(
            offstage: true,
            child: Container(
              margin: new EdgeInsets.only(
                  left: MediaQuery.of(context).size.width - 50, top: 20),
              child: Image.asset(
                "images/ic_no_network.png",
                width: 18,
                height: 18,
              ),
            ),
          ),
        ],
      ),
    );
  }
 
  // 点赞和评论模块是否显示
  void isShow() {
    setState(() {
      _isShow = !_isShow;
    });
  }
 
  /*
  * 删除朋友圈
  * */
  void delteDynamic() {
    // 删除朋友圈
  }
 
  /*
  * 发布评论
  * */
  void addDiscuss(String discuss) {
    // 发布评论
  }
 
  /*
  * 点赞
  * */
  void addPraise() {
    // 点赞
  }
    
  //点赞
  List<Widget> likeView(int count) {
    List<Widget> result = [];
    // TODO: 这里不要删除,后期肯定会改回改版本,这个是展示所有点赞人的信息,因为项目需要这里注释了,只用下面的方式
    /*
    for (int i = 0; i < count; i++) {
      var praise = widget.result.kgPraiseList[i];
      result.add(
        Container(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Icon(
                Icons.favorite_border,
                size: 13,
                color: Color(0XFF566B94),
              ),
              SizedBox(width: 5),
              Container(
                child: Text(
                  ToolUtils.isEmptyOrNull(praise.praisePerson),
                  style: TextStyle(
                      color: Color(0XFF566B94),
                      fontSize: 15,
                      fontWeight: FontWeight.w500),
                ),
              )
            ],
          ),
        ),
      );
    }
     */
    // 点赞数量
    if (widget.result.kgPraiseList.length > 0) {
      result.add(
        Container(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Icon(
                Icons.favorite,
                size: 16,
                color: Color(0XFF4D6CAB),
              ),
              SizedBox(width: 5),
              Container(
                child: Text(
                  "${widget.result.kgPraiseList.length}人赞过",
                  style: TextStyle(
                      color: Color(0XFF4D6CAB),
                      fontSize: 14,
                      fontWeight: FontWeight.w500),
                ),
              )
            ],
          ),
        ),
      );
    }
    return result;
  }
  //评论
  List<Widget> talkView(int count) {
    List<Widget> result = [];
    for (int i = 0; i < count; i++) {
      var discuss = widget.result.kgDiscussList[i];
      var rng = new Random();
      result.add(
        Container(
          child: Flex(
            direction: Axis.vertical,
            children: [
              Container(
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: Text.rich(
                        TextSpan(
                            style: TextStyle(
                              fontSize: 15,
                              color: Color(0xFF333333),
                            ),
                            children: [
                              TextSpan(
                                text: ToolUtils.isEmptyOrNull(
                                        discuss.discussPerson) +
                                    ':',
                                style: TextStyle(
                                  fontWeight: FontWeight.w500,
                                  color: Color(0XFF4D6CAB),
                                ),
                              ),
                              TextSpan(
                                  text: ToolUtils.isEmptyOrNull(
                                      discuss.discussMessage)),
                            ]),
                        textAlign: TextAlign.start,
                      ),
                    ),
                  ],
                ),
              ),
              Container(),
            ],
          ),
        ),
      );
    }
    return result;
  }
}

到此朋友圈效果的实现就完成了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自学编程网。

编程技巧