微信交流群

老孟公众号

# CupertinoContextMenu

CupertinoContextMenu 效果类似以iOS 3D Touch,长按弹出菜单,用法如下:

CupertinoContextMenu(
  child: Container(
    color: Colors.red,
    height: 60,
    width: 100,
  ),
  actions: <Widget>[
    CupertinoContextMenuAction(
      child: const Text('Action one'),
      onPressed: () {
        Navigator.pop(context);
      },
    ),
    CupertinoContextMenuAction(
      child: const Text('Action two'),
      onPressed: () {
        Navigator.pop(context);
      },
    ),
  ],
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

CupertinoContextMenu_1

previewBuilder如果不指定则显示child,此属性展示打开状态下的样式,比如上面的红色框打开时变为圆角:

CupertinoContextMenu(
  child: Container(
    color: Colors.red,
    height: 60,
    width: 100,
  ),
  previewBuilder: (
    BuildContext context,
    Animation<double> animation,
    Widget child,
  ) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10 * animation.value),
        color: Colors.red,
      ),
      height: 60,
      width: 100,
    );
  },
  actions: <Widget>[
    CupertinoContextMenuAction(
      child: const Text('Action one'),
      onPressed: () {
        Navigator.pop(context);
      },
    ),
    CupertinoContextMenuAction(
      child: const Text('Action two'),
      onPressed: () {
        Navigator.pop(context);
      },
    ),
  ],
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

CupertinoContextMenu_2

# CupertinoContextMenuAction

CupertinoContextMenuAction 用于CupertinoContextMenu组件中,当作actions,用法如下:

CupertinoContextMenuAction(
  child: const Text('Action one'),
  onPressed: () {
    Navigator.pop(context);
  },
)
1
2
3
4
5
6

onPressed表示点击回调。

设置isDefaultAction为true,字体变为加粗:

CupertinoContextMenuAction(
  isDefaultAction: true,
  child: const Text('Action one'),
  onPressed: () {
    Navigator.pop(context);
  },
)
1
2
3
4
5
6
7

image-20200526175910874

设置isDestructiveAction为true,字体变为红色:

CupertinoContextMenuAction(
  isDestructiveAction: true,
  child: const Text('Action one'),
  onPressed: () {
    Navigator.pop(context);
  },
)
1
2
3
4
5
6
7

image-20200526175937783