Flutter,ListView嵌入吸顶效果再嵌入ViewPage,ViewPaeg再嵌入ListView代码实现

需求介绍

在主页中,需要实现既能上下滚动,又要有吸顶效果,并且吸顶效果下还需要实现TabBar与PageView的结合。

就像掘金的主页交互一样。

看效果

代码

dart 复制代码
import 'dart:math';  
import 'package:flutter/material.dart';  
import 'package:get/get.dart';  
import '../controllers/home_controller.dart';  
  
class HomeView extends GetView<HomeController> {  
const HomeView({Key? key}) : super(key: key);  
  
@override  
Widget build(BuildContext context) {  
return Material(  
child: DefaultTabController(  
length: 2,  
child: Column(  
children: [  
Expanded(  
child: NestedScrollView(  
headerSliverBuilder:  
(BuildContext context, bool innerBoxIsScrolled) {  
return <Widget>[  
SliverToBoxAdapter(  
child: Container(  
color: Colors.blue,  
height: 200,  
),  
),  
SliverPersistentHeader(  
delegate: _SliverAppBarDelegate(  
minHeight: 50,  
maxHeight: 50,  
child: Container(  
color: Colors.green,  
),  
),  
pinned: true,  
),  
];  
},  
body: PageView(  
children: <Widget>[  
CustomScrollView(  
slivers: [  
SliverList(  
delegate:  
SliverChildBuilderDelegate((context, index) {  
return ListTile(  
title: Text('index $index'),  
);  
}, childCount: 100),  
)  
],  
),  
CustomScrollView(  
slivers: [  
SliverList(  
delegate:  
SliverChildBuilderDelegate((context, index) {  
return ListTile(  
title: Text('index $index'),  
);  
}, childCount: 100),  
)  
],  
),  
],  
),  
),  
),  
Container(  
height: 30,  
)  
],  
),  
),  
);  
}  
}  
  
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {  
_SliverAppBarDelegate({  
required this.minHeight,  
required this.maxHeight,  
required this.child,  
});  
  
final double minHeight;  
final double maxHeight;  
final Widget child;  
  
@override  
double get minExtent => minHeight;  
  
@override  
double get maxExtent => max(maxHeight, minHeight);  
  
@override  
Widget build(  
BuildContext context, double shrinkOffset, bool overlapsContent) {  
return SizedBox.expand(child: child);  
}  
  
@override  
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {  
return maxHeight != oldDelegate.maxHeight ||  
minHeight != oldDelegate.minHeight ||  
child != oldDelegate.child;  
}  
}
相关推荐
longxibo13 小时前
【AIBIZ低代码平台:能长出业务系统的平台】
android·低代码·rxjava
程序员老刘·21 小时前
Flutter 3.50更新,开发者应该关注什么?
flutter·ai编程·跨平台开发
AI_Gump21 小时前
Harness篇|DeepSeek Harness 上手机:五条安卓移植路线与 App 内 Linux 拆解
android·linux·人工智能·智能手机·deepseek
疯华整猫1 天前
否决 Flutter 提案那天,我发现自己也说不清 Framework 管什么
android
传奇开心果编程2 天前
【Flutter踩坑排雷】第25课:ScrollController 误用坑|跳转失效、监听泄漏与“控制器未附加”
android·flutter·ios·移动开发·跨平台·dart·声明式ui
慕容雪_2 天前
Capacitor8-Android打包完整手册
android·打包·capacitor
程序员老刘2 天前
Flutter 3.50更新,开发者应该关注什么?
flutter·ai编程·客户端
阿杰m2 天前
Android源码第十三章:Bluetooth——沿一次发现走到控制器
android
booboosui2 天前
派活给另一个 AI:前后两次文件夹快照,就是交付清单
android
普通人62 天前
MySQL_FIND_IN_SET函数详解
android·数据库·mysql