这篇文章主要为大家详细介绍了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; @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 { 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-600"),//展示的图片根据需求展示不同类型 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-600"),//展示的图片根据需求展示不同类型 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-600"),//展示的图片根据需求展示 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: [ 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-600"),//用户头像 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(c以上就是Flutter实现微信朋友圈功能的详细内容，更多请关注0133技术站其它相关文章！
