Flutter动作表单插件action_sheet的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter动作表单插件 action_sheet 的使用

action_sheet 是一个扩展了 showModalBottomSheet() 的 Flutter 插件,提供了一个带有操作项的底部弹出框,类似于 Google Drive 中的效果。

预览

以下是 action_sheet 在不同主题下的效果预览:

Dark Theme Light Theme
Dark Theme Light Theme

除非明确设置了 backgroundColorwidgetBorderColour,否则它们会根据当前主题的 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

1 回复

更多关于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'),
      ),
    );
  }
}

在这个示例中:

  1. 我们创建了一个简单的Flutter应用,其中包含一个主屏幕MyHomePage
  2. 主屏幕上有一个按钮,当点击按钮时,会调用_showActionSheet方法来显示动作表单。
  3. ActionSheet类用于定义动作表单的内容,包括标题和动作选项。
  4. showCupertinoModalPopup函数用于在屏幕上显示动作表单。
  5. 每个动作选项(ActionSheetAction)都有一个文本标签和一个点击回调函数。
  6. 用户选择某个选项后,会显示一个SnackBar来通知用户他们的选择。

请确保你使用的action_sheet插件版本与示例代码中的版本号一致,或者根据需要调整代码以适应最新版本。

回到顶部