Flutter中切换Visibility组件时如何避免下方组件移位？

在AlertDialog的Stepper组件中使用Visibility控制重复选项的显示/隐藏，切换Repeat开关时，下方的BACK、DONE等按钮会跟着上下移动，如何避免这种布局弹跳？

代码场景 #

@override
Widget build(BuildContext context) {
  return LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
      return AlertDialog(
            insetPadding: const EdgeInsets.all(10),
            content: StatefulBuilder(builder: (context, setState) {
              return SizedBox(
                  width: constraints.maxWidth,
                  height: constraints.maxHeight,
                  child: Form(
                    key: widget.formKey,
                    child: Stepper(
                      elevation: 0,
                      margin: const EdgeInsets.all(0),
                      type: StepperType.horizontal,
                      currentStep: _currentStep,
                      controlsBuilder: (BuildContext context, ControlsDetails controls) {
                        return Padding(
                          padding: const EdgeInsets.symmetric(vertical: 25.0),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              if (_currentStep != 0)
                                ElevatedButton(
                                  style: const ButtonStyle(backgroundColor: MaterialStatePropertyAll(Colors.grey)),
                                  onPressed: controls.onStepCancel,
                                  child: const Text(
                                    'BACK',
                                    style: TextStyle(color: Colors.white),
                                  ),
                                ),
                              const Spacer(),
                              if (_currentStep < 2)
                                ElevatedButton(
                                  onPressed: controls.onStepContinue,
                                  child: const Text('NEXT'),
                                ),
                            ],
                          ),
                        );
                      },
                      steps: [
                        Step(...),
                        Step(
                            state:
                            _currentStep > 1 ? StepState.complete : StepState.disabled,
                            isActive: _currentStep >= 0,
                            title: const Text(''),
                            content: Container(
                              child: Column(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      Expanded(
                                        child:
                                        TextFormField(
                                          enabled: false,
                                          onSaved: (value) => setState (() => widget.task.scheduleDate = _selectedDate.value),
                                          controller: _dateController,
                                          validator: (value) => value!.isEmpty ? "Date Schedule" : null,
                                          decoration: const InputDecoration(hintText: "Date Schedule"),
                                        ),
                                      ),
                                      ElevatedButton(
                                        onPressed: () => setState (() => _restorableDatePickerRouteFuture.present()),
                                        child: const Icon(Icons.calendar_month),
                                      )
                                    ],
                                  ),
                                  Row(
                                    children: [
                                      Expanded(
                                        child:
                                        TextFormField(
                                          enabled: false,
                                          onSaved: (value) => setState (() => widget.task.scheduleTime = _selectedTime.value),
                                          controller: _timeController,
                                          validator: (value) => value!.isEmpty ? "Time Schedule" : null,
                                          decoration: const InputDecoration(hintText: "Time Schedule"),
                                        ),
                                      ),
                                      ElevatedButton(
                                        onPressed: () => setState (() => _restorableTimePickerRouteFuture.present()),
                                        child: const Icon(Icons.access_time_outlined),
                                      )
                                    ],
                                  ),
                                  Row(
                                    children: [
                                      const Expanded(
                                        child:
                                        Text('Repeat'),
                                      ),
                                      Switch(
                                          value: _isShowingRepeat,
                                          onChanged: (value) => setState(() => _isShowingRepeat = value)
                                      ),
                                    ],
                                  ),
                                  Visibility(
                                      visible: _isShowingRepeat,
                                      child: Column(
                                          crossAxisAlignment: CrossAxisAlignment.stretch,
                                          mainAxisAlignment: MainAxisAlignment.start,
                                          children: [
                                            WeekdaySelector(
                                              onChanged: (int day) {
                                                setState(() {
                                                  final index = day % 7;
                                                  _weekdaySelection[index] = !_weekdaySelection[index];
                                                });
                                              },
                                              values: _weekdaySelection
                                              )
                                          ],
                                        ),
                                      ),
                              ]),
                            )),
                          Step(...)
                        ],
                        onStepContinue: () {
                          if (_currentStep < 2) {
                            setState(() {
                              _currentStep += 1;
                            });
                          }
                        },
                        onStepCancel: () {
                          if (_currentStep == 0) {
                            return;
                          }
                          setState(() {
                            _currentStep -= 1;
                          });
                        },
                        onStepTapped: (int index) {
                          setState(() {
                            _currentStep = index;
                          });
                        },
                      )),
                    );
            }),
            title: const Text('Task'),
            actions: <Widget>[
              TextButton(
                child: const Text('CANCEL'),
                onPressed: () {
                  Navigator.of(context).pop(null);
                },
              ),
              TextButton(
                child: const Text('DONE'),
                onPressed: () {
                  if (widget.formKey.currentState!.validate()) {
                    Navigator.of(context).pop(widget.task);
                    _handleSubmit(widget.task);
                  }
                },
              ),
            ],
          );
    });
}

