时间戳

首页 > 解决方案 > 无法将行小部件居中

flutter - 无法将行小部件居中

问题描述

我Row在页面底部有一个无法居中的小部件。我已经尝试了所有的mainAxisAlignment's 和crossAxisAlignment's，以及将它包装在一个Align小部件中并设置alignment为alignment.center它仍然在页面的左边缘。我已经尝试了一切，并且真的被卡住了。任何帮助，将不胜感激。
页面（更新）

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          backgroundColor: Colors.lightBlue,
          centerTitle: true,
          elevation: 5,
          title: Text("Pathomatic")),
      body: Container(
        decoration: new BoxDecoration(color: Colors.black),
        child: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Expanded(
                flex: 2,
                child: new Stack(
                  children: <Widget>[
                    new Container(
                      alignment: Alignment.center,
                      child: _cameraPreviewWidget(context),
                    ),
                    new Align(
                      alignment: Alignment.center,
                      child: GestureDetector(
                          child: Stack(children: <Widget>[
                            Positioned(
                              top: yPosition,
                              left: xPosition,
                              child: Container(
                                // padding: EdgeInsets.only(top: 200.0, left: 20.0),
                                height: MediaQuery.of(context).size.height / 3,
                                width: MediaQuery.of(context).size.width / 3,
                                child:
                                    Image.asset('assets/images/crosshair.png'),
                              ),
                            ),
                          ]),
                          onPanUpdate: (tapInfo) {
                            setState(() {
                              xPosition += tapInfo.delta.dx;
                              yPosition += tapInfo.delta.dy;
                            });
                          }),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 5),
              Row(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      _cameraTogglesRowWidget(),
                      _mlTextWidget(),
                    ],
                  ),
                  _captureControlRowWidget(context),
                  //SizedBox(width: 50),
                ],
              ),
              SizedBox(height: 5),
            ],
          ),
        ),
      ),
    );
  }

标签： flutterdart

解决方案

这通常是因为您尝试居中的小部件实际上是在拉伸其容器。因为它是屏幕的大小，所以它的内容粘在左边。您应该使用带有选择小部件模式的 Flutter Inspector来实际查看您的行有多大。那么一切都会变得更有意义。

在您的代码中，您Row正在伸展。尝试

Row(mainAxisSize: MainAxisSize.min

这应该使它不会增长。或者，您可以将行保持大，但使其子元素居中：

Row(mainAxisAlignment: MainAxisAlignment.Center

当然，通过这种方法，它的孩子会在中心彼此靠近。您可以SizedBox在它们之间使用 a，或使用其他方式将它们分开。

推荐阅读