Flutter横幅列表展示插件banner_listtile的使用
Flutter横幅列表展示插件banner_listtile的使用
Banner Listtile
Banner_Listtile 插件在您需要一个带有内置横幅选项的瓷砖模板时非常有用。您可能见过带有标签（如“New”，“Hot”，“New Collection”等）的横幅，Banner_listtile 正是实现了这样的效果，并且您可以轻松自定义它。
安装
- 将最新版本的此软件包添加到您的
pubspec.yaml文件中，并运行'dart pub get'：
dependancies:
banner_listtile: ^2.3.0
- 在Flutter应用程序中导入并使用该软件包：
import 'package:banner_listtile/banner_listtile.dart';
更新日志
New 2.3.0 Changes
- ✅ 添加了
Position枚举。现在不是布尔值，而是需要Position枚举作为其值。 - 🔀 现在可以在横幅上添加图标而不是文本。
- 🚫 移除了
RandomColor属性。 - ✨ 修复了UI出血问题，使锯齿形图像侧看起来更平滑和锐利。
注意事项
如果您在 Column、Listview 或任何垂直列表内使用它，则不需要为其提供高度属性。但是，当您将其用作单个小部件或嵌套在其他小部件中时，建议您通过给它一个高度属性来定义其高度。如果不这样做，它可能会占用所有可用空间。
示例代码
下面是一个简单的示例，演示如何在Flutter应用中使用 BannerListTile：
class BannerListTileExample extends StatelessWidget {
const BannerListTileExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: BannerListTile(
backgroundColor: Colors.blue,
borderRadius: BorderRadius.circular(8),
bannerPosition: BannerPosition.topRight,
imageContainer: Image(
image: NetworkImage(
"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb1.2.1&auto=format&fit=crop&w=387&q=80"),
fit: BoxFit.cover),
title: Text(
"Lisa",
style: TextStyle(fontSize: 24, color: Colors.white),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
subtitle: Text("A model from NY",
style: TextStyle(fontSize: 13, color: Colors.white)),
trailing: IconButton(
onPressed: () {},
icon: Icon(
Icons.delete_forever,
color: Colors.red,
)),
),
),
);
}
}
更多示例：（添加文本或图标）
新的锯齿形状
BannerListTile(
imageContainerShapeZigzagIndex: index, // [index = (even or odd integer number)]
),
更多示例
即将推出
如果需要，会添加更多功能。欢迎为这个包做贡献，可以去github仓库fork并提交pull request。
如果有任何建议或错误报告，请发送邮件至：eaglex129@gmail[dot]com
完整示例Demo
以下是包含 BannerListTile 的完整示例demo：
import 'package:flutter/material.dart';
import 'package:banner_listtile/banner_listtile.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData.light(),
home: const ContainerTestView(),
);
}
}
class ContainerTestView extends StatefulWidget {
const ContainerTestView({Key? key}) : super(key: key);
@override
State<ContainerTestView> createState() => _ContainerTestViewState();
}
class _ContainerTestViewState extends State<ContainerTestView> {
int _selectedIndex = 0;
static final List<Widget> _pages = <Widget>[
ListViewScreen(),
CustomScreen(),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text("Banner Listtile"),
),
body: _pages.elementAt(_selectedIndex),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: _onItemTapped,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.menu),
label: 'List',
),
BottomNavigationBarItem(
icon: Icon(Icons.dashboard_customize),
label: 'Custom',
),
],
),
);
}
}
class ListViewScreen extends StatelessWidget {
const ListViewScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return BannerListTile(
backgroundColor: Colors.blue,
borderRadius: BorderRadius.circular(8),
bannerPosition: BannerPosition.topRight,
imageContainer: Image.network(
"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb1.2.1&auto=format&fit=crop&w=387&q=80",
fit: BoxFit.cover,
),
title: Text(
"Title $index",
style: TextStyle(fontSize: 24, color: Colors.white),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
subtitle: Text("Subtitle $index",
style: TextStyle(fontSize: 13, color: Colors.white)),
trailing: IconButton(
onPressed: () {},
icon: Icon(
Icons.delete_forever,
color: Colors.red,
)),
);
},
);
}
}
class CustomScreen extends StatelessWidget {
const CustomScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: [
BannerListTile(
backgroundColor: Colors.green,
borderRadius: BorderRadius.circular(8),
bannerPosition: BannerPosition.topLeft,
imageContainer: Image.network(
"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb1.2.1&auto=format&fit=crop&w=387&q=80",
fit: BoxFit.cover,
),
title: Text(
"Custom Title",
style: TextStyle(fontSize: 24, color: Colors.white),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
subtitle: Text("Custom Subtitle",
style: TextStyle(fontSize: 13, color: Colors.white)),
trailing: IconButton(
onPressed: () {},
icon: Icon(
Icons.edit,
color: Colors.orange,
)),
),
SizedBox(height: 20),
BannerListTile(
backgroundColor: Colors.purple,
borderRadius: BorderRadius.circular(8),
bannerPosition: BannerPosition.bottomLeft,
imageContainer: Image.network(
"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb1.2.1&auto=format&fit=crop&w=387&q=80",
fit: BoxFit.cover,
),
title: Text(
"Another Title",
style: TextStyle(fontSize: 24, color: Colors.white),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
subtitle: Text("Another Subtitle",
style: TextStyle(fontSize: 13, color: Colors.white)),
trailing: IconButton(
onPressed: () {},
icon: Icon(
Icons.favorite,
color: Colors.pink,
)),
),
],
);
}
}
以上代码展示了如何在一个完整的Flutter应用中使用 BannerListTile。包括创建一个包含 ListView 和自定义布局的页面，并在这些页面中使用 BannerListTile。希望这对您有所帮助！
更多关于Flutter横幅列表展示插件banner_listtile的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
