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;  
}  
}
相关推荐
介一安全5 分钟前
【Frida Android】基础篇6:Java层Hook基础——创建类实例、方法重载、搜索运行时实例
android·java·网络安全·逆向·安全性测试·frida
沐怡旸3 小时前
【底层机制】【Android】深入理解UI体系与绘制机制
android·面试
啊森要自信3 小时前
【GUI自动化测试】YAML 配置文件应用:从语法解析到 Python 读写
android·python·缓存·pytest·pip·dash
下位子5 小时前
『AI 编程』用 Codex 开发识字小帮手应用
android·openai·ai编程
Zender Han5 小时前
Flutter 实现人脸检测 — 使用 google_mlkit_face_detection
android·flutter·ios
西西学代码5 小时前
Flutter---默认程序(计数器)
flutter
君逸臣劳5 小时前
玩Android Flutter版本,通过项目了解Flutter项目快速搭建开发
android·flutter
叫我龙翔6 小时前
【MySQL】从零开始了解数据库开发 --- 基本查询
android·mysql·数据库开发
2501_916008896 小时前
iOS 26 性能分析深度指南 包含帧率、渲染、资源瓶颈与 KeyMob 协助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
撩得Android一次心动8 小时前
Android adb 基础使用指南
android·adb