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;
  }
}

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

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

时间: 2021-07-29

flutter仿微信底部图标渐变功能的实现代码

先给大家展示下效果图,感觉不错请参考实例代码. 实现思路 在flutter中,如果想实现上面的页面切换效果,必然会想到pageView.pageView的controller可以监听到pageView的滚动事件,也可以获取pageView滚动的位置,所以我们在滚动事件中根据位置去改变对应的图标颜色就可以实现了. 改变图标颜色 图标是从微信中提取出来的,都是webp格式的图片.要改变图片颜色可以使用ImageIcon这个组件. ImageIcon会把一张图片变成单色图片,所以只要图片没有多色的要求

Flutter实现仿微信底部菜单栏功能

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: MyHomePage(), ), ); } } class MyHomePage extends Sta

Android仿微信底部菜单栏功能显示未读消息数量

底部菜单栏很重要,我看了一下很多应用软件都是用了底部菜单栏,这里使用了tabhost做了一种通用的(就是可以像微信那样显示未读消息数量的,虽然之前也做过但是layout下的xml写的太臃肿,这里去掉了很多不必要的层,个人看起来还是不错的,所以贴出来方便以后使用). 先看一下做出来之后的效果: 以后使用的时候就可以换成自己项目的图片和字体了,主框架不用变哈哈, 首先是要布局layout下xml文件 main.xml: <?xml version="1.0" encoding=&qu

Android仿微信底部菜单栏效果

前言 在市面上,大多数的APP都需要通过底部菜单栏来将程序的功能进行分类整理,通常都是分为3-5个大模块,从而正确有效地引导用户去使用我们的APP.实现底部菜单栏的方法也有很多种. 1.仿微信底部菜单栏(ViewPager+ImagerView+TextView) ......(其他方式后续会补充) 效果预览 首先来个开胃菜,看看实现效果: 先贴出项目所需的资源文件,这些可随个人自由更改颜色和文字 colors.xml <color name="bg_line_light_gray&quo

Android仿微信底部按钮滑动变色

Android仿微信底部按钮滑动变色,这里只针对使用Fragment为Tab页的滑动操作,进行简单的变色讲解. 首先说下OnPageChangeListener这个监听 //这个监听有三个方法 public abstract void onPageScrollStateChanged (int state) public abstract void onPageScrolled (int position, float positionOffset, int positionOffsetPixe

Android 仿微信底部渐变Tab效果

先来看一下效果图 除了第三个的发现Tab有所差别外,其他的基本还原了微信的底部Tab渐变效果 每个Tab都是一个自定义View,根据ImageView的tint属性来实现颜色渐变效果,tint属性的使用可以看我的上一篇文章 我将自定义View命名为ShadeView,包含四个自定义属性 意思分别为图标.背景色.底部文本.底部文本大小 <declare-styleable name="ShadeView"> <attr name="icon" for

iOS高仿微信表情输入功能代码分享

最近项目需求,要实现一个类似微信的的表情输入,于是把微信的表情扒拉出来,实现了一把.可以从这里下载源码.看起来表情输入没有多少东西,不外乎就是用NSTextAttachment来实现图文混排,结果在实现的过程中遇到了很多小问题,接下来会一一介绍遇到过的坑.先上一张效果图: 一.实现表情选择View(WKExpressionView) 具体的实现就不细说了,主要功能就是点击表情时,将对应表情的图片名称通知给delegate. 二.实现表情textView(WKExpressionTextView)

Android仿微信语音聊天功能

本文实例讲述了Android仿微信语音聊天功能代码.分享给大家供大家参考.具体如下: 项目效果如下: 具体代码如下: AudioManager.java package com.xuliugen.weichat; import java.io.File; import java.io.IOException; import java.util.UUID; import android.media.MediaRecorder; public class AudioManager { private

Android开发之微信底部菜单栏实现的几种方法汇总

 实现方式 实现的方式有很多种 这里总结最常见的几种方式,以后再添加其他的. viewPager + RadioGroup viewPager + FragmentTabHost viewpager +TabLayout viewPager+RadioGroup 感觉这是最简单的一个了,我也就不贴代码 说说我理解的思路吧 通过给pager 和RadioGroup 添加监听,监听两个控件的变化 实现联动 当viewPager的显示pager改变就会触发监听 ,在监听中选中对应的RadioButto

android 中viewpager+fragment仿微信底部TAG完美渐变

viewpager+fragment仿微信底部TAG完美渐变,在图片渐变的同时字的颜色也在变,注意,是渐变哦! 效果图: activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:zhy="http://schemas.android.com/apk/res/com.Sing.weixin" xmlns:tools="

利用百度地图Android sdk高仿微信发送位置功能及遇到的问题

接触了百度地图开发平台半个月了,这2天试着模仿了微信给好友发送位置功能,对百度地图的操作能力又上了一个台阶 我在实现这个功能的时候,遇到一些困难,可能也是别人将会遇到的困难,特在此列出 1.在微信发送功能中,不管用户如何拖拽地图,总有个覆盖物固定了MapView中央,怎么实现? 其实这很容易实现,只要MapView的布局文件中,将一个ImageView覆盖在MapView的中央,就能够实现不管用户如何拖拽地图,覆盖物(ImageView)总固定总MapView中央 2.如何获取MapView中央