如何在 flutter 中重新定位固定小部件

Question

我正在使用 Flutter 並使用ar_flutter_plugin構建一個 AR 應用程序。

AR 小部件的 position 似乎固定在左上角，它不會移動到其他任何地方。 無論樹中的其他小部件是什么，都不會改變任何東西。 它總是在左上角（見圖）。

它可以很好地與虛擬小部件一起使用（比較第二個 img）。

子 Ar 小部件

  Widget build(BuildContext context) {
    return SizedBox(
        width: widget.width,
        height: widget.height,
        child: Column(
          children: [
            Expanded(
              child: Column(children: [
                Expanded(
                  child: ARView(
                    onARViewCreated: onARViewCreated,
                    planeDetectionConfig:
                        PlaneDetectionConfig.horizontalAndVertical,
                  ),
                ),
                Align(
                    alignment: Alignment(1, 1),
                    child: FloatingActionButton(onPressed: takePicture))
              ]),
            ),
          ],
        ));
  }

父小部件

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Title'),
      ),
      key: scaffoldKey,
      backgroundColor: FlutterFlowTheme.of(context).primaryBackground,
      body: SafeArea(
        child: GestureDetector(
          onTap: () => FocusScope.of(context).unfocus(),
          child: Stack(
            children: [
              Container(
                width: 350,
                height: 350,
                child: ObjectsOnPlanesWidget(
                  // child: custom_widgets.ArPlaceholder(
                  width: double.infinity,
                  height: double.infinity,
                  modelUrl: widget.modelUrl,
                ),
              ),
              Align(
                alignment: AlignmentDirectional(-0.23, -0.92),
                child: Padding(
                  padding: EdgeInsetsDirectional.fromSTEB(8, 24, 8, 24),
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        width: 30,
                        height: 30,
                        decoration: BoxDecoration(
                          color:
                              FlutterFlowTheme.of(context).secondaryBackground,
                          borderRadius: BorderRadius.circular(12),
                        ),
                        child: InkWell(
                          onTap: () async {
                            Navigator.pop(context);
                          },
                          child: Icon(
                            Icons.chevron_left,
                            color: Colors.black,
                            size: 24,
                          ),
                        ),
                      ),
                      Text(
                        'Try On',
                        style: FlutterFlowTheme.of(context).bodyText1,
                      ),
                      Container(
                        width: 30,
                        height: 30,
                        decoration: BoxDecoration(
                          color:
                              FlutterFlowTheme.of(context).secondaryBackground,
                          borderRadius: BorderRadius.circular(12),
                        ),
                        child: Icon(
                          Icons.share_outlined,
                          color: Colors.black,
                          size: 24,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Align(
                alignment: AlignmentDirectional(0, 0.95),
                child: Container(
                  width: 50,
                  height: 50,
                  decoration: BoxDecoration(
                    color: FlutterFlowTheme.of(context).secondaryBackground,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Icon(
                    Icons.photo_camera,
                    color: Colors.black,
                    size: 24,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

我想把相機放在后台，把其他小部件（比如拍照按鈕）放在它上面。

如何將其重新定位到容器中？ 至少在應用欄下？

Answer 1

從邏輯上講，這應該可行，我建議您嘗試首先擁有一個 SafeArea 小部件。

SafeArea(
child: build(buildContext),
),

我過去遇到過類似的問題，使用它解決了它。

此外，似乎有一個未解決的問題似乎與以下可能的解決方案有關：

With Flutter 2.10.5. it works without problems. This seems to be a Flutter 3 problem.
The way platforms views are rendered was changed in the 3.0 release.

probably same issue:
flutter/flutter#106246
explained here:
flutter/flutter#103630

I hope this will be fixed in new Flutter 3 releases soon.

還有這個

I try the master channel Flutter v3.1.0-0.0.pre.1372 and the issue is fixed there.

Fixed will come to a stable channel soon with Flutter v3.1.0.

另外，我不確定您為什么使用 SizedBox 作為父小部件。

為什么不嘗試一個基本的容器呢？

祝你好運，讓我知道是否可以提供其他幫助