Question

我有一个堆栈中的视图，我希望它在转向横向时保持固定在手机的底部。目前我有以下内容：

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: detectOrientationForAppBar(),
      backgroundColor: Colors.black,
      key: _scaffoldKey,
      body: new Column(
        children: <Widget>[
          new Expanded(
            child: new Stack(
              children: <Widget>[
                new Container(
                  height: double.infinity,
                  width: double.infinity,
                  child: new Padding(
                    padding: const EdgeInsets.all(1.0),
                    child: new Center(
                      child: _cameraPreviewWidget(),
                    ),
                  ),
                ),
                _captureControlRowWidget()
              ],
            ),
          ),
        ],
      ),
    );
  }

在此我希望_captureControlRowWidget即使在旋转时也能保持固定在设备的底部。这是我的_captureControlRowWidget：

  Widget _captureControlRowWidget() {
    return new Column(
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: <Widget>[
        new Container(
          color: Colors.black,
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              new IconButton(
                icon: const Icon(
                  Icons.camera_alt,
                  color: Colors.white,
                ),
                color: Colors.white,
                onPressed: controller != null &&
                    controller.value.isInitialized &&
                    !controller.value.isRecordingVideo
                    ? onTakePictureButtonPressed
                    : null,
              ),
              //showSwapCameraButton(),
              new IconButton(
                icon: new Icon(
                  Icons.videocam,
                  color: isRecording ? Colors.red : Colors.white,
                ),
                color: isRecording ? Colors.red : Colors.white,
                onPressed: controller != null &&
                    controller.value.isInitialized &&
                    !controller.value.isRecordingVideo
                    ? onVideoRecordButtonPressed
                    : onStopButtonPressed,
              )
            ],
          ),
        ),
      ],
    );
  }

我尝试了一些使用CrossAxis和MainAxis Alignments的东西，但它始终坚持最低的手机边缘。例如，如果我将手机放在porttrait中，则小部件位于底部，如果我将手机向任一方向旋转90度，则小部件应位于手机的右侧。

Answer 1

目前，您的主body是Column，因此，正如预期的那样，您的控件小部件位于相机预览下方。在横向模式下，您希望控件小部件位于相机预览的右侧，这意味着您希望主体为Row。

您可以通过将顶部Column更改为Flex（可选择切换的行/列）来实现此目的。

@override
Widget build(BuildContext context) {
  bool landscape = MediaQuery.of(context).orientation == Orientation.landscape;
  return new Scaffold(
    appBar: detectOrientationForAppBar(),
    backgroundColor: Colors.black,
    key: _scaffoldKey,
    body: new Flex(
      direction: landscape ? Axis.horizontal : Axis.vertical,

您必须在_captureControlRowWidget中进行相同的更改，使其Column和Row成为方向敏感的Flex。

将视图固定在设备底部

1 个答案: