0

我目前正在研究Positioned在整个屏幕上显示小部件的布局。它将自身定位在靠近检测到的条码的位置，请看下图的示例。

用户界面示例

但是当条码移动到靠近屏幕的左边缘时，UI 元素会被部分绘制到屏幕外。有没有一种方法可以解决这个问题，而不必计算每帧何时越界？

溢出示例

这是我用来设置的代码：

Widget _buildImage() {
    return Container(
      constraints: const BoxConstraints.expand(),
      child: _controller == null
          ? const Center(
              child: Text(
                'Initializing Camera...',
                style: TextStyle(
                  color: Colors.green,
                  fontSize: 30.0,
                ),
              ),
            )
          : Stack(
              fit: StackFit.expand,
              children: <Widget>[
                CameraPreview(_controller!),
                _buildResults(),
                if (_scanResults.isNotEmpty)
                   _buildUIElements()

              ],
            ),
    );
  }

  Widget _buildUIElements() {
    Barcode barcode = _scanResults[0];
    final Size imageSize = Size(
      _controller!.value.previewSize!.height,
      _controller!.value.previewSize!.width,
    );
    var boundingBox = barcode.boundingBox!;
    var rect = scaleRect(rect: boundingBox, imageSize: imageSize, widgetSize: MediaQuery.of(context).size);
    return AnimatedPositioned(
      top: rect.bottom,
      left: rect.left,
      child: Card(
        child: Text('This is an amaizing product'),
      ),
      duration: const Duration(milliseconds: 500),
    );
  }

也许有更好的方法来实现这一目标？

不要介意过度使用!仍在学习整个零安全性的东西:)

编辑 1：正如 pskink 所建议的，我已经研究了颤振中的工具提示是如何工作的，并SingleChildLayoutDelegate结合使用了 a CustomSingleChildLayout，这非常适合跟踪位置，但现在没有选项可以对此进行动画处理。

我的委托类如下：

class CustomSingleChildDelegate extends SingleChildLayoutDelegate {

  CustomSingleChildDelegate ({
    required this.target,
    required this.verticalOffset,
    required this.preferBelow,
  });

  final Offset target;

  final double verticalOffset;

  final bool preferBelow;

  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) => constraints.loosen();

  @override
  Offset getPositionForChild(Size size, Size childSize) {
    return positionDependentBox(
      size: size,
      childSize: childSize,
      target: target,
      verticalOffset: verticalOffset,
      preferBelow: preferBelow,

    );
  }

  @override
  bool shouldRelayout(CustomSingleChildDelegate oldDelegate) {
    return target != oldDelegate.target
        || verticalOffset != oldDelegate.verticalOffset
        || preferBelow != oldDelegate.preferBelow;
  }
}

然后更新了我的构建器功能：

return CustomSingleChildLayout(
        delegate: CustomSingleChildDelegate (target: rect.bottomCenter, verticalOffset: 20, preferBelow: true),
        child: Card(
            child: Text('This is an amaizing product'),
          ),
      )

拥有AnimatedPositioned布局的子元素会导致异常。

4

0 回答 0