Flutter自动吸附头部广告插件sliver_head_automatic_adsorption的使用
Flutter自动吸附头部广告插件sliver_head_automatic_adsorption的使用
sliver_head_automatic_adsorption 是一个自定义的Sliver组件，可以实现头部广告或内容在滚动时自动吸附到顶部的效果。以下是关于如何使用该插件的详细说明和完整示例代码。
1. 插件导入
首先，在 pubspec.yaml 文件中添加 sliver_head_automatic_adsorption 的依赖：
dependencies:
sliver_head_automatic_adsorption:
git:
url: https://github.com/7-bit-zhang/sliver_head_automatic_adsorption.git
ref: last_version
2. 简单使用
以下是一个简单的使用示例，展示了如何创建一个带有自动吸附效果的SliverAppBar，并在其下方显示一个列表：
import 'package:flutter/material.dart';
import 'package:sliver_head_automatic_adsorption/sliver_adsorption_appbar.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: SliverExample(),
);
}
}
class SliverExample extends StatelessWidget {
final ScrollController controller = ScrollController();
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
controller: controller,
slivers: [
SliverAdsorptionAppbar(
controller: controller,
collapsedColors: Colors.yellow, // 折叠后的颜色
slivers: [
SliverList.builder(
itemBuilder: (context, index) {
return Container(
margin: const EdgeInsets.only(bottom: 10),
color: Colors.blue,
height: 100,
child: Center(
child: Text(
"$index",
style: const TextStyle(color: Colors.white, fontSize: 20),
),
),
);
},
itemCount: 50,
),
],
expandedWidget: Container(), // 展开时的内容
),
],
),
);
}
}
3. 完整示例代码
以下是一个更复杂的示例，展示了如何在展开状态下显示用户信息和相册，并在折叠状态下显示简化的用户信息。这个示例还展示了如何使用 SliverAdsorptionAppbar 来实现头部内容的自动吸附效果。
import 'package:flutter/material.dart';
import 'package:sliver_head_automatic_adsorption/sliver_adsorption_appbar.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: SliverExample(),
);
}
}
class SliverExample extends StatelessWidget {
final ScrollController controller = ScrollController();
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
controller: controller,
slivers: [
SliverAdsorptionAppbar(
controller: controller,
collapsedColors: Colors.white, // 折叠后的颜色
collapsedHeight: 90, // 折叠后的高度
expandedWidget: Container(
padding: const EdgeInsets.only(top: 20, left: 20, right: 20),
color: Colors.white,
child: ListView(
children: [
Row(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(40),
child: Image.network(
"https://p3-passport.byteacctimg.com/img/user-avatar/314da9adcd6dacacb8ea4a18c89639ea~360x360.awebp",
width: 70,
height: 70,
),
),
const SizedBox(width: 10),
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("7_bit", style: TextStyle(fontSize: 18)),
SizedBox(height: 5),
Text("QQ号：210014468", style: TextStyle(color: Colors.black45))
],
),
const Spacer(),
const Column(
children: [
Icon(Icons.fmd_good, color: Colors.black38),
Text("成都", style: TextStyle(color: Colors.black26, fontSize: 12))
],
)
],
),
const SizedBox(height: 10),
const Text(
"个性签名：As long as you want to do something in the world, nothing can stop you",
style: TextStyle(fontSize: 14, color: Colors.black38),
),
const SizedBox(height: 10),
const Text("我的相册：", style: TextStyle(fontSize: 14, color: Colors.black38)),
const SizedBox(height: 10),
SizedBox(
height: 140,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(3),
child: Image.network(
"http://m.qpic.cn/psc?/V13kbO6L0KTqJm/bqQfVz5yrrGYSXMvKr.cqSKDpWMyZO2dUAYR8o62CXAzQZo.y5p1duZz4pNA4PlQvl7P9ITFRCtIVjtH*g1GDSu9mRSfHuyPDcxLtPlZAuQ!/b&bo=OQdABjkHQAYBJwA!&rf=viewer_4",
),
),
const SizedBox(width: 10),
ClipRRect(
borderRadius: BorderRadius.circular(3),
child: Image.network(
"https://m.qpic.cn/psc?/V13kbO6L0KTqJm/LiySpxowE0yeWXwBdXN*SRad5Dx.*riskIwzt*GDBI6wJg6b2PBv8KDPQAQGW6hurmyvmtKTRb86C9VSarCVTRlpd4P1yjq4bsQzBREyLpw!/b&bo=OQdABjkHQAYBByA!&rf=viewer_4",
),
),
const SizedBox(width: 10),
ClipRRect(
borderRadius: BorderRadius.circular(3),
child: Image.network(
"http://m.qpic.cn/psc?/V13kbO6L0KTqJm/bqQfVz5yrrGYSXMvKr.cqa8Sw.0xqGNfx3wgAeQhWrNh.a.P.OXZNe92fmN5ZTLMXAPekcFjFsXQhIiYLhm3H0IuJf*Yl.KkeMSDIywfO8E!/b&bo=QAZLCUAGSwkBFzA!&rf=viewer_4",
),
),
],
),
)
],
),
),
collapsedWidget: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(40),
child: Image.network(
"https://p3-passport.byteacctimg.com/img/user-avatar/314da9adcd6dacacb8ea4a18c89639ea~360x360.awebp",
width: 70,
height: 70,
),
),
const SizedBox(width: 10),
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text("7_bit", style: TextStyle(fontSize: 18)),
SizedBox(height: 5),
Text("QQ号：210014468", style: TextStyle(color: Colors.black45))
],
),
const Spacer(),
const Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.fmd_good, color: Colors.black38),
Text("成都", style: TextStyle(color: Colors.black26, fontSize: 12))
],
)
],
),
),
slivers: [
SliverList.builder(
itemBuilder: (context, index) {
return Container(
margin: const EdgeInsets.only(bottom: 10),
color: Colors.blue,
height: 100,
child: Center(
child: Text(
"$index",
style: const TextStyle(color: Colors.white, fontSize: 20),
),
),
);
},
itemCount: 50,
),
const SliverToBoxAdapter(),
],
),
],
),
);
}
}
更多关于Flutter自动吸附头部广告插件sliver_head_automatic_adsorption的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter自动吸附头部广告插件sliver_head_automatic_adsorption的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
在Flutter中，使用sliver_head_automatic_adsorption插件可以实现自动吸附头部的广告功能。这个插件通常用于列表滚动时，让广告栏保持在顶部直到被新的内容覆盖。下面是一个简单的示例代码，展示如何在Flutter项目中集成和使用这个插件。
首先，确保你已经在pubspec.yaml文件中添加了sliver_head_automatic_adsorption依赖：
dependencies:
flutter:
sdk: flutter
sliver_head_automatic_adsorption: ^最新版本号 # 请替换为实际的最新版本号
然后，运行flutter pub get来安装依赖。
接下来，在你的Dart文件中，你可以按照以下方式使用SliverHeadAutomaticAdsorption：
import 'package:flutter/material.dart';
import 'package:sliver_head_automatic_adsorption/sliver_head_automatic_adsorption.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Sliver Head Automatic Adsorption Demo'),
),
body: CustomScrollView(
slivers: <Widget>[
SliverHeadAutomaticAdsorption(
// 广告栏内容
header: Container(
height: 100,
color: Colors.red,
child: Center(
child: Text(
'广告栏',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
// 列表内容
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(
title: Text('列表项 $index'),
);
},
childCount: 50,
),
),
),
],
),
),
);
}
}
在这个示例中：
- 我们首先导入了
sliver_head_automatic_adsorption包。 - 在
MyApp的build方法中，我们创建了一个CustomScrollView，并在其slivers属性中添加了一个SliverHeadAutomaticAdsorption。 SliverHeadAutomaticAdsorption接受两个主要参数：header：这是广告栏的内容，可以是任何Widget。在这个例子中，我们用一个红色的容器来表示广告栏。sliver：这是列表的内容，在这个例子中，我们使用SliverList来展示一系列列表项。
当你运行这个应用时，你会看到一个列表，列表的顶部有一个红色的广告栏。当你滚动列表时，广告栏会保持在顶部，直到被新的列表项覆盖。
请注意，实际使用中你可能需要根据具体需求调整广告栏的高度、样式以及列表项的布局等。此外，确保你使用的是sliver_head_automatic_adsorption插件的最新版本，并查阅其官方文档以获取更多功能和细节。
