1.心动我的
/// 我心动的列表
///
/// created by hujintao
/// created at 2019-09-11
//
import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:fpdxapp/components/dialogs/app_update.dart';
import 'package:fpdxapp/components/dialogs/dialog_wrapper.dart';
import 'package:fpdxapp/components/dialogs/unlock_cp_dialog.dart';
import 'package:fpdxapp/components/vip_tag.dart';
import 'package:fpdxapp/constants/icons.dart';
import 'package:fpdxapp/constants/style.dart';
import 'package:fpdxapp/dao/friends/heartBeat.dart';
import 'package:fpdxapp/model/friends/heartBeat.dart';
import 'package:fpdxapp/utils/date_util.dart';
import 'package:fpdxapp/utils/toast.dart';
import 'package:fpdxapp/utils/utils.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
class MyHeartBeatList extends StatefulWidget {
@override
_MyHeartBeatListState createState() => _MyHeartBeatListState();
}
class _MyHeartBeatListState extends State<MyHeartBeatList> with AutomaticKeepAliveClientMixin{
//加载更多key 必填
GlobalKey<RefreshFooterState> _footerKey =
new GlobalKey<RefreshFooterState>();
//下拉刷新key 必填
GlobalKey<RefreshHeaderState> _headerKey =
new GlobalKey<RefreshHeaderState>();
List<HeartBeatList> heartBeatList = [];
int _page;
ScrollController _scrollController;
@override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
/// 渐变色
final gradient = Utils.parseAngleToAlignment(90);
@override
void initState() {
// TODO: implement initState
super.initState();
this._refreshData();
}
@override
Widget build(BuildContext context) {
return Container(
child: this.heartBeatList != null && this.heartBeatList.length > 0
? _buildContent()
: _noDataWidget(),
);
}
Widget _buildContent() {
return EasyRefresh(
refreshHeader: ClassicsHeader(
key: _headerKey,
bgColor: Colors.white,
textColor: Colors.pink,
moreInfoColor: Colors.pink,
refreshReadyText: '下拉刷新',
refreshingText: '正在努力刷新',
refreshedText: '加载完成',
showMore: true,
moreInfo: '正在加载中',
),
refreshFooter: ClassicsFooter(
key: _footerKey,
bgColor: Colors.white,
textColor: Colors.pink,
moreInfoColor: Colors.pink,
showMore: true,
noMoreText: '暂时没有更多了',
loadReadyText: '上拉加载',
loadedText: '加载完毕',
loadText: '上拉加载更多',
loadingText: '正在努力加载更多',
moreInfo: '正在加载中',
),
child: new StaggeredGridView.countBuilder(
itemCount:
this.heartBeatList.length > 0 ? this.heartBeatList.length : 0,
primary: false,
crossAxisCount: 4,
mainAxisSpacing: ScreenUtil().setWidth(30),
crossAxisSpacing: ScreenUtil().setWidth(30),
itemBuilder: (BuildContext context, int index) => new Container(
height: ScreenUtil().setHeight(582),
color: Colors.transparent,
child: _buildImageItem(heartBeatList[index])),
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index.isEven ? 3 : 2.5),
padding: EdgeInsets.only(
left: ScreenUtil().setWidth(32), right: ScreenUtil().setWidth(32)),
),
loadMore: () async {
print('没有更多了.......');
_addMoreData();
},
onRefresh: () async {
print('下拉刷新~~~~');
_refreshData();
},
);
}
/// DetailItem
Widget _buildImageItem(HeartBeatList item) {
return new GestureDetector(
onTap: () {
Toast.show("点击了");
},
child: Container(
decoration: BoxDecoration(
color: Color(0xffF3F4F5),
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: NetworkImage(
item != null && item.photoSrc != null ? item.photoSrc : ''),
fit: BoxFit.cover) //设置图片的填充模式
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
// 顶部阴影
Container(
height: ScreenUtil().setHeight(129),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF030303).withOpacity(0.06),
Color(0xFF565656).withOpacity(0.06),
],
begin: Alignment(gradient['beginX'], gradient['beginY']),
end: Alignment(gradient['endX'], gradient['endY'])),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0),
),
),
child: Container(
margin: EdgeInsets.only(
left: ScreenUtil().setWidth(10),
right: ScreenUtil().setWidth(17),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: ScreenUtil().setHeight(17)),
child: Row(
children: <Widget>[
Icon(
MyIcons.heart,
size: ScreenUtil().setSp(40),
color: Colors.white,
),
Container(
margin: EdgeInsets.only(
left: ScreenUtil().setWidth(5),
top: ScreenUtil().setWidth(5),
),
child: Text(
item != null && item.praises != null
? item.praises.toString()
: '',
style: TextStyle(
fontSize: ScreenUtil().setSp(20),
color: Colors.white,
),
textAlign: TextAlign.center,
),
)
],
),
),
Container(
margin: EdgeInsets.only(top: ScreenUtil().setHeight(19)),
child: ClipOval(
child: Container(
color: Colors.black.withOpacity(0.24),
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
child: Icon(
MyIcons.lock,
size: ScreenUtil().setSp(42),
color: Colors.white,
),
),
),
),
],
),
),
),
// 底部阴影
Container(
height: ScreenUtil().setHeight(129),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF030303).withOpacity(0.06),
Color(0xFF565656).withOpacity(0.06),
],
begin: Alignment(gradient['beginX'], gradient['beginY']),
end: Alignment(gradient['endX'], gradient['endY'])),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// 标签
Container(
margin: EdgeInsets.only(top: ScreenUtil().setHeight(33)),
child: Row(
children: <Widget>[
// 性别标识
item.sex == 1
? Container(
margin: EdgeInsets.only(
left: ScreenUtil().setHeight(22)),
child: ClipOval(
child: Container(
color: Color(0xff6CC1FD),
padding: EdgeInsets.all(
ScreenUtil().setWidth(3)),
child: Icon(
MyIcons.sex_boy,
size: ScreenUtil().setSp(20),
color: Colors.white,
),
),
),
)
: Container(
margin: EdgeInsets.only(
left: ScreenUtil().setHeight(22)),
child: ClipOval(
child: Container(
color: MyColors.primary,
padding: EdgeInsets.all(
ScreenUtil().setWidth(3)),
child: Icon(
MyIcons.sex_girl,
size: ScreenUtil().setSp(20),
color: Colors.white,
),
),
),
),
// 认证标识
item.user.wxAuth != null && item.user.wxAuth != 0
? Container(
margin: EdgeInsets.only(
left: ScreenUtil().setHeight(9)),
child: Image(
image: NetworkImage(
'https://oss.pocketuniversity.cn/media/2019-01-05/5c3029ad417ce.png'),
width: ScreenUtil().setWidth(25),
),
)
: Container(),
SizedBox(
width: ScreenUtil().setWidth(5),
),
// VIP标识
VipTag(item.user?.beVipAt ?? 0,
item.user?.supvipEndat ?? 0, 0)
],
),
),
// 描述
Container(
margin: EdgeInsets.only(
left: ScreenUtil().setWidth(21),
right: ScreenUtil().setWidth(21)),
child: Text(
item.updatedAt != null
? DateUtil.howLongAgo(item.updatedAt) + '心动过你'
: '',
overflow: TextOverflow.ellipsis,
maxLines: 1,
textAlign: TextAlign.left,
style: TextStyle(
fontSize: ScreenUtil().setSp(31),
color: Colors.white,
),
),
),
],
),
),
],
),
),
);
}
/// 无数据占位
Widget _noDataWidget() {
return Container(
child: Center(
child: Column(
children: <Widget>[
// 图片
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(199),
),
child: Image(
image: Utils.getAssetImgWithPath('nodata_heartBeatMine'),
width: ScreenUtil().setWidth(451),
height: ScreenUtil().setHeight(357),
fit: BoxFit.cover,
),
),
// 文字
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(29),
),
child: Text(
'你目前还没有心动的人～',
style: TextStyle(
color: Color(0xFF999999), fontSize: ScreenUtil().setSp(30)),
),
),
// 按钮
GestureDetector(
onTap: () {
Toast.show('去首页心动');
},
child: Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(70),
),
width: ScreenUtil().setWidth(520),
height: ScreenUtil().setHeight(100),
decoration: BoxDecoration(
color: Color(0xffFFF1F2),
// 设置渐变色
gradient: LinearGradient(
colors: [Color(0xFFFFF9FB1), Color(0xFFFF69A2)],
begin: Alignment(-1, -1),
end: Alignment(1.0, 0.56),
),
borderRadius:
BorderRadius.circular(ScreenUtil().setHeight(50)),
),
child: Center(
child: Text(
'去首页心动',
style: TextStyle(
color: Colors.white, fontSize: ScreenUtil().setSp(35)),
),
),
),
),
],
),
),
);
}
/// 下拉刷新数据
Future<Null> _refreshData() async {
_page = 0;
_getPostData(false);
}
/// 上拉加载数据
Future<Null> _addMoreData() async {
_page++;
_getPostData(true);
}
/// 获取我心动的列表数据
void _getPostData(bool _beAdd) async {
print('page:${_page}');
var r = await HeartBeatDao.getMyHeartBeatAllList(page: _page);
setState(() {
if (!_beAdd) {
heartBeatList.clear();
heartBeatList = r.data;
} else {
heartBeatList.addAll(r.data);
}
});
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
_scrollController = ScrollController();
_scrollController.addListener(_handleScroll);
}
void _handleScroll() {}
@override
void dispose() {
_scrollController?.removeListener(_handleScroll);
super.dispose();
}
}
2.我心动的列表
import 'dart:ui';
/// 心动我的列表
///
/// created by hujintao
/// created at 2019-09-11
//
import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:fpdxapp/components/blur_widget/blur_widget.dart';
import 'package:fpdxapp/components/vip_tag.dart';
import 'package:fpdxapp/constants/icons.dart';
import 'package:fpdxapp/constants/style.dart';
import 'package:fpdxapp/dao/friends/heartBeat.dart';
import 'package:fpdxapp/model/friends/heartBeat.dart';
import 'package:fpdxapp/utils/date_util.dart';
import 'package:fpdxapp/utils/toast.dart';
import 'package:fpdxapp/utils/utils.dart';
class HeartBeatMineList extends StatefulWidget {
@override
_HeartBeatMineListState createState() => _HeartBeatMineListState();
}
class _HeartBeatMineListState extends State<HeartBeatMineList>
with AutomaticKeepAliveClientMixin {
//加载更多key 必填
GlobalKey<RefreshFooterState> _footerKey =
new GlobalKey<RefreshFooterState>();
//下拉刷新key 必填
GlobalKey<RefreshHeaderState> _headerKey =
new GlobalKey<RefreshHeaderState>();
List<HeartBeatList> heartBeatList = [];
int _page;
ScrollController _scrollController;
@override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
/// 渐变色
final gradient = Utils.parseAngleToAlignment(90);
@override
void initState() {
// TODO: implement initState
super.initState();
this._refreshData();
}
/// 下拉刷新数据
Future<Null> _refreshData() async {
_page = 0;
_getPostData(false);
}
/// 上拉加载数据
Future<Null> _addMoreData() async {
_page++;
_getPostData(true);
}
/// 获取我心动的列表数据
void _getPostData(bool _beAdd) async {
print('page:${_page}');
var r = await HeartBeatDao.getHeartBeatMineAllList(page: _page);
setState(() {
if (!_beAdd) {
heartBeatList.clear();
heartBeatList = r.data;
} else {
heartBeatList.addAll(r.data);
}
});
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
_scrollController = ScrollController();
_scrollController.addListener(_handleScroll);
}
void _handleScroll() {}
@override
void dispose() {
_scrollController?.removeListener(_handleScroll);
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container(
child: this.heartBeatList != null && this.heartBeatList.length > 0
? _buildContent()
: _noDataWidget(),
);
}
Widget _buildContent() {
return EasyRefresh(
refreshHeader: ClassicsHeader(
key: _headerKey,
bgColor: Colors.white,
textColor: Colors.pink,
moreInfoColor: Colors.pink,
refreshReadyText: '下拉刷新',
refreshingText: '正在努力刷新',
refreshedText: '加载完成',
showMore: true,
moreInfo: '正在加载中',
),
refreshFooter: ClassicsFooter(
key: _footerKey,
bgColor: Colors.white,
textColor: Colors.pink,
moreInfoColor: Colors.pink,
showMore: true,
noMoreText: '暂时没有更多了',
loadReadyText: '上拉加载',
loadedText: '加载完毕',
loadText: '上拉加载更多',
loadingText: '正在努力加载更多',
moreInfo: '正在加载中',
),
child: new StaggeredGridView.countBuilder(
itemCount:
this.heartBeatList.length > 0 ? this.heartBeatList.length : 0,
primary: false,
crossAxisCount: 4,
mainAxisSpacing: ScreenUtil().setWidth(30),
crossAxisSpacing: ScreenUtil().setWidth(30),
itemBuilder: (BuildContext context, int index) => new Container(
color: Colors.transparent,
child: _buildImageItem(heartBeatList[index])),
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index.isEven ? 3 : 2.5),
padding: EdgeInsets.only(
left: ScreenUtil().setWidth(32), right: ScreenUtil().setWidth(32)),
),
loadMore: () async {
print('没有更多了.......');
_addMoreData();
},
onRefresh: () async {
print('下拉刷新~~~~');
_refreshData();
},
);
}
/// DetailItem
Widget _buildImageItem(HeartBeatList item) {
return new GestureDetector(
onTap: () {
Toast.show("点击了");
},
child: Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Color(0xffF3F4F5), offset: Offset(1, 1), spreadRadius: 1)
],
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0),
),
),
child: Stack(
overflow: Overflow.clip,
alignment: Alignment(-1, 1),
children: <Widget>[
// 背景图片
Container(
decoration: BoxDecoration(
color: Color(0xffF3F4F5),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0),
),
image: DecorationImage(
image: NetworkImage(item != null && item.photoSrc != null
? item.photoSrc
: ''),
fit: BoxFit.cover) //设置图片的填充模式
),
margin: EdgeInsets.only(bottom: ScreenUtil().setHeight(20)),
),
// 矩形高斯模糊效果
BlurRectWidget(
child: Container(),
opacity: 0.8,
),
// 主题
Positioned(
top: 0,
left: 0,
right: 0,
bottom: ScreenUtil().setHeight(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
// 顶部阴影
Container(
height: ScreenUtil().setHeight(129),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF030303).withOpacity(0.06),
Color(0xFF565656).withOpacity(0.06),
],
begin:
Alignment(gradient['beginX'], gradient['beginY']),
end: Alignment(gradient['endX'], gradient['endY'])),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0),
),
),
child: Container(
margin: EdgeInsets.only(
left: ScreenUtil().setWidth(10),
right: ScreenUtil().setWidth(17),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(17)),
child: Row(
children: <Widget>[
Icon(
MyIcons.heart,
size: ScreenUtil().setSp(40),
color: Colors.white,
),
Container(
margin: EdgeInsets.only(
left: ScreenUtil().setWidth(5),
top: ScreenUtil().setWidth(5),
),
child: Text(
item != null && item.praises != null
? item.praises.toString()
: '',
style: TextStyle(
fontSize: ScreenUtil().setSp(20),
color: Colors.white,
),
textAlign: TextAlign.center,
),
)
],
),
),
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(19)),
child: ClipOval(
child: Container(
color: Colors.black.withOpacity(0.24),
padding:
EdgeInsets.all(ScreenUtil().setWidth(10)),
child: Icon(
MyIcons.lock,
size: ScreenUtil().setSp(42),
color: Colors.white,
),
),
),
),
],
),
),
),
// 底部阴影
Container(
height: ScreenUtil().setHeight(129),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF030303).withOpacity(0.06),
Color(0xFF565656).withOpacity(0.06),
],
begin:
Alignment(gradient['beginX'], gradient['beginY']),
end: Alignment(gradient['endX'], gradient['endY'])),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// 标签
Container(
margin:
EdgeInsets.only(top: ScreenUtil().setHeight(33)),
child: Row(
children: <Widget>[
// 性别标识
item.sex == 1
? Container(
margin: EdgeInsets.only(
left: ScreenUtil().setHeight(22)),
child: ClipOval(
child: Container(
color: Color(0xff6CC1FD),
padding: EdgeInsets.all(
ScreenUtil().setWidth(3)),
child: Icon(
MyIcons.sex_boy,
size: ScreenUtil().setSp(20),
color: Colors.white,
),
),
),
)
: Container(
margin: EdgeInsets.only(
left: ScreenUtil().setHeight(22)),
child: ClipOval(
child: Container(
color: MyColors.primary,
padding: EdgeInsets.all(
ScreenUtil().setWidth(3)),
child: Icon(
MyIcons.sex_girl,
size: ScreenUtil().setSp(20),
color: Colors.white,
),
),
),
),
// 认证标识
item.user.wxAuth != null && item.user.wxAuth != 0
? Container(
margin: EdgeInsets.only(
left: ScreenUtil().setHeight(9)),
child: Image(
image: NetworkImage(
'https://oss.pocketuniversity.cn/media/2019-01-05/5c3029ad417ce.png'),
width: ScreenUtil().setWidth(25),
),
)
: Container(),
SizedBox(
width: ScreenUtil().setWidth(5),
),
// VIP标识
VipTag(item.user?.beVipAt ?? 0,
item.user?.supvipEndat ?? 0, 0)
],
),
),
// 描述
Container(
margin: EdgeInsets.only(
left: ScreenUtil().setWidth(21),
right: ScreenUtil().setWidth(21)),
child: Text(
item.updatedAt != null
? DateUtil.howLongAgo(item.updatedAt) + '心动过你'
: '',
overflow: TextOverflow.ellipsis,
maxLines: 1,
textAlign: TextAlign.left,
style: TextStyle(
fontSize: ScreenUtil().setSp(31),
color: Colors.white,
),
),
),
],
),
),
],
),
),
// 进度条
Container(
height: ScreenUtil().setHeight(20),
child: _ProgressBar(
start: 0,
end: 0,
),
),
],
),
),
);
}
/// 无数据占位
Widget _noDataWidget() {
return Container(
child: Center(
child: Column(
children: <Widget>[
// 图片
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(199),
),
child: Image(
image: Utils.getAssetImgWithPath('nodata_myHeartBeat'),
width: ScreenUtil().setWidth(451),
height: ScreenUtil().setHeight(357),
fit: BoxFit.cover,
),
),
// 文字
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(29),
),
child: Text(
'你目前还没有心动的人～',
style: TextStyle(
color: Color(0xFF999999), fontSize: ScreenUtil().setSp(30)),
),
),
],
),
),
);
}
/// 创建交友卡片 占位
Widget _noIDCardWidget() {
return Container(
child: Center(
child: Column(
children: <Widget>[
// 图片
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(199),
),
child: Image(
image: Utils.getAssetImgWithPath('nodata_heartBeatMine_noID'),
width: ScreenUtil().setWidth(451),
height: ScreenUtil().setHeight(357),
fit: BoxFit.cover,
),
),
// 文字
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(29),
),
child: Text(
'创建交友卡片后，可解锁“心动我的”人',
style: TextStyle(
color: Color(0xFF999999), fontSize: ScreenUtil().setSp(30)),
),
),
// 按钮
GestureDetector(
onTap: () {
Toast.show('创建交友卡片');
},
child: Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(70),
),
width: ScreenUtil().setWidth(520),
height: ScreenUtil().setHeight(100),
decoration: BoxDecoration(
color: Color(0xffFFF1F2),
// 设置渐变色
gradient: LinearGradient(
colors: [Color(0xFFFFF9FB1), Color(0xFFFF69A2)],
begin: Alignment(-1, -1),
end: Alignment(1.0, 0.56),
),
borderRadius:
BorderRadius.circular(ScreenUtil().setHeight(50)),
),
child: Center(
child: Text(
'创建交友卡片',
style: TextStyle(
color: Colors.white, fontSize: ScreenUtil().setSp(35)),
),
),
),
),
],
),
),
);
}
}
/// 进度条
class _ProgressBar extends StatelessWidget {
/// 起始进度, <1
final double start;
/// 结束进度, <=1
final double end;
_ProgressBar({this.start, this.end});
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: Future.delayed(const Duration(milliseconds: 300)),
builder: (_, data) => AnimatedContainer(
height: ScreenUtil().setHeight(6),
width: MediaQuery.of(context).size.width * this.end,
duration: Duration(milliseconds: 300),
decoration: BoxDecoration(
color: MyColors.primary,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0),
),
),
));
}
}
效果图
瀑布流-效果图.gif
补充
1.瀑布流关键代码
Widget _buildContent() {
return EasyRefresh(
refreshHeader: ClassicsHeader(
key: _headerKey,
bgColor: Colors.white,
textColor: Colors.pink,
moreInfoColor: Colors.pink,
refreshReadyText: '下拉刷新',
refreshingText: '正在努力刷新',
refreshedText: '加载完成',
showMore: true,
moreInfo: '正在加载中',
),
refreshFooter: ClassicsFooter(
key: _footerKey,
bgColor: Colors.white,
textColor: Colors.pink,
moreInfoColor: Colors.pink,
showMore: true,
noMoreText: '暂时没有更多了',
loadReadyText: '上拉加载',
loadedText: '加载完毕',
loadText: '上拉加载更多',
loadingText: '正在努力加载更多',
moreInfo: '正在加载中',
),
child: new StaggeredGridView.countBuilder(
itemCount:
this.heartBeatList.length > 0 ? this.heartBeatList.length : 0,
primary: false,
crossAxisCount: 4,
mainAxisSpacing: ScreenUtil().setWidth(30),
crossAxisSpacing: ScreenUtil().setWidth(30),
itemBuilder: (BuildContext context, int index) => new Container(
height: ScreenUtil().setHeight(582),
color: Colors.transparent,
child: _buildImageItem(heartBeatList[index])),
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index.isEven ? 3 : 2.5),
padding: EdgeInsets.only(
left: ScreenUtil().setWidth(32), right: ScreenUtil().setWidth(32)),
),
loadMore: () async {
print('没有更多了.......');
_addMoreData();
},
onRefresh: () async {
print('下拉刷新~~~~');
_refreshData();
},
);
}
2.高斯模糊效果
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
/// 矩形高斯模糊效果
class BlurRectWidget extends StatefulWidget {
final Widget child;
/// 模糊值
final double sigmaX;
final double sigmaY;
/// 透明度
final double opacity;
/// 外边距
final double blurMargin;
const BlurRectWidget(
{Key key,
this.child,
this.sigmaX,
this.sigmaY,
this.opacity,
this.blurMargin})
: super(key: key);
@override
_BlurRectWidgetState createState() => _BlurRectWidgetState();
}
class _BlurRectWidgetState extends State<BlurRectWidget> {
@override
Widget build(BuildContext context) {
return Container(
margin: widget.blurMargin != null
? widget.blurMargin
: EdgeInsets.only(bottom: ScreenUtil().setHeight(20)),
child: ClipRRect(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10),topRight: Radius.circular(10)),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: this.widget.sigmaX != null ? this.widget.sigmaX : 20,
sigmaY: this.widget.sigmaY != null ? this.widget.sigmaY : 20,
),
child: Container(
color: Colors.white10,
child: this.widget.opacity != null
? Opacity(
opacity: widget.opacity,
child: this.widget.child,
)
: this.widget.child,
),
),
),
);
}
}
网友评论