Skip to content

ActionSheet 动作面板

动作面板用于从底部弹出的模态框,提供一组与当前场景相关的操作选项。

何时使用

  • 需要提供与当前场景相关的多个操作选项时
  • 用户需要从多个选项中选择一个操作时
  • 需要临时中断用户操作,提供重要信息确认时

代码演示

import 'package:antd_flutter_example/demo_block.dart';
import 'package:flutter/widgets.dart';
import 'package:trionesdev_antd_mobile/trionesdev_antd_mobile.dart';

class ActionSheetPage extends StatefulWidget {
  const ActionSheetPage({super.key});


  @override
  State<StatefulWidget> createState() => _ActionSheetPageState();
}

class _ActionSheetPageState extends State<ActionSheetPage> {
  @override
  @override
  Widget build(BuildContext context) {
    return AntScaffold(
      appBar: AntAppBar(title: Text('ActionsSheet 操作页'),),
      body: SingleChildScrollView(
        child: Column(
          children: [
            DemoBlock(title: "基本使用",child: AntButton(text: "打开操作页",onPressed: (){
              AntActionSheet.show(context: context, actions: [
                AntActionSheetItemStruct(label: Text("选项一"),onPressed: (){
                  AntToast.show(context: context, content: Text("点击了选项一"));
                }),
                AntActionSheetItemStruct(label: Text("选项二"),onPressed: (){
                  AntToast.show(context: context, content: Text("点击了选项二"));
                })
              ]);
            }),),
            DemoBlock(title: "带Title",child: AntButton(text: "带Title的操作页",onPressed: (){
              AntActionSheet.show(context: context,title: Text("操作"), actions: [
                AntActionSheetItemStruct(label: Text("选项一"),onPressed: (){
                  AntToast.show(context: context, content: Text("点击了选项一"));
                }),
                AntActionSheetItemStruct(label: Text("选项二"),onPressed: (){
                  AntToast.show(context: context, content: Text("点击了选项二"));
                })
              ]);
            }),)
          ],
        ),
      ),
    );
  }
}

API

AntActionSheet.show 方法参数

参数说明类型默认值
context上下文BuildContext-
closeOnMaskClick是否点击遮罩关闭bool?false
title标题Widget?null
titleText标题文本String?null
actions动作列表List<AntActionSheetItemStruct>?null
showCancelButton是否显示取消按钮bool?true
cancel取消按钮Widget?null
itemStyle动作样式StateStyle?null

AntActionSheetItemStruct 构造函数参数

参数说明类型默认值
labelText标签文本String?null
label标签WidgetWidget?null
onPressed点击事件Function?null

AntActionSheetView 构造函数参数

参数说明类型默认值
actions动作列表List<AntActionSheetItemStruct>?null
showCancelButton是否显示取消按钮bool?true
titleText标题文本String?null
title标题Widget?null
cancel取消按钮Widget?null
itemStyle动作样式StateStyle?null
decoration容器样式BoxDecoration?null