1

我正在设计一个视频通话屏幕,我必须在孔屏幕之间管理 selfViewContainer。

在此处输入图像描述

在这个屏幕上,我已经管理了水平对齐的大部分部件,但对于垂直对齐,它在有槽口的设备中对我来说不能正常工作。

我想在拖动时从顶部至少填充50

这是可拖动的橙色容器的代码

Widget _selfView() {

    return Positioned(
      top: _selfViewTop,
      left: _selfViewLeft,
      child: Draggable(
        feedback: _draggableView(),
        childWhenDragging: Container(),
        child: _draggableView(),
        onDragEnd: (dragDetail) {
          var screenWidth = AspectSize.getScreenWidth(context: context);
          var screenHeight = AspectSize.getScreenHeight(context: context);

          _selfViewLeft = dragDetail.offset.dx;
          _selfViewTop = dragDetail.offset.dy;

          if (_selfViewLeft < (screenWidth / 2)) {
            _selfViewLeft = 16.0;
          } else if (_selfViewLeft > (screenWidth / 2)) {
            _selfViewLeft = (screenWidth) - (_selfViewWidth + 16);
          }

          if (_selfViewLeft < 1.0) {
            _selfViewLeft = 16.0;
          } else if ((_selfViewLeft + _selfViewWidth) > screenWidth) {
            _selfViewLeft = (screenWidth) - (_selfViewWidth + 16);
          }
          if (_selfViewTop < 1.0) {
            _selfViewTop = 50;
          } else if ((_selfViewTop + _selfViewHeight) > screenHeight) {
            _selfViewTop = (screenHeight) - (_selfViewWidth + 50);
          }

          setState(() {});
        },
      ),
    );
  }

对于这个 UI,我使用Stack小部件来管理容器,橙色容器用于显示呼叫者屏幕,蓝色容器将显示另一个人的图片。

请给我一些解决方案。

谢谢你。

4

1 回答 1

1

您可以使用 MediaQuery.of(context).viewPadding 并检查填充是否大于零,然后您将需要一个安全区域,因为有一个缺口。

处理缺口行为的最佳方法是使用flutter_device_type包。

上述包中的以下代码可以确定缺口:

if( Device.get().hasNotch ){
//Do some notch business
 }

谢谢你。

于 2021-08-19T06:54:23.147 回答