import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_campus/config/app_colors.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'component/banner_page.dart';
class LifePage extends StatefulWidget {
LifePage({Key key}) : super(key: key);
@override
_LifePageState createState() => _LifePageState();
}
class _LifePageState extends State
with AutomaticKeepAliveClientMixin, SingleTickerProviderStateMixin {
//在这里标签页面使用的是TabView所以需要创建一个控制器
TabController tabController;
//页面初始化方法
@override
void initState() {
super.initState();
//初始化
tabController = new TabController(length: 3, vsync: this);
}
// Future
_onLoadMore() async { // setState(() {
// _load = 2;
// });
// await Future.delayed(Duration(milliseconds: 1500)); //模拟网络请求
// setState(() {
// _imageList = _imageList + 5;
// _load = 0;
// });
// print("_onLoadMore");
// }
//页面销毁回调生命周期
@override
void dispose() {
tabController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.page,
//下拉刷新
body: RefreshIndicator(
//可滚动组件在滚动时会发送ScrollNotification类型的通知
notificationPredicate: (ScrollNotification notifation) {
//该属性包含当前ViewPort及滚动位置等信息
ScrollMetrics scrollMetrics = notifation.metrics;
if (scrollMetrics.minScrollExtent == 0) {
return true;
} else {
return false;
}
},
//下拉刷新回调方法
onRefresh: () async {
//模拟网络刷新 等待2秒
await Future.delayed(Duration(milliseconds: 2000));
//返回值以结束刷新
return Future.value(true);
},
color: AppColors.active_one,
child: buildNestedScrollView(),
),
);
}
//NestedScrollView 的基本使用
Widget buildNestedScrollView() {
//滑动视图
return NestedScrollView(
//配置可折叠的头布局
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return [buildSliverAppBar()];
},
//页面的主体内容
body: buidChildWidget(),
);
}
//SliverAppBar
//flexibleSpace可折叠的内容区域
buildSliverAppBar() {
return SliverAppBar(
title: buildHeader(),
//标题居中
centerTitle: true,
//当此值为true时 SliverAppBar 会固定在页面顶部
//当此值为fase时 SliverAppBar 会随着滑动向上滑动
pinned: true,
//当值为true时 SliverAppBar设置的title会随着上滑动隐藏
//然后配置的bottom会显示在原AppBar的位置
//当值为false时 SliverAppBar设置的title会不会隐藏
//然后配置的bottom会显示在原AppBar设置的title下面
floating: false,
//当snap配置为true时，向下滑动页面，SliverAppBar（以及其中配置的flexibleSpace内容）会立即显示出来，
//反之当snap配置为false时，向下滑动时，只有当ListView的数据滑动到顶部时，SliverAppBar才会下拉显示出来。
snap: false,
elevation: 0.0,
//展开的高度
expandedHeight: 380,
//AppBar下的内容区域
flexibleSpace: FlexibleSpaceBar(
//背景
//配置的是一个widget也就是说在这里可以使用任意的
//Widget组合 在这里直接使用的是一个图片
background: buildFlexibleSpaceWidget(),
),
bottom: buildFlexibleTooBarWidget(),
);
}
//通常在用到 PageView + BottomNavigationBar 或者 TabBarView + TabBar 的时候
//大家会发现当切换到另一页面的时候, 前一个页面就会被销毁, 再返回前一页时, 页面会被重建,
//随之数据会重新加载, 控件会重新渲染 带来了极不好的用户体验.
//由于TabBarView内部也是用的是PageView, 因此两者的解决方式相同
//页面的主体内容
Widget buidChildWidget() {
return TabBarView(
controller: tabController,
children:
[ ItemPage1(1),
ItemPage1(2),
ItemPage1(3),
],
);
}
//构建SliverAppBar的标题title
buildHeader() {
//透明组件
return Container(
width: double.infinity,
padding: EdgeInsets.only(left: 10),
height: 38,
decoration: BoxDecoration(
color: AppColors.nav.withOpacity(0.5),
border: Border.all(color: AppColors.nav),
borderRadius: BorderRadius.circular(30),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.search_rounded,
size: 18,
color: AppColors.unactive_one,
),
SizedBox(
width: 4,
),
Text(
"搜索",
style: TextStyle(
fontSize: 14,
color: AppColors.unactive_one,
),
),
],
),
);
}
//显示图片与角标区域Widget构建
buildFlexibleSpaceWidget() {
return Column(
children: [
Container(
height: 240,
child: BannerHomepage(
isTitle: false,
),
),
Container(
child: Row(
children: [
Expanded(
child: Container(
height: 120,
color: Colors.blueGrey,
// child: Image.asset("lib/images/father.jpg"),
),
),
Expanded(
child: Container(
color: Colors.brown,
height: 120,
// child: Image.asset("lib/images/father.jpg"),
),
),
],
),
)
],
);
}
//[SliverAppBar]的bottom属性配制
Widget buildFlexibleTooBarWidget() {
//[PreferredSize]用于配置在AppBar或者是SliverAppBar
//的bottom中 实现 PreferredSizeWidget
return PreferredSize(
//定义大小
preferredSize: Size(MediaQuery.of(context).size.width, 44),
//配置任意的子Widget
child: Container(
alignment: Alignment.center,
child: Container(
color: Colors.grey[200],
//随着向上滑动，TabBar的宽度逐渐增大
//父布局Container约束为 center对齐
//所以程现出来的是中间x轴放大的效果
width: MediaQuery.of(context).size.width,
child: TabBar(
controller: tabController,
tabs:
[ new Tab(
text: "标签一",
),
new Tab(
text: "标签二",
),
new Tab(
text: "标签三",
),
// new Tab(
// text: "标签四",
// ),
// new Tab(
// text: "标签五",
// ),
],
),
),
),
);
}
@override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
}
// ignore: must_be_immutable
// 写tab标签内容
class ItemPage1 extends StatefulWidget {
int pageIndex;
// var _scrollController;
ItemPage1(this.pageIndex);
@override
_TestPageState createState() => _TestPageState();
}
class _TestPageState extends State
with AutomaticKeepAliveClientMixin {
final List
imageurls = [ 'https://img1.baidu.com/it/u=299493551,3101108057&fm=26&fmt=auto&gp=0.jpg',
'https://img2.baidu.com/it/u=2934650078,2074249663&fm=26&fmt=auto&gp=0.jpg',
'https://img2.baidu.com/it/u=2581171028,305322159&fm=26&fmt=auto&gp=0.jpg',
'https://img0.baidu.com/it/u=472512686,22476733&fm=26&fmt=auto&gp=0.jpg',
'https://img0.baidu.com/it/u=3586385451,1417839082&fm=26&fmt=auto&gp=0.jpg',
'https://img2.baidu.com/it/u=3261105611,216706365&fm=26&fmt=auto&gp=0.jpg',
'https://img0.baidu.com/it/u=3730867295,676191326&fm=26&fmt=auto&gp=0.jpg',
'https://img2.baidu.com/it/u=2763436163,120255117&fm=26&fmt=auto&gp=0.jpg',
'https://img2.baidu.com/it/u=1932514789,2732957966&fm=26&fmt=auto&gp=0.jpg',
'https://img0.baidu.com/it/u=3981878219,3170637539&fm=26&fmt=auto&gp=0.jpg'
];
@override
bool get wantKeepAlive => true;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
super.build(context);
return StaggeredGridView.countBuilder(
padding: EdgeInsets.all(8),
crossAxisCount: 2,
mainAxisSpacing: 8,
crossAxisSpacing: 8,
itemCount: 100,
staggeredTileBuilder: (_) => StaggeredTile.fit(1),
itemBuilder: (context, index) {
index = new Random().nextInt(10);
return Container(
decoration: BoxDecoration(
color: AppColors.page_one,
borderRadius: BorderRadius.all(
Radius.circular(5.0),
),
),
child: Column(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Image.network(
imageurls[index],
// fit: BoxFit.fitHeight,
fit: BoxFit.fill,
),
),
// Padding(padding: padding)
Padding(
padding: EdgeInsets.only(top: 5, left: 5),
child: Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage(
'https://img2.baidu.com/it/u=3261105611,216706365&fm=26&fmt=auto&gp=0.jpg'),
radius: 10,
),
Padding(padding: EdgeInsets.only(left: 10)),
Text(
'Fighting',
style: TextStyle(
fontSize: 14,
color: AppColors.text_two,
),
)
],
),
),
Padding(
padding: EdgeInsets.only(top: 5, left: 5),
child: Row(
children: [
Container(
decoration: BoxDecoration(
color: AppColors.topic_one,
borderRadius: BorderRadius.all(Radius.circular(2.0)),
),
child: Text(
'#新手养狗',
style: TextStyle(
fontSize: 12,
color: AppColors.active_one,
),
),
)
],
),
),
Padding(
padding: EdgeInsets.all(5),
child: Text(
'狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗狗',
style: TextStyle(
fontSize: 12,
),
softWrap: true,
textAlign: TextAlign.left,
overflow: TextOverflow.ellipsis,
maxLines: 3,
),
),
Padding(
padding: EdgeInsets.only(left: 5, top: 0, right: 5, bottom: 3),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Icon(
Icons.favorite,
color: AppColors.icon_one,
size: 12,
),
Padding(padding: EdgeInsets.only(left: 3)),
Text(
'5',
style: TextStyle(
color: AppColors.icon_one,
fontSize: 12,
),
),
],
),
Row(
children: [
Icon(
Icons.visibility,
color: AppColors.icon_one,
size: 12,
),
Padding(padding: EdgeInsets.only(left: 3)),
Text(
'56',
style: TextStyle(
color: AppColors.icon_one,
fontSize: 12,
),
),
],
)
],
),
)
],
),
);
},
);
}
}
