Skip to content

Latest commit

 

History

History
108 lines (93 loc) · 3.95 KB

popover.md

File metadata and controls

108 lines (93 loc) · 3.95 KB
Raw

CupertinoPopoverButton

仿iOS的UIPopover效果的

用于弹窗的按钮

CupertinoPopoverButton({
    this.child,
    this.popoverBuild,
    this.popoverColor=Colors.white,
    this.popoverBoxShadow,
    @required this.popoverWidth,
    @required this.popoverHeight,
    BoxConstraints popoverConstraints,
    this.direction = CupertinoPopoverDirection.bottom,
    this.onTap,
    this.transitionDuration=const Duration(milliseconds: 200),
    this.barrierColor = Colors.black54,
    this.radius=8.0});
Param Type Default Description
child Widget 按钮的内容
popoverBuild WidgetBuilder 生成弹出框的内容
[popoverWidth] double 弹出框的宽度
[popoverHeight] double 弹出框的高度
[popoverConstraints] BoxConstraints maxHeight:123.0 maxWidth:150.0 弹出框的最大最小高宽
[direction] CupertinoPopoverDirection CupertinoPopoverDirection.bottom 方向
[onTap] BoolCallback 按钮点击事件,返回true取消默认反应(不打开Popover)
[popoverColor] Color 白色 弹出框的背景颜色
[popoverBoxShadow] BoxShadow 弹出框的阴影
[barrierColor] Color Colors.black54 遮罩层的颜色,目前不允许设置透明,如需要透明则使用Color.fromRGBO(0, 0, 0, 0.01)可达到类似效果
[transitionDuration] Duration 0.2s 过度动画时间
[radius] double 8.0 弹出框的圆角弧度

Example

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('左上角内容'),
                        )
        });

CupertinoPopoverMenuList

Popover弹出的菜单样式列表,一般与CupertinoPopoverMenuItem一起用,会给两个Item加间隔线

CupertinoPopoverMenuList({this.children})
Param Type Description
children List 子元素,一般是CupertinoPopoverMenuItem

CupertinoPopoverMenuItem

单个菜单项

const CupertinoPopoverMenuItem({
    this.leading,
    this.child,
    this.onTap,
    this.background = Colors.white,
    this.activeBackground = const Color(0xFFd9d9d9),
    this.isTapClosePopover=true
  });
Param Type Default Description
[leading] Widget 菜单左边,一般放图标
[child] Widget 菜单内容
[onTap] BoolCallback 按钮点击事件,返回true取消默认反应(不关闭Popover)
[activeBackground] Color Color(0xFFd9d9d9) 按下时背景色
[background] Color Colors.white 默认背景色
[isTapClosePopover] bool 是否点击关闭

案例核心代码

    CupertinoPopoverMenuList(
                    children: <Widget>[
                      CupertinoPopoverMenuItem(leading: Icon(Icons.add),child: Text("新增"),),
                      CupertinoPopoverMenuItem(leading: Icon(Icons.edit),child: Text("修改"),),
                      CupertinoPopoverMenuItem(leading: Icon(Icons.delete),child: Text("删除"),)
                    ],
                  )