温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Flutter中怎么实现一个微信朋友圈功能

发布时间:2021-07-31 18:35:19 来源:亿速云 阅读:264 作者:Leah 栏目:开发技术

这篇文章给大家介绍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;
  }
}

关于Flutter中怎么实现一个微信朋友圈功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI