这篇文章给大家介绍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: 这里不要删除，后期肯定会改回改版本，这个是展示所有点赞人的信息，因为项目需要这里注释了，只用下面的方式 // 点赞数量 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中怎么实现一个微信朋友圈功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
