Flutter点击按钮无法打开相机问题求助

我希望通过点击按钮打开相机，尝试过使用GestureDetector和InkWell，但都没有效果。直接调用openCamera函数时相机可以正常打开，但通过按钮点击调用则无法实现。

布局代码 #

Container(
  height: double.infinity,
  width: double.infinity,
  color: Color(0xff201b51),
  child: Stack(
    children: [
      Center(
        child: Container(
          color: Colors.black,
          child: isOk
              ? ElevatedButton(
                  onPressed: () {
                    openCamera(context);
                    print("tapped");
                  },
                  child: Text(
                    "Tap",
                    style: TextStyle(color: Colors.white),
                  ),
                )
              : Container(),
        ),
      ),
    ],
  ),
),

openCamera函数代码 #

Widget openCamera(BuildContext context) {
  return Column(
    children: <Widget>[
      Expanded(
        child: VisibilityDetector(
          key: Key("unique key"),
          onVisibilityChanged: (VisibilityInfo info) {
            if (info.visibleFraction == 0) {
            } else {
              _scaned = false;
              _controller.startCamera(onScan);
            }
          },
          child: Padding(
              padding: EdgeInsets.all(10),
              child: QrReaderView(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height - 120,
                callback: (container) {
                  this._controller = container;
                  _controller.startCamera(onScan);
                },
              )),
        ),
      )
    ],
  );
}

解决方案 #

问题核心：你调用openCamera时只是执行了函数并返回Widget，但没有将这个Widget纳入Flutter的Widget树进行渲染。Flutter是声明式UI框架，必须通过状态管理来控制界面的显示切换。

修改步骤：

1. 在你的State类中添加状态变量，控制相机界面的显示：

bool _showCamera = false;

2. 修改按钮的onPressed逻辑，通过setState切换状态：

onPressed: () {
  setState(() {
    _showCamera = true;
  });
  print("tapped");
},

3. 调整布局结构，根据状态变量决定显示按钮还是相机Widget：

Container(
  height: double.infinity,
  width: double.infinity,
  color: Color(0xff201b51),
  child: Stack(
    children: [
      Center(
        child: Container(
          color: Colors.black,
          child: _showCamera
              ? openCamera(context)
              : ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _showCamera = true;
                    });
                    print("tapped");
                  },
                  child: Text(
                    "Tap",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
        ),
      ),
    ],
  ),
),

4. 优化相机启动逻辑：避免openCamera中重复调用_controller.startCamera，可以在状态切换为显示相机时统一处理，或者在QrReaderView的callback中只初始化一次控制器。

内容的提问来源于stack exchange，提问作者Sasitha Dilshan