简体   繁体   English

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

[英]How to reposition a fixed widget in flutter

I'm building an AR app with Flutter and using the ar_flutter_plugin .我正在使用 Flutter 并使用ar_flutter_plugin构建一个 AR 应用程序。

The position of the AR widget seems to be fixed to the top left and it doesn't move anywhere else. AR 小部件的 position 似乎固定在左上角,它不会移动到其他任何地方。 Whatever the other widgets in the tree, doesn't change anything.无论树中的其他小部件是什么,都不会改变任何东西。 It's always at top left corner (see image).它总是在左上角(见图)。

It works with a dummy widget just fine (compare second img).它可以很好地与虚拟小部件一起使用(比较第二个 img)。

Child Ar widget子 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))
              ]),
            ),
          ],
        ));
  }

Parent Widget父小部件

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,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

固定定位的 AR 小部件

在后台按预期工作的虚拟容器

I want to put the camera in the background and put other widgets (such as photo-taking-button) on top of it.我想把相机放在后台,把其他小部件(比如拍照按钮)放在它上面。

How do I reposition it into a container?如何将其重新定位到容器中? At least under the App Bar?至少在应用栏下?

Logically this should have worked, what i would suggest you try would be to first have a SafeArea widget.从逻辑上讲,这应该可行,我建议您尝试首先拥有一个 SafeArea 小部件。

SafeArea(
child: build(buildContext),
),

I had a similar issue in the past and using this solved it.我过去遇到过类似的问题,使用它解决了它。

Also, there seems to be an open issue which seems related to this with the following possible solution:此外,似乎有一个未解决的问题似乎与以下可能的解决方案有关:

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.

And also this还有这个

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.

Also, I am not sure why are you using SizedBox as your parent widget.另外,我不确定您为什么使用 SizedBox 作为父小部件。

Why not try a basic Container instead?为什么不尝试一个基本的容器呢?

Good luck, Let me know if I can help with anything else祝你好运,让我知道是否可以提供其他帮助

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM