Flutter动作表单插件action_sheet的使用
Flutter动作表单插件 action_sheet
的使用
action_sheet
是一个扩展了 showModalBottomSheet()
的 Flutter 插件,提供了一个带有操作项的底部弹出框,类似于 Google Drive 中的效果。
预览
以下是 action_sheet
在不同主题下的效果预览:
Dark Theme | Light Theme |
---|---|
除非明确设置了 backgroundColor
和 widgetBorderColour
,否则它们会根据当前主题的 Brightness
自动调整。图标或其他小部件的颜色需要手动调整。
开始使用
添加依赖
在 pubspec.yaml
文件中添加 action_sheet
依赖:
dependencies:
action_sheet: ^1.0.0
导入包
在 Dart 文件中导入 action_sheet
包:
import 'package:action_sheet/action_sheet.dart';
使用 showBottomActionSheet
方法
调用 showBottomActionSheet
方法来显示底部动作表单。
基本用法
以下是一个基本的示例,展示了如何使用 action_sheet
:
import 'package:flutter/material.dart';
import 'package:action_sheet/action_sheet.dart';
void main() {
runApp(Example());
}
class Example extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
brightness: Brightness.dark,
),
home: Scaffold(
appBar: AppBar(
title: Text("sheet_actions"),
),
body: Home(),
),
);
}
}
class Home extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
child: Text("showBottomActionSheet"),
onPressed: () {
showBottomActionSheet(
context: context,
widgetPositioning: WidgetPositioning.mainAxis,
children: [
Icon(
Icons.class_,
color: Colors.white,
),
Icon(
Icons.folder,
color: Colors.white,
),
Icon(
Icons.note_add,
color: Colors.white,
),
],
descriptions: [
Text("Class"),
Text("Folder"),
Text("Note"),
],
actions: [
() {
print("Class pressed");
},
() {
print("Folder pressed");
},
() {
print("Note pressed");
},
],
titleText: Text(
"Create New",
style: TextStyle(fontSize: 25),
),
);
},
),
);
}
}
更多关于Flutter动作表单插件action_sheet的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter动作表单插件action_sheet的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何在Flutter中使用action_sheet
插件的示例代码。action_sheet
插件允许你在Flutter应用中显示一个底部动作表单(类似于iOS中的Action Sheet)。
首先,确保你的Flutter项目已经包含了action_sheet
插件。如果还没有添加,可以在pubspec.yaml
文件中添加以下依赖:
dependencies:
flutter:
sdk: flutter
action_sheet: ^0.0.4 # 请检查最新版本号
然后运行flutter pub get
来安装依赖。
接下来,在你的Dart文件中使用ActionSheet
。以下是一个完整的示例代码:
import 'package:flutter/material.dart';
import 'package:action_sheet/action_sheet.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Action Sheet Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Action Sheet Demo'),
),
body: Center(
child: ElevatedButton(
onPressed: () => _showActionSheet(context),
child: Text('Show Action Sheet'),
),
),
);
}
Future<void> _showActionSheet(BuildContext context) async {
final ActionSheet actionSheet = ActionSheet(
title: Text('Choose an option'),
actions: <Widget>[
ActionSheetAction(
child: Text('Option 1'),
onPressed: () {
Navigator.pop(context);
_handleOptionSelected('Option 1');
},
),
ActionSheetAction(
child: Text('Option 2'),
onPressed: () {
Navigator.pop(context);
_handleOptionSelected('Option 2');
},
),
ActionSheetAction(
child: Text('Cancel'),
isDestructiveAction: true,
onPressed: () => Navigator.pop(context),
),
],
);
// 显示动作表单
showCupertinoModalPopup<void>(
context: context,
builder: (BuildContext context) {
return actionSheet;
},
);
}
void _handleOptionSelected(String option) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('You selected: $option'),
),
);
}
}
在这个示例中:
- 我们创建了一个简单的Flutter应用,其中包含一个主屏幕
MyHomePage
。 - 主屏幕上有一个按钮,当点击按钮时,会调用
_showActionSheet
方法来显示动作表单。 ActionSheet
类用于定义动作表单的内容,包括标题和动作选项。showCupertinoModalPopup
函数用于在屏幕上显示动作表单。- 每个动作选项(
ActionSheetAction
)都有一个文本标签和一个点击回调函数。 - 用户选择某个选项后,会显示一个SnackBar来通知用户他们的选择。
请确保你使用的action_sheet
插件版本与示例代码中的版本号一致,或者根据需要调整代码以适应最新版本。