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;  
}  
}
相关推荐
2501_916008894 小时前
iOS 发布全流程详解,从开发到上架的流程与跨平台使用 开心上架 发布实战
android·macos·ios·小程序·uni-app·cocoa·iphone
4Forsee4 小时前
【Android】浅析 Android 的 IPC 跨进程通信机制
android·java
叶羽西5 小时前
如何区分Android、Android Automotive、Android Auto
android
用户2018792831675 小时前
用 “奶茶店订单系统” 讲懂 MVI 架构
android
LiuYaoheng5 小时前
【Android】布局优化:include、merge、ViewStub的使用及注意事项
android·java
未来猫咪花6 小时前
Riverpod 3.0:一个过度设计的反面教材
flutter
Kapaseker6 小时前
Kotlin Flow 的 emit 和 tryEmit 有什么区别
android·kotlin
消失的旧时光-19437 小时前
Flutter 并发编程全解:从零掌握 Isolate
flutter
好好学习啊天天向上7 小时前
Android Studio 撕开安卓手机投屏
android·智能手机·android studio
Android-Flutter7 小时前
android - JPG图片转换HDR图片,heic格式
android