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;  
}  
}
相关推荐
爬虫程序猿8 小时前
利用爬虫按关键字搜索淘宝商品实战指南
android·爬虫
顾北川_野8 小时前
Android ttyS2无法打开该如何配置 + ttyS0和ttyS1可以
android·fpga开发
wzj_what_why_how11 小时前
Android网络层架构:统一错误处理的问题分析到解决方案与设计实现
android·架构
千里马学框架11 小时前
User手机上如何抓取界面的布局uiautomatorviewer
android·智能手机·aosp·uiautomator·布局抓取·user版本
阿巴~阿巴~12 小时前
操作系统核心技术剖析:从Android驱动模型到鸿蒙微内核的国产化实践
android·华为·harmonyos
古希腊被code拿捏的神12 小时前
【Flutter】面试记录
flutter·面试·职场和发展
nc_kai12 小时前
Flutter 之 table_calendar 控件
flutter
0wioiw012 小时前
Flutter基础(前端教程⑨-图片)
前端·flutter
Engandend13 小时前
Flutter与iOS混合开发交互
flutter·ios·程序员
hsx66613 小时前
使用 MaterialShapeDrawable 自定义各种形状的 View
android