解决这个弹跳问题，核心是不让Visibility组件的显示/隐藏改变整体布局的高度，有几个实用的办法：

1. 让Visibility保持占位空间 #

默认情况下，Visibility隐藏时会完全移除组件占据的空间，导致布局收缩。给它加上maintainSize: true参数，就能让组件即使隐藏也保持原来的空间，不会触发下方按钮的位置变化：

Visibility(
  visible: _isShowingRepeat,
  maintainSize: true, // 关键：保持组件的占位空间
  maintainAnimation: true, // 可选：保留动画效果
  maintainState: true, // 可选：保留组件状态
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      WeekdaySelector(
        onChanged: (int day) {
          setState(() {
            final index = day % 7;
            _weekdaySelection[index] = !_weekdaySelection[index];
          });
        },
        values: _weekdaySelection
      )
    ],
  ),
)

2. 给内容区域设置固定高度或滚动容器 #

给Step的content部分设置固定高度，或者用SingleChildScrollView包裹内容，这样展开重复选项时，内容区域内部滚动，不会改变整体对话框的高度：

Step(
  // ...其他属性
  content: Container(
    height: 300, // 设置固定高度，根据实际需求调整
    child: SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // 原来的日期、时间、开关、Visibility组件
        ],
      ),
    ),
  ),
)

3. 分离内容区域与按钮区域 #

调整AlertDialog的布局，让按钮区域（包括Stepper的BACK/NEXT和对话框的CANCEL/DONE）固定在底部，内容区域占据剩余空间并允许滚动：

修改AlertDialog的content部分结构：

content: StatefulBuilder(builder: (context, setState) {
  return SizedBox(
    width: constraints.maxWidth,
    height: constraints.maxHeight,
    child: Column(
      children: [
        Expanded(
          child: Form(
            key: widget.formKey,
            child: Stepper(
              elevation: 0,
              margin: const EdgeInsets.all(0),
              type: StepperType.horizontal,
              currentStep: _currentStep,
              // 移除原有controlsBuilder，把按钮移到外面
              steps: [/* 原有步骤内容 */],
              onStepContinue: () {
                if (_currentStep < 2) setState(() => _currentStep += 1);
              },
              onStepCancel: () {
                if (_currentStep != 0) setState(() => _currentStep -= 1);
              },
              onStepTapped: (int index) => setState(() => _currentStep = index),
            ),
          ),
        ),
        // 固定底部的操作按钮
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 16.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              if (_currentStep != 0)
                ElevatedButton(
                  style: const ButtonStyle(backgroundColor: MaterialStatePropertyAll(Colors.grey)),
                  onPressed: () => setState(() => _currentStep -= 1),
                  child: const Text('BACK', style: TextStyle(color: Colors.white)),
                ),
              const Spacer(),
              if (_currentStep < 2)
                ElevatedButton(
                  onPressed: () => setState(() => _currentStep += 1),
                  child: const Text('NEXT'),
                ),
            ],
          ),
        ),
      ],
    ),
  );
}),

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