Flutter自定义Sliver组件插件sliverbar_with_card的使用
Flutter自定义Sliver组件插件sliverbar_with_card的使用
概述
sliverbar_with_card 是一个用于在 Flutter 中创建带有卡片样式的 SliverAppBar 的插件。它允许开发者轻松地定制背景图像、标题、描述以及操作按钮等元素。
安装
首先，在 pubspec.yaml 文件中添加依赖项：
dependencies:
sliverbar_with_card: ^版本号
然后运行以下命令以安装依赖：
flutter pub get
基本用法
示例代码
import 'package:flutter/material.dart';
import 'package:sliverbar_with_card/sliverbar_with_card.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Example(),
);
}
}
class Example extends StatefulWidget {
[@override](/user/override)
_ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
bool favorito = false;
bool expandText = false;
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: "CardSliverAppBar Example",
home: Material(
child: CardSliverAppBar(
height: 300, // 设置背景高度
background: Image.asset("assets/logo.png", fit: BoxFit.cover), // 背景图片
title: Text("The Walking Dead", // 主标题
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold)),
titleDescription: Text(
"Drama, Action, Adventure, Fantasy, \nScience Fiction, Horror, Thriller", // 副标题
style: TextStyle(color: Colors.black, fontSize: 11)),
card: AssetImage("assets/card.jpg"), // 卡片图片
backButton: true, // 是否显示返回按钮
backButtonColors: [Colors.white, Colors.black], // 返回按钮的颜色
action: IconButton( // 自定义操作按钮
onPressed: () {
setState(() {
favorito = !favorito;
});
},
icon: favorito ? Icon(Icons.favorite) : Icon(Icons.favorite_border),
color: Colors.red,
iconSize: 30.0,
),
body: Container( // 页面主体内容
alignment: Alignment.topLeft,
color: Colors.white,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
_ratingIcon(
Icon(Icons.star),
Text("84%", style: TextStyle(fontWeight: FontWeight.bold))),
_ratingIcon(
Icon(Icons.personal_video),
Text("AMC", style: TextStyle(fontWeight: FontWeight.bold))),
_ratingIcon(
Icon(Icons.people),
Text("TV-MA", style: TextStyle(fontWeight: FontWeight.bold))),
_ratingIcon(
Icon(Icons.av_timer),
Text("45m", style: TextStyle(fontWeight: FontWeight.bold))),
],
),
),
Divider(),
Container(
height: expandText ? 145 : 65,
margin: EdgeInsets.only(left: 30, right: 30, top: 10),
child: InkWell(
onTap: () {
setState(() {
expandText = !expandText;
});
},
child: Text(
"The series centers on sheriff's deputy Rick Grimes, who wakes up from a coma to discover the apocalypse. He becomes the leader of a group of survivours from the Atlanta, Georgia..\n" +
"region as they attempt to sustain themselves and protect themselves not only against attacks by walkers but by other groups of survivors willing to assure their longevity by any means necessary.")),
),
SizedBox(
height: 20,
),
Container(
alignment: Alignment.centerLeft,
margin: EdgeInsets.only(left: 30),
child: Text("Related shows",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 16)),
),
Container(
alignment: Alignment.center,
margin: EdgeInsets.symmetric(vertical: 10),
width: MediaQuery.of(context).size.width,
height: 120,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
_exampleRelatedShow(),
_exampleRelatedShow(),
_exampleRelatedShow(),
_exampleRelatedShow(),
_exampleRelatedShow(),
_exampleRelatedShow(),
_exampleRelatedShow(),
_exampleRelatedShow(),
_exampleRelatedShow(),
_exampleRelatedShow(),
],
),
),
],
),
),
),
));
}
Widget _exampleRelatedShow() {
return Container(
margin: EdgeInsets.symmetric(horizontal: 8, vertical: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8)),
color: Colors.grey,
),
width: 80,
height: 100,
);
}
Widget _ratingIcon(Icon icon, Text text) {
return Container(
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(50)),
color: Colors.grey),
child: IconButton(
onPressed: () {},
icon: icon,
color: Colors.white,
iconSize: 30,
),
),
Divider(),
text
],
),
);
}
}
更多关于Flutter自定义Sliver组件插件sliverbar_with_card的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter自定义Sliver组件插件sliverbar_with_card的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
sliverbar_with_card 是一个用于 Flutter 的自定义 Sliver 组件插件，它允许你在 CustomScrollView 中创建一个带有卡片的 SliverAppBar。这个插件可以帮助你实现一些复杂的滚动效果，比如在滚动时显示或隐藏卡片内容。
安装
首先，你需要在 pubspec.yaml 文件中添加 sliverbar_with_card 插件的依赖：
dependencies:
flutter:
sdk: flutter
sliverbar_with_card: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get 来安装依赖。
使用
以下是一个简单的示例，展示了如何使用 sliverbar_with_card 插件来创建一个带有卡片的 SliverAppBar。
import 'package:flutter/material.dart';
import 'package:sliverbar_with_card/sliverbar_with_card.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'SliverBar with Card Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverBarWithCard(
expandedHeight: 200.0,
cardHeight: 100.0,
cardColor: Colors.blue,
cardChild: Center(
child: Text(
'This is a Card',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
flexibleSpace: FlexibleSpaceBar(
title: Text('SliverBar with Card'),
background: Image.network(
'https://via.placeholder.com/150',
fit: BoxFit.cover,
),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return ListTile(
title: Text('Item $index'),
);
},
childCount: 20,
),
),
],
),
);
}
}