Flutter实现微信朋友圈功能 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 {// 朋友圈信息数据List cachesData; @overridevoid initState() {super.initState(); } @overrideWidget 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 {TextEditingController editingController = new TextEditingController(); // 照片展示样式，1张、2｜4张、或者其他Widget makePictureCount(List 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; @overrideWidget 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: [Flex(direction: Axis.horizontal,mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.start,children: [//头像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: [//姓名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: [//发布的时间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: [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: [// 点赞模块Expanded(flex: 1,child: Row(mainAxisAlignment:MainAxisAlignment.center,children: [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: [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),//因为点赞和评论是两个控件，所以当他俩存在的时候需要设置对应的圆角，保证UIdecoration: 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),//因为点赞和评论是两个控件，所以当他俩存在的时候需要设置对应的圆角，保证UIdecoration: 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 likeView(int count) {List result = []; // TODO: 这里不要删除，后期肯定会改回改版本，这个是展示所有点赞人的信息，因为项目需要这里注释了，只用下面的方式/*for (int i = 0; i < count; i++) {var praise = widget.result.kgPraiseList[i]; result.add(Container(child: Row(mainAxisSize: MainAxisSize.min,children: [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: [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 talkView(int count) {List 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: [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; }}