Flutter可扩展卡片视图插件expandable_cardview的使用
Flutter可扩展卡片视图插件expandable_cardview的使用
插件介绍
ExpandableCard widget 提供了一个自定义卡片，带有可展开的部分，方便在折叠部分中显示详细信息。
添加依赖项
要在项目中使用 expandable_cardview，请将以下依赖项添加到您的 pubspec.yaml 文件中：
dependencies:
expandable_cardview: ^1.1.0
导入库
import 'package:expandable_cardview/expandable_cardview.dart';
使用示例
ExpandableCard(
title: 'Fried Rice',
description: 'Confirmed Order',
button2Value: 'Buy Noww',
sectionRowCount: 3,
sectionRowTitles: const ['Review', 'Order', 'Shipping'],
totalText: 3,
backgroundColor: Colors.white,
elevation: 4.0,
button2Elevation: 5.0,
button2Color: Colors.blue,
button1TextColor: Colors.black,
button2BorderRadius: 5.0,
cardBorderRadius: 10,
sectionRowData: const {
'Review': ['Good portion size', 'Taste good', 'Overall good'],
'Order': ['Fried Rice', '1', 'RM 1.00'],
'Shipping': ['Street 1', 'City 1', '12345'],
},
textButtonActionFirst: 'Close',
textButtonActionSecond: 'Details',
onPressedButton2: () {
// do something
},
);
示例代码
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Expandable Card Example'),
),
body: Padding(
padding: const EdgeInsets.all(16),
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return ExpandableCard(
textButtonActionFirst: 'Close',
textButtonActionSecond: 'Details',
title: 'Fried Rice',
description: ' Confirmed Order',
button2Value: 'Buy Noww',
sectionRowCount: 3,
sectionRowTitles: const ['Review', 'Order', 'Shipping'],
totalText: 3,
backgroundColor: Colors.white,
elevation: 4.0,
button2Elevation: 5.0,
button2Color: Colors.blue,
button1TextColor: Colors.black,
button2BorderRadius: 5.0,
cardBorderRadius: 10,
sectionRowData: const {
'Review': ['Good portion size', 'Taste good', 'Overall good'],
'Order': ['Fried Rice', ' 1', 'RM e.00'],
'Shipping': ['Street e', 'City e', ' 12345'],
},
onPressedButton2: () {
showMovePage(context);
},
);
},
),
),
);
}
void showMovePage(BuildContext context) {
// 实现对话框或导航到其他页面
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text('Confirm'),
content:
const Text('Are you sure you want to move the payment page?'),
actions: <Widget>[
TextButton(
onPressed: () {
print('OK button pressed');
// 跳转到详情页面
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const DetailPage()),
);
},
child: const Text('OK'),
),
TextButton(
onPressed: () {
print('Cancel button pressed');
Navigator.of(context).pop();
},
child: const Text('Cancel'),
),
],
);
},
);
}
}
完整示例 demo
// ignore_for_file: avoid_print, use_key_in_widget_constructors
import 'package:expandable_cardview/expandable_cardview.dart';
import 'package:flutter/material.dart';
import 'detail_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Expandable Card Example'),
),
body: Padding(
padding: const EdgeInsets.all(16),
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return ExpandableCard(
textButtonActionFirst: 'Close',
textButtonActionSecond: 'Detail',
title: 'Fried Rice',
description: 'Confirmed Order',
button2Value: 'Buy Now',
sectionRowCount: 3,
sectionRowTitles: const ['Review', 'Order', 'Shipping'],
totalText: 3,
backgroundColor: Colors.white,
elevation: 4.0,
button2Elevation: 5.0,
button2Color: Colors.blue,
button1TextColor: Colors.black,
button2BorderRadius: 5.0,
cardBorderRadius: 10,
sectionRowData: const {
'Review': ['Good portion size', 'Taste good', 'Overall good'],
'Order': ['Fried Rice', ' 1', 'RM e.00'],
'Shipping': ['Street e', 'City e', ' 12345'],
},
onPressedButton2: () {
showMovePage(context);
},
);
},
),
),
);
}
void showMovePage(BuildContext context) {
// 实现对话框或导航到其他页面
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text('Confirm'),
content:
const Text('Are you sure you want to move the payment page?'),
actions: <Widget>[
TextButton(
onPressed: () {
print('OK button pressed');
// 跳转到详情页面
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const DetailPage()),
);
},
child: const Text('OK'),
),
TextButton(
onPressed: () {
print('Cancel button pressed');
Navigator.of(context).pop();
},
child: const Text('Cancel'),
),
],
);
},
);
}
}
更多关于Flutter可扩展卡片视图插件expandable_cardview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter可扩展卡片视图插件expandable_cardview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中使用expandable_cardview插件来实现可扩展卡片视图的示例代码。
首先，确保你已经在pubspec.yaml文件中添加了expandable_cardview依赖：
dependencies:
flutter:
sdk: flutter
expandable_cardview: ^x.y.z # 请替换为最新版本号
然后运行flutter pub get来安装依赖。
接下来，你可以在你的Flutter项目中按照以下步骤使用ExpandableCard组件：
示例代码
import 'package:flutter/material.dart';
import 'package:expandable_cardview/expandable_cardview.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Expandable Card View Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Expandable Card View Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: ExpandableCard(
title: Text('Card Title'),
description: Text('This is a description of the card content.'),
expandedWidget: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Expanded Content 1'),
SizedBox(height: 10),
Text('Expanded Content 2'),
SizedBox(height: 10),
Text('Expanded Content 3'),
],
),
initiallyExpanded: false,
onExpansionChanged: (bool expanded) {
print('Card is now ${expanded ? "expanded" : "collapsed"}');
},
),
),
),
);
}
}
代码解释
- 依赖导入：首先导入
flutter和expandable_cardview包。 - 主函数：定义
MyApp作为应用的根组件。 - MaterialApp：创建一个Material风格的应用。
- Scaffold：包含应用的主体内容，包括一个
AppBar和一个带有内边距的Padding组件。 - ExpandableCard：
- title：卡片的标题，这里使用
Text组件。 - description：卡片的描述，同样使用
Text组件。 - expandedWidget：卡片展开后显示的内容，这里使用了一个
Column包含多个Text组件。 - initiallyExpanded：设置卡片是否默认展开，这里设置为
false。 - onExpansionChanged：卡片展开状态改变时的回调，这里简单地打印展开或折叠的状态。
- title：卡片的标题，这里使用
运行这个示例代码，你将看到一个可展开和折叠的卡片视图。点击卡片标题或描述部分，卡片会在展开和折叠状态之间切换。
这样，你就可以在你的Flutter项目中使用expandable_cardview插件来实现可扩展卡片视图了。
