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;
}
}
到此朋友圈效果的实现就完成了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
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
-
flutter仿微信底部图标渐变功能的实现代码
先给大家展示下效果图,感觉不错请参考实例代码. 实现思路 在flutter中,如果想实现上面的页面切换效果,必然会想到pageView.pageView的controller可以监听到pageView的滚动事件,也可以获取pageView滚动的位置,所以我们在滚动事件中根据位置去改变对应的图标颜色就可以实现了. 改变图标颜色 图标是从微信中提取出来的,都是webp格式的图片.要改变图片颜色可以使用ImageIcon这个组件. ImageIcon会把一张图片变成单色图片,所以只要图片没有多色的要求
-
Flutter实现微信朋友圈功能
本文实例为大家分享了Flutter实现微信朋友圈功能的具体代码,供大家参考,具体内容如下 今天给大家实现一下微信朋友圈的效果,下面是效果图 下面还是老样子,还是以代码的方式进行讲解 import 'package:dio/dio.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:nursery_school_gardener/view/ma
-
Android实现微信朋友圈发本地视频功能
一.前言 前一篇文章已经详细介绍了如何使用Xposed框架编写第一个微信插件:摇骰子和猜拳作弊器 本文继续来介绍如何使用Xposed框架编写第二个微信插件,可以将本地小视频发布到朋友圈的功能.在这之前我们还是要有老套路,准备工作要做好,这里还是使用微信6.3.9版本进行操作,准备工作: 1.使用apktool工具进行反编译,微信没有做加固防护,所以这个版本的微信包反编译是没有任何问题的. 2.借助于可视化反编译工具Jadx打开微信包,后续几乎重要分析都是借助这个工具来操作的. 二.猜想与假设 做
-
Android仿微信朋友圈全文、收起功能的实例代码
前言 一般在社交APP中都有类似朋友圈的功能,其中发表的动态内容很长的时候不可能让它全部显示.这里就需要做一个仿微信朋友圈全文.收起功能来解决该问题.在网上看到一个例子-->http://www.jb51.net/article/105251.htm,写的很不错,但是有个bug,他这个Demo只有在条目固定的时候才正常,当增加.删除条目的时候会出现全文.收起显示混乱的问题.原因是他使用了固定的position作为key来保存当前显示的状态.这篇文章在他的基础上进行优化. 效果图 具体代码 (详细
-
Android 实现微信，微博，微信朋友圈，QQ分享的功能
Android 实现微信,微博,微信朋友圈,QQ分享的功能 一.去各自所在的开发者平台注册相应的Key值:引入相关jar包.权限等 二.ShareUtil工具类 import android.app.Activity; import android.content.Context; import android.content.pm.PackageInfo; import android.content.pm.PackageManager; import android.graphics.Bit
-
java开发微信分享到朋友圈功能
微信分享功能开发 用了一天时间,把微信发送给朋友和分享到朋友圈功能开发出来,在这里给大家分享一下,避免大家走弯路. 一.服务器端程序 package com.wiimedia.controller; import java.io.IOException; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; import java.text.ParseException; import
-
Android 高仿微信朋友圈拍照上传功能
模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. PhotoPicker的使用 这是一个支持选择多张图片,点击图片放大,图片之间左右滑动互相切换的库,同时支持图片删除的库,效果类似微信. (1) 添加PhotoPicker的架包 (2) 使用 选择图片:安卓6.0以后需要在代码中添加读写sd卡和相机的权限 当然清单文件中也需要添加的 PhotoPicker.builder() .setPhotoCount(maxPhoto)
-
Android 仿微信朋友圈点赞和评论弹出框功能
贡献/下载源码:https://github.com/mmlovesyy/PopupWindowDemo 本文简单模仿微信朋友圈的点赞和评论弹出框,布局等细节请忽略,着重实现弹出框.发评论,及弹出位置的控制. 1. 微信弹出框 微信朋友圈的点赞和评论功能,有2个组成部分: 点击左下角的"更多"按钮,弹出对话框: 点击评论,弹出输入框,添加评论并在页面中实时显示: 微信朋友圈点赞和评论功能 2. 实际效果 本文将建一个 ListView,在其 Item 中简单模仿微信的布局,然后着重实现
-
关于Android实现简单的微信朋友圈分享功能
1.先下载微信分享的jar包放在lib目录下,并且添加依赖, 清单文件添加 <activity android:name=".wxapi.WXEntryActivity" android:exported="true">//产生回调 </activity> 2.在工程下新建如图所示的包和Activity Activity里面的内容主要是创建微信api并且注册返回回调值 private final String APP_ID= "wx
-
Android自定义TextView仿微信朋友圈文字展开全文功能
Android自定义TextView仿微信朋友圈文字信息,展开全文功能 代码及注释如下: 首先写一个xml文件 showmore.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical
-
iOS实现微信朋友圈视频截取功能
序言 微信现在这么普及,功能也做的越来越强大,不知大家对于微信朋友圈发视频截取的功能或者苹果拍视频对视频编辑的功能有没有了解(作者这里也猜测,微信的这个功能也是仿苹果的).感觉这个功能确实很方便实用,近来作者也在研究音视频功能,所以就实现了一下这个功能. 功能其实看着挺简单,实现过程也踩了不少坑.一方面记录一下:另一方面也算是对实现过程的再一次梳理,这样大家看代码也会比较明白. 效果 我们先看看我实现的效果 实现 实现过程分析 整个功能可以分为三部分: 视频播放 这部分我们单独封装一个视频播放器