话不多说,懂得自懂上代码
import 'package:flutter/material.dart';
class SliverDemo extends StatefulWidget {
const SliverDemo({
Key? key}) : super(key: key);
State<SliverDemo> createState() => _SliverDemoState();
}
class _SliverDemoState extends State<SliverDemo>
with SingleTickerProviderStateMixin {
TabController? myTabController;
void initState() {
super.initState();
myTabController = TabController(length: 4, vsync: this);
}
Widget build(BuildContext context) {
buildSpace() {
return const Image(
image: NetworkImage(
"https://img0.baidu.com/it/u=1797555725,1345025723&fm=253&fmt=auto&app=138&f=JPEG"),
fit: BoxFit.fill,
);
}
return Scaffold(
body: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return [
SliverAppBar(
expandedHeight: 200,
pinned: true,
flexibleSpace: buildSpace(),
title: const Text("demo"),
floating: true,
leading: const Icon(Icons.home),
actions: const [Icon(Icons.share)],
bottom: TabBar(
labelColor: Colors.lightGreen,
unselectedLabelColor: Colors.pink,
tabs: const [
Tab(text: "a"),
Tab(text: "b"),
Tab(text: "c"),
Tab(text: "d"),
],
controller: myTabController,
),
)
];
},
body: TabBarView(
controller: myTabController,
children: const [
Text("a"),
Text("b"),
Text("c"),
Text("d"),
],
)));
}
}
效果图
修改代码
buildSpace() {
// return const Image(
// image: NetworkImage(
// "https://img0.baidu.com/it/u=1797555725,1345025723&fm=253&fmt=auto&app=138&f=JPEG"),
// fit: BoxFit.fill,
// );
return const FlexibleSpaceBar(
centerTitle: true,
titlePadding: EdgeInsets.zero,
background: Image(
// color: Colors.black,
image: NetworkImage(
"https://img0.baidu.com/it/u=1797555725,1345025723&fm=253&fmt=auto&app=138&f=JPEG"),
fit: BoxFit.fill,
));
}
效果