Flutter动作表单插件fk_action_sheet的使用
Flutter动作表单插件fk_action_sheet的使用
fk_action_sheet
一个用于在 Flutter 中实现类似 iOS ActionSheet 控件的包。
获取开始
在你的 Flutter 项目的 pubspec.yaml 文件中添加以下依赖：
dependencies:
...
fk_action_sheet: ^1.0.0
在你的库文件中添加以下导入：
import 'package:fk_action_sheet/fk_action_sheet.dart';
有关如何开始使用 Flutter 的帮助，请参阅 Flutter 文档。
示例
以下是一个完整的示例，展示了如何使用 fk_action_sheet 包来创建不同的动作表单。
import 'package:fk_action_sheet/fk_action_sheet.dart';
import 'package:flutter/material.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,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'fk_action_sheet 示例'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// 这里我们从 MyHomePage 对象中获取值，并将其用于设置我们的应用栏标题。
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 性别选择按钮
RaisedButton(
child: Text("性别选择"),
onPressed: () {
showActionSheet(
context: context,
actions: <ActionItem>[
ActionItem(
title: "男",
onPressed: () {
print('选择了男!');
Navigator.pop(context);
},
),
ActionItem(
title: "女",
onPressed: () {
print('选择了女!');
Navigator.pop(context);
},
),
],
bottomActionItem: BottomActionItem(title: "取消"),
);
},
),
// 职业选择按钮（带描述）
RaisedButton(
child: Text("职业选择-带描述"),
onPressed: () {
showActionSheet(
context: context,
topActionItem: TopActionItem(desc: "请选择职业哈😄"),
actions: <ActionItem>[
ActionItem(
title: "IT",
onPressed: () {
print('选择了IT!');
Navigator.pop(context);
},
),
ActionItem(
title: "律师",
onPressed: () {
print('选择了律师!');
Navigator.pop(context);
},
),
],
bottomActionItem: BottomActionItem(title: "取消"),
);
},
),
// 单选支付方式按钮
RaisedButton(
child: Text("选择支付方式-单选"),
onPressed: () {
showActionSheet(
context: context,
topActionItem: TopActionItem(
title: "请选择支付方式",
doneAction: (List<int> data) {
Navigator.pop(context);
print('选了数据: $data}');
},
),
choiceConfig: ChoiceConfig(items: [
ChoiceItem(
title: "支付宝",
leftIcon: Icon(Icons.payment_rounded),
),
ChoiceItem(
title: "微信",
leftIcon: Icon(Icons.wb_twighlight),
isSelected: true,
),
ChoiceItem(
title: "银行卡",
leftIcon: Icon(Icons.ac_unit_outlined),
),
]),
);
},
),
// 多选支付方式按钮
RaisedButton(
child: Text("选择支付方式-多选"),
onPressed: () {
showActionSheet(
context: context,
topActionItem: TopActionItem(
title: "请选择支付方式",
doneAction: (List<int> data) {
Navigator.pop(context);
print('选了数据: $data}');
},
),
choiceConfig: ChoiceConfig(
isCheckBox: true,
items: [
ChoiceItem(
title: "支付宝",
leftIcon: Icon(Icons.payment_rounded),
),
ChoiceItem(
title: "微信",
leftIcon: Icon(Icons.wb_twighlight),
isSelected: true,
),
ChoiceItem(
title: "银行卡",
leftIcon: Icon(Icons.ac_unit_outlined),
isSelected: true,
),
],
),
);
},
),
// 自定义内容按钮
RaisedButton(
child: Text("自定义"),
onPressed: () {
showActionSheet(
context: context,
topActionItem: TopActionItem(desc: "请输入交易密码"),
content: Container(
padding: const EdgeInsets.all(15),
child: Column(
children: [
TextField(
maxLength: 36,
keyboardType: TextInputType.emailAddress,
),
RaisedButton(
onPressed: () {},
child: Text('提交'),
),
],
),
),
);
},
),
],
),
),
);
}
}
更多关于Flutter动作表单插件fk_action_sheet的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter动作表单插件fk_action_sheet的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter中使用fk_action_sheet插件的示例代码。fk_action_sheet是一个提供动作表单功能的Flutter插件，可以方便地在应用中显示底部弹出菜单或动作表单。
首先，你需要在你的pubspec.yaml文件中添加fk_action_sheet依赖：
dependencies:
flutter:
sdk: flutter
fk_action_sheet: ^最新版本号 # 请替换为实际最新版本号
然后运行flutter pub get来安装依赖。
接下来，你可以在你的Flutter应用中使用fk_action_sheet。以下是一个简单的示例，展示了如何显示一个动作表单并处理用户的点击事件：
import 'package:flutter/material.dart';
import 'package:fk_action_sheet/fk_action_sheet.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void showActionSheet() async {
final result = await FKActionSheet.show(
context: context,
title: '选择操作',
message: '请选择你要执行的操作',
cancelButtonTitle: '取消',
destructiveButtonTitle: '删除',
otherButtonTitles: ['选项1', '选项2', '选项3'],
onCancel: () {
print('用户点击了取消按钮');
},
onDestroy: () {
print('用户点击了删除按钮');
},
onOtherButtonClicked: (index) {
print('用户点击了选项 ${index + 1}');
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter fk_action_sheet 示例'),
),
body: Center(
child: ElevatedButton(
onPressed: showActionSheet,
child: Text('显示动作表单'),
),
),
);
}
}
在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮。当用户点击按钮时，会显示一个动作表单，表单中包含一个取消按钮、一个破坏性按钮（如删除），以及三个其他选项按钮。用户点击不同的按钮时，会在控制台中打印相应的信息。
注意：
FKActionSheet.show方法返回一个Future<int?>，表示用户点击的按钮的索引（取消按钮为null）。cancelButtonTitle、destructiveButtonTitle和otherButtonTitles分别用于设置取消按钮、破坏性按钮和其他选项按钮的标题。onCancel、onDestroy和onOtherButtonClicked回调分别用于处理用户点击取消按钮、破坏性按钮和其他选项按钮时的逻辑。
请确保你已经正确安装了fk_action_sheet插件，并根据你的Flutter环境进行相应的调整。
