popover.md 3.5 KB
Newer Older
Kevin's avatar
Kevin committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

## CupertinoPopoverButton
仿iOS的UIPopover效果的

用于弹窗的按钮
```dart
CupertinoPopoverButton({
    this.child,
    this.popoverBuild,
    this.popoverColor=Colors.white,
    @required this.popoverWidth,
    @required this.popoverHeight,
    BoxConstraints popoverConstraints,
    this.onTap,
    this.transitionDuration=const Duration(milliseconds: 200),
16
    this.barrierColor = Colors.black54,
Kevin's avatar
Kevin committed
17 18 19 20 21 22 23 24 25 26 27 28 29
    this.radius=8.0});
```


| Param | Type | Default | Description |
| --- | --- | --- | --- |
| child | <code>Widget</code> |  | 按钮的内容 |
| popoverBuild | <code>WidgetBuilder</code> |  | 生成弹出框的内容 |
| [popoverWidth] | <code>double</code> |  | 弹出框的宽度 |
| [popoverHeight] | <code>double</code> |  | 弹出框的高度 |
| [popoverConstraints] | <code>BoxConstraints</code> | maxHeight:123.0  maxWidth:150.0 | 弹出框的最大最小高宽|
| [onTap] | <code>BoolCallback</code> |  | 按钮点击事件,返回true取消默认反应(不打开Popover) |
| [popoverColor] | <code>Color</code> | 白色 | 弹出框的背景颜色 |
30
| [barrierColor] | <code>Color</code> | Colors.black54 | 遮罩层的颜色,目前不允许设置透明,如需要透明则使用Color.fromRGBO(0, 0, 0, 0.01)可达到类似效果|
Kevin's avatar
Kevin committed
31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
| [transitionDuration] | <code>Duration</code> | 0.2s  | 过度动画时间 |
| [radius] | <code>double</code> |  8.0 | 弹出框的圆角弧度 |


**Example**

```dart
CupertinoPopoverButton(
        child: Container(
          margin: EdgeInsets.all(20.0),
          width: 80.0,
          height: 40.0,
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              boxShadow: [BoxShadow(color: Colors.black12,blurRadius: 5.0)]
          ),
          child: Center(child:Text('左上角')),
        ),
        popoverBuild:(BuildContext context){
              return  Container(
                          width: 100.0,
                          height: 100.0,
                          child: Text('左上角内容'),
                        )
        });
```


<img width="38%" height="38%" src="./images/popover_demo.gif"/>

## CupertinoPopoverMenuList
Popover弹出的菜单样式列表,一般与[CupertinoPopoverMenuItem](#CupertinoPopoverMenuItem)一起用,会给两个Item加间隔线
```dart
CupertinoPopoverMenuList({this.children})
```
| Param | Type | Description |
| --- | --- | --- |
| children | <code>List<Widget></code>  | 子元素,一般是CupertinoPopoverMenuItem |


## CupertinoPopoverMenuItem
单个菜单项

```dart
const CupertinoPopoverMenuItem({
    this.leading,
    this.child,
    this.onTap,
    this.isTapClosePopover=true
  });
```
| Param | Type |  Default | Description |
| --- | --- | --- | --- |
| [leading] | <code>Widget<Widget></code>  | 菜单左边,一般放图标 |
| [child] | <code>Widget<Widget></code>  | 菜单内容 |
| [onTap] | <code>BoolCallback</code> |  | 按钮点击事件,返回true取消默认反应(不关闭Popover) |
| [isTapClosePopover] | <code>bool<Widget></code>  | 是否点击关闭 |

#### 案例核心代码
```dart
    CupertinoPopoverMenuList(
                    children: <Widget>[
                      CupertinoPopoverMenuItem(leading: Icon(Icons.add),child: Text("新增"),),
                      CupertinoPopoverMenuItem(leading: Icon(Icons.edit),child: Text("修改"),),
                      CupertinoPopoverMenuItem(leading: Icon(Icons.delete),child: Text("删除"),)
                    ],
                  )
```