標(biāo)題越長(zhǎng)功能越簡(jiǎn)單系列
image.png
實(shí)現(xiàn)的具體效果
實(shí)現(xiàn)的具體效果
實(shí)現(xiàn)思路：用原生RefreshIndicator實(shí)現(xiàn)下拉刷新，CustomScrollView中controller來判斷是否滑動(dòng)到底部
Scaffold(
/**
* 外面包裹下拉刷新控件
* 下拉刷新組件具體屬性
* RefreshIndicator
* ({
* Key key,
* @required this.child,子控件
* this.displacement: 40.0, //觸發(fā)下拉刷新的距離
* @required this.onRefresh, //下拉回調(diào)方法,方法需要有async和await關(guān)鍵字，沒有await，刷新圖標(biāo)立馬消失，沒有async，刷新圖標(biāo)不會(huì)消失
* this.color, //進(jìn)度指示器前景色 默認(rèn)為系統(tǒng)主題色
* this.backgroundColor, //背景色
* this.notificationPredicate: defaultScrollNotificationPredicate,
* })
*/
body: RefreshIndicator(
child: CustomScrollView(
primary: false,
controller: _controller,
physics: ScrollPhysics(),
//滑動(dòng)效果，如阻尼效果等等
// physics: const BouncingScrollPhysics(),
slivers: <Widget>[
getTitle(),//上面的折疊布局
SliverToBoxAdapter(
child: Gaps.vGap10,
),//就是個(gè)間距
SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 250.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 1.2, //子控件寬高比
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
//Item的子組件這里就不展示了，就是一個(gè)層疊布局
return getVideoItem(_sideoEntityList[index], index);
},
childCount: _sideoEntityList.length,
),
),
SliverToBoxAdapter(
child: Visibility(
child: Container(
padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
child: Center(
child: Text(loadingText),
),
),
visible: _provider.isLoadMore,
),
),//Visibility包裹的文字，根據(jù)是否有更多數(shù)據(jù)顯示/隱藏
],
),
onRefresh: () {
//下拉刷新具體操作
return _RrefreshPull().then((value) {
print('success');
}).catchError((error) {
print('failed');
});
},
),
)
ScrollController 控制器的具體實(shí)現(xiàn)
ScrollController _controller;
_controller = ScrollController();
_controller.addListener(() {
int offset = _controller.position.pixels.toInt();
// 如果滑動(dòng)到底部
if (_controller.position.pixels == _controller.position.maxScrollExtent) {
print("滑動(dòng)到底部");
if (isLoding) {
//下拉刷新的具體操作
}
}
});
頭部的折疊布局具體實(shí)現(xiàn)
/// 獲取標(biāo)題布局
Widget getTitle() {
return new SliverAppBar(
leading: GestureDetector(
child: Icon(
Icons.arrow_back,
//這里我主要是為了實(shí)現(xiàn)夜間模式
color: isDark ? Colours.bg_color : Colours.dark_bg_color,
),
onTap: () => Navigator.pop(context),
),
//左側(cè)按鈕
elevation: 4,
//陰影的高度
forceElevated: true,
//是否顯示陰影
backgroundColor: isDark ? Colours.dark_bg_color : Colours.bg_color,
iconTheme: IconThemeData(color: Colors.white, size: 25, opacity: 1),
primary: true,
// appbar是否顯示在屏幕的最上面，為false是顯示在最上面，為true就顯示在狀態(tài)欄的下面
titleSpacing: 16,
expandedHeight: 120.0,
pinned: true,
//是否固定導(dǎo)航欄，為true是固定，為false是不固定，往上滑，導(dǎo)航欄可以隱藏
flexibleSpace: FlexibleSpaceBar(
centerTitle: false,
titlePadding:
const EdgeInsetsDirectional.only(start: 50.0, bottom: 12.0),
title: Text(
'專項(xiàng)視頻課',
style: new TextStyle(fontSize: 20.0, color: isDark ? Colours.dark_text : Colours.text),
),
),
);
}
