Flutter-CupertinoActionSheet的使用

在开发中,ActionSheet也是比较常用的控件,Flutter里面也提供了相应的控件CupertinoActionSheet

1. 导入cupertino.dart

CupertinoActionSheet是苹果风格的控件,所以需要导入cupertino.dart文件。

import ‘package:flutter/cupertino.dart’;

2. 创建CupertinoActionSheet

CupertinoActionSheet(
title: Text("库位编辑"), // 标题
message: Text("这里是消息"), //子标题
actions: <Widget>[
], // 选项
cancelButton: CupertinoActionSheetAction(
child: Text("取消"),
isDefaultAction: true,
onPressed: ((){
Navigator.pop(ctx.context, 'Cancel');
}),
),// 取消按钮
)

3. 显示

从底部弹出CupertinoActionSheet使用showCupertinoModalPopup

void _containerForSheet<T>({BuildContext context, Widget child}) {
showCupertinoModalPopup<T>(
context: context,
builder: (BuildContext context) => child,
).then<void>((T value) {
print("点击选项返回的值=============$value");
});
}

4.完整代码

void _onMoreAction(Action action, Context<WarehouseListState> ctx) {
_containerForSheet(
context: ctx.context,
child: CupertinoActionSheet(
title: Text("库位编辑"),
message: Text("这里是消息"),
actions: <Widget>[
CupertinoActionSheetAction(
child: Text("打印库位码"),
onPressed: ((){
Navigator.pop(ctx.context, 'Print');
}),
),
CupertinoActionSheetAction(
child: Text("编辑库位"),
onPressed: ((){
Navigator.pop(ctx.context, 'Edit');
}),
),
CupertinoActionSheetAction(
child: Text("删除库位"),
onPressed: ((){
Navigator.pop(ctx.context, 'Delete');
}),
),
],
cancelButton: CupertinoActionSheetAction(
child: Text("取消"),
isDefaultAction: true,
onPressed: ((){
Navigator.pop(ctx.context, 'Cancel');
}),
),
)
);
}

void _containerForSheet<T>({BuildContext context, Widget child}) {
showCupertinoModalPopup<T>(
context: context,
builder: (BuildContext context) => child,
).then<void>((T value) {
print("=============$value");
});
}