Flutter實(shí)現(xiàn)微信朋友圈功能
更新時(shí)間：2021年07月29日 17:29:58 作者：陳世流年
這篇文章主要為大家詳細(xì)介紹了Flutter實(shí)現(xiàn)微信朋友圈功，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Flutter實(shí)現(xiàn)微信朋友圈功能的具體代碼，供大家參考，具體內(nèi)容如下
今天給大家實(shí)現(xiàn)一下微信朋友圈的效果，下面是效果圖
下面還是老樣子，還是以代碼的方式進(jìn)行講解
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> {
// 朋友圈信息數(shù)據(jù)
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],//將數(shù)據(jù)傳入每一條列表中
);
},
itemCount: cachesData.length(),
),
),
);
}
}
上面就是列表，下面是列表中的每一個(gè)樣式
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:nursery_school_gardener/util/ColorUtils.dart';
class FriendCell extends StatefulWidget {
// 上一頁(yè)傳過來的數(shù)據(jù)
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: () {
//點(diǎn)擊圖片
},
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"),//展示的圖片根據(jù)需求展示不同類型
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: () {
//點(diǎn)擊圖片
},
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"),//展示的圖片根據(jù)需求展示不同類型
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: () {
//點(diǎn)擊圖片
},
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"),//展示的圖片根據(jù)需求展示
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,
),
//動(dòng)態(tài)內(nèi)容
Text(
"內(nèi)容",
style: TextStyle(fontSize: 15),
),
SizedBox(
height: 5,
),
//發(fā)表的圖片，上一頁(yè)面?zhèn)鬟f來的屬性
makePictureCount(widget.result.kgPhotosList),
],
),
),
),
],
),
Stack(
children: [
Flex(
direction: Axis.horizontal,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
//發(fā)布的時(shí)間
Container(
margin: EdgeInsets.only(left: 70, bottom: 5),
child: Text(
"時(shí)間",
style: TextStyle(
fontSize: 12, color: Color(0XFFB2B2B2)),
),
),
//刪除朋友圈按鈕 deleteStatus代表是否是自己的朋友圈，是可以刪除，
Offstage(
offstage: deleteStatus,
child: GestureDetector(
onTap: () {
CustomDialog.show(context,
title: "動(dòng)態(tài)刪除",
message: "你確定要?jiǎng)h除當(dāng)前動(dòng)態(tài)嗎？", 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: "動(dòng)態(tài)通過",
message: "你確定要通過當(dāng)前動(dòng)態(tài)嗎？",
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: "動(dòng)態(tài)駁回",
message: "你確定要駁回當(dāng)前動(dòng)態(tài)嗎？", 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>[
// 點(diǎn)贊模塊
Expanded(
flex: 1,
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.favorite_border,
color: Colors.white,
size: 15,
),
SizedBox(
width: 5,
),
InkWell(
onTap: () {
// 點(diǎn)贊功能
setState(
() {
isShow();
addPraise();
},
);
},
child: Text(
"贊",
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
),
],
),
),
// 評(píng)論模塊
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("我是評(píng)論內(nèi)容");
},
);
},
child: Text(
"評(píng)論",
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
),
],
),
),
],
),
),
),
SizedBox(
width: 10,
),
InkWell(
onTap: () {
isShow();
},
child: Image.asset(
"images/button.png",
width: 22,
height: 18,
),
),
],
),
),
],
),
//評(píng)論模塊
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),
//因?yàn)辄c(diǎn)贊和評(píng)論是兩個(gè)控件，所以當(dāng)他倆存在的時(shí)候需要設(shè)置對(duì)應(yīng)的圓角，保證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)),
),
),
//點(diǎn)贊模塊
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),
//因?yàn)辄c(diǎn)贊和評(píng)論是兩個(gè)控件，所以當(dāng)他倆存在的時(shí)候需要設(shè)置對(duì)應(yīng)的圓角，保證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,
),
),
),
],
),
);
}
// 點(diǎn)贊和評(píng)論模塊是否顯示
void isShow() {
setState(() {
_isShow = !_isShow;
});
}
/*
* 刪除朋友圈
* */
void delteDynamic() {
// 刪除朋友圈
}
/*
* 發(fā)布評(píng)論
* */
void addDiscuss(String discuss) {
// 發(fā)布評(píng)論
}
/*
* 點(diǎn)贊
* */
void addPraise() {
// 點(diǎn)贊
}
//點(diǎn)贊
List<Widget> likeView(int count) {
List<Widget> result = [];
// TODO: 這里不要?jiǎng)h除，后期肯定會(huì)改回改版本，這個(gè)是展示所有點(diǎn)贊人的信息，因?yàn)轫?xiàng)目需要這里注釋了，只用下面的方式
/*
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),
),
)
],
),
),
);
}
*/
// 點(diǎn)贊數(shù)量
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;
}
//評(píng)論
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;
}
}
到此朋友圈效果的實(shí)現(xiàn)就完成了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android游戲開發(fā)實(shí)踐之人物移動(dòng)地圖的平滑滾動(dòng)處理
玩過rpg游戲的朋友應(yīng)該都知道RPG的游戲地圖一般都比較大 今天我和大家分享一下在RPG游戲中如何來處理超出手機(jī)屏幕大小的游戲地圖。2014-06-06
這篇文章主要介紹了Android中如何獲取視頻文件的截圖、縮略圖的相關(guān)資料,需要的朋友可以參考下2016-03-03
Android 使用Intent傳遞數(shù)據(jù)的實(shí)現(xiàn)思路與代碼
Intent是Android中一個(gè)非常重要的概念，跟這個(gè)詞的本意（意圖，目的）一樣，這個(gè)類在Android中的作用就是要調(diào)用某個(gè)組建去做某一件事,接下來詳細(xì)介紹，感興趣的朋友可以參考下2013-01-01
本篇文章主要介紹了AndroidO添加桌面快捷方式的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
Android自定義實(shí)現(xiàn)開關(guān)按鈕代碼
經(jīng)?？梢钥吹揭恍┻x擇開個(gè)狀態(tài)的配置文件，但是外觀都不多好看。我感覺還是自定義的比較好，下面小編給大家介紹通過Android自定義實(shí)現(xiàn)開關(guān)按鈕代碼，感興趣的童鞋一起學(xué)習(xí)吧2016-05-05
總結(jié)Android中多線程更新應(yīng)用的頁(yè)面信息的方式
這篇文章主要介紹了總結(jié)Android中多線程更新應(yīng)用的頁(yè)面信息的方式,文中共總結(jié)了runOnUiThread、Handler、AsyncTask異步以及View直接在UI線程中更新的方法,需要的朋友可以參考下2016-02-02
Android實(shí)現(xiàn)動(dòng)態(tài)曲線繪制
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)動(dòng)態(tài)曲線繪制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
Android SDK Manager更新、下載速度慢問題解決辦法
這篇文章主要介紹了Android SDK Manager更新、下載速度慢問題解決辦法的相關(guān)資料,需要的朋友可以參考下2017-05-05
Android定制RadioButton樣式三種實(shí)現(xiàn)方法
三種方法實(shí)現(xiàn)Android定制RadioButton樣式:使用XML文件進(jìn)行定義/在JAVA代碼中定義等等，感興趣的朋友可以參考下，希望可以幫助到你2013-02-02
android實(shí)現(xiàn)切換日期左右無(wú)限滑動(dòng)效果
本篇內(nèi)容給大家分享了android開發(fā)時(shí)候?qū)崿F(xiàn)自定義的日期無(wú)限左右滑動(dòng)效果以及控件使用的技巧。2017-11-11