Flutter - 微信朋友圈效果实现
### demo 地址: https://github.com/iotjin/jh_flutter_demo
####实现效果：
- appbar滚动颜色渐变，状态栏颜色切换
- 背景图下拉放大
- 图片9宫格展示
- 图片全屏浏览，长按弹框
效果图：
代码
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:jhtoast/jhtoast.dart';
import 'package:jh_flutter_demo/base_appbar.dart';
import 'package:jh_flutter_demo/jh_common/utils/jh_color_utils.dart';
import 'package:jh_flutter_demo/jh_common/widgets/jh_bottom_sheet.dart';
import 'package:jh_flutter_demo/jh_common/widgets/jh_nine_picture.dart';
import 'package:jh_flutter_demo/project/configs/project_config.dart';
import 'package:jh_flutter_demo/project/model/contacts_model.dart';
class WxFriendsCirclePage extends StatefulWidget {
@override
_WxFriendsCirclePageState createState() => _WxFriendsCirclePageState();
}
class _WxFriendsCirclePageState extends State {
ScrollController _scrollController = ScrollController();
double _imgNormalHeight = 300;
double _imgExtraHeight = 0;
double _imgChangeHeight = 0;
double _scrollMinOffSet = 0;
double _navH = 0;
double _appbarOpacity = 0.0;
var _dataArr = [];
@override
void initState() {
super.initState();
_navH = JhScreenUtils.navigationBarHeight;
_imgChangeHeight = _imgNormalHeight + _imgExtraHeight;
_scrollMinOffSet = _imgNormalHeight - _navH;
_addListener();
_loadData();
}
void _loadData() async {
// 获取微信运动排行榜数据
final jsonStr =
await rootBundle.loadString('lib/res/wx_friends_circle.json');
Map dic = json.decode(jsonStr);
List dataArr = dic['data'];
// dataArr.forEach((item) {
// });
_dataArr = dataArr;
setState(() {});
}
//滚动监听
void _addListener() {
_scrollController.addListener(() {
double _y = _scrollController.offset;
// print("滑动距离: $_y");
if (_y < _scrollMinOffSet) {
_imgExtraHeight = -_y;
// print(_topH);
setState(() {
_imgChangeHeight = _imgNormalHeight + _imgExtraHeight;
});
} else {
setState(() {
_imgChangeHeight = _navH;
});
}
// //小于0 ，下拉放大
// if (_y < 0) {
// } else {}
//appbar 透明度
double appBarOpacity = _y / _navH;
if (appBarOpacity < 0) {
//透明
appBarOpacity = 0.0;
} else if (appBarOpacity > 1) {
//不透明
appBarOpacity = 1.0;
}
//更新透明度
setState(() {
_appbarOpacity = appBarOpacity;
// print('_appbarO: ${_appbarOpacity}');
});
});
}
@override
void dispose() {
//为了避免内存泄露，_scrollController.dispose
_scrollController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: _body(context, _dataArr),
);
}
Widget _body(context, dataArr) {
return Stack(children: [
Container(
color: Colors.white,
child: MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView.builder(
controller: _scrollController,
physics: BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics()),
itemCount: dataArr.length + 1,
itemBuilder: (BuildContext context, int index) {
if (index == 0) {
return Container(
width: double.infinity,
height: _imgNormalHeight,
);
}
return _cell(context, dataArr[index - 1]);
}),
),
),
Positioned(
top: 0,
left: 0,
right: 0,
height: _imgChangeHeight,
child: _header(context),
),
Positioned(
top: 0,
left: 0,
right: 0,
child: backAppBar(context, '朋友圈',
backgroundColor: KColor.kWeiXinBgColor.withOpacity(_appbarOpacity),
brightness:
_appbarOpacity == 1.0 ? Brightness.light : Brightness.dark,
rightImgPath: 'assets/wechat/discover/ic_xiangji.png',
rightItemCallBack: () {
_clickNav();
}),
),
]);
}
//_header
Widget _header(context) {
return Stack(
fit: StackFit.expand,
children: [
Container(
margin: EdgeInsets.only(bottom: 20),
color: Colors.white,
// child: Image.network(
// 'http://img1.mukewang.com/5c18cf540001ac8206000338.jpg',
// fit: BoxFit.cover,
// ),
child: Image.asset(
'assets/wechat/discover/friends/wx_bg0.jpeg',
// 'assets/wechat/discover/friends/wx_bg1.jpg',
fit: BoxFit.cover,
),
),
Positioned(
right: 20,
bottom: 0,
child: Row(
children: [
Container(
margin: EdgeInsets.only(bottom: 10),
child: Text(
'小于',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.w500,
),
),
),
SizedBox(width: 20),
InkWell(
child: Container(
height: 75,
width: 75,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
fit: BoxFit.fitHeight,
image: AssetImage("assets/images/lufei.png"),
),
),
),
onTap: () => _jumpInfo(),
),
],
)),
],
);
}
//cell
Widget _cell(context, item) {
return InkWell(
onTap: () => _clickCell(context, item['name']),
child: Container(
decoration: BoxDecoration(
// border: Border.all(color: KColor.kLineColor, width: 1),
border: Border(
bottom: BorderSide(width: 0.5, color: KColor.kLineColor), //下边框
)),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//头像
InkWell(
onTap: () => _jumpInfo(),
child: Container(
margin: EdgeInsets.all(15),
height: 50,
width: 50,
decoration: BoxDecoration(
color: JhColorUtils.hexColor(item['color']),
borderRadius: BorderRadius.circular(8),
),
child: Center(
child: Text(item['name'].substring(0, 1),
style: TextStyle(color: Colors.white, fontSize: 20)),
),
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(top: 13),
child: Text(
item['name'],
style: TextStyle(
color: KColor.kWeiXinTextBlueColor, fontSize: 15),
),
),
Container(
margin: EdgeInsets.fromLTRB(0, 5, 15, 5),
child: Text(
item['content'],
style: TextStyle(fontSize: 13),
)),
_imgs(context, item),
Container(
margin: EdgeInsets.fromLTRB(0, 5, 15, 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
item['time'],
style: TextStyle(
color: KColor.kTextGrayColor, fontSize: 13),
),
InkWell(
child: Container(
width: 34,
height: 22,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Color.fromRGBO(240, 240, 240, 1),
),
child: Image.asset(
'assets/wechat/discover/ic_diandian.png',
color: KColor.kWeiXinTextBlueColor,
),
),
onTap: () => _clickCell(context, '评论'),
)
],
)),
])),
],
),
));
}
//图片view
Widget _imgs(context, item) {
return Container(
child: JhNinePicture(
imgData: item['imgs'],
lRSpace: (80.0 + 20.0),
onLongPress: () {
print('objonLongPressect:');
JhBottomSheet.showText(context, dataArr: ["保存图片"]);
},
));
}
//点击cell
_clickCell(context, text) {
JhToast.showText(context, msg: '点击 ${text}');
}
_clickNav() {
JhBottomSheet.showText(context,
title: "请选择操作",
dataArr: ['拍摄', '从手机相册选择'],
clickCallback: (index, text) {});
}
_jumpInfo() {
//跳转个人信息页 跳转传递model
ContactsModel model = ContactsModel();
model.id = 123;
model.name = '小于';
model.namePinyin = '小于';
model.phone = '17372826674';
model.sex = '0';
model.region = '淮北市';
model.label = '';
model.color = '#c579f2';
model.avatarUrl = 'https://gitee.com/iotjh/Picture/raw/master/lufei.png';
model.isStar = false;
String jsonStr = Uri.encodeComponent(jsonEncode(model));
NavigatorUtils.pushNamed(
context, '${"WxUserInfoPage"}?passValue=${jsonStr}');
}
}