Flutter CupertinoContextMenu 操作按钮未居中对齐

Question

我有一个带有水平滚动的列表视图，并且我已将 CupertinoContextMenu 添加到图像中。 一切正常，但操作按钮未居中对齐。

我已经添加了代码。我也尝试过使用包裹脚手架。同样的问题仍然存在。

我必须将操作按钮对齐在图像中心位置下。

 Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      mainAxisAlignment: MainAxisAlignment.start,
                      mainAxisSize: MainAxisSize.max,
                      children: <Widget>[
                        Center(child: _invoiceImageSlider()),
);

    // Image Slider List
  Widget _invoiceImageSlider(){
    return Container(
      height: 250,
      padding: EdgeInsets.fromLTRB(0, 0, 20, 0),
      child: ListView(
        // This next line does the trick.
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            width: 160.0,
            child: _invoiceContextMenu(),
          ),
          Container(
            width: 160.0,
            child: _invoiceContextMenu(),
          ),
          Container(
            width: 160.0,
            child: _invoiceContextMenu(),
          ),
          Container(
            width: 160.0,
            child: _invoiceContextMenu(),
          ),
        ],
      ),
    );
  }

  Widget _invoiceContextMenu(){
    return Container(
      child: CupertinoContextMenu(
        child: Container(
          child: _invoiceImage(),
        ),
        previewBuilder: (BuildContext context, Animation<double> animation, Widget child) {
          return FittedBox(
            fit: BoxFit.cover,               
            child: ClipRRect(
              borderRadius: BorderRadius.circular(64.0 * animation.value),
              child: Image.asset('assets/invoices/'+_invoiceInfo.filename),
            ),
          );
        },
        actions: <Widget>[
          CupertinoContextMenuAction(
            child:  Row(
                children: <Widget>[
                  Icon(
                    Feather.trash_2,
                    size: 25,
                    color: Colors.red,
                  ),
                  SizedBox(width: 10),
                  Text("Delete")
                ]
            ),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }

Answer 1

您可以通过将整个 ContextMenu 居中来实现，如下所示：

Align(
  alignment: Alignment.center,
  child: CupertinoContextMenu(),
)

希望这有帮助。干杯

Answer 2

简短的回答：就你的情况而言，你不能！仅当您的小部件“几乎居中”时，操作菜单才会居中

长答案：操作菜单位置取决于小部件的原点位置

如何运作：

• 将屏幕从中心分割为两部分（左侧和右侧）

1. 中心情况：如果widget左右两侧重叠，并且左侧或右侧重叠部分至少有宽度<= 1/4 widget.width

2. 左案例：否则，如果widget.dx在左侧

3. 正确的情况否则，如果widget.dx在右侧

检查此代码（在

CupertinoContextMenu

类中）以理解上面的逻辑

_ContextMenuLocation get _contextMenuLocation {

 final Rect childRect = _getRect(_childGlobalKey);
    final double screenWidth = MediaQuery.sizeOf(context).width;

    final double center = screenWidth / 2;
    final bool centerDividesChild = childRect.left < center
      && childRect.right > center;
    final double distanceFromCenter = (center - childRect.center.dx).abs();
    if (centerDividesChild && distanceFromCenter <= childRect.width / 4) {
      return _ContextMenuLocation.center;
    }

    if (childRect.center.dx > center) {
      return _ContextMenuLocation.right;
    }

return _ContextMenuLocation.left;

}