Flutter BottomSheet初始自适应高度，点击后限制最大高度求助

直接上可运行的解决方案，核心是通过状态变量控制BottomSheet的容器高度，结合约束确保不会超出指定最大值：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('BottomSheet 高度切换示例')),
        body: Center(
          child: ElevatedButton(
            onPressed: () => _toggleHeightBottomSheet(context),
            child: const Text('打开底部弹窗'),
          ),
        ),
      ),
    );
  }

  void _toggleHeightBottomSheet(BuildContext context) {
    bool isExpanded = false;
    const double targetMaxHeight = 400; // 你需要的指定最大高度

    showModalBottomSheet(
      context: context,
      isScrollControlled: true, // 允许弹窗高度突破屏幕一半限制
      builder: (context) {
        return StatefulBuilder(
          builder: (context, setState) {
            return Container(
              height: isExpanded ? targetMaxHeight : null, // null时自动适配内容高度
              constraints: BoxConstraints(maxHeight: targetMaxHeight), // 强制限制最大高度
              child: SingleChildScrollView(
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
                  child: Column(
                    mainAxisSize: MainAxisSize.min, // 初始状态下仅包裹内容
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text('初始自适应高度状态', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
                      const SizedBox(height: 12),
                      CheckboxListTile(
                        contentPadding: EdgeInsets.zero,
                        title: const Text('展开至指定最大高度'),
                        value: isExpanded,
                        onChanged: (bool? value) {
                          setState(() => isExpanded = value ?? false);
                        },
                      ),
                      const SizedBox(height: 12),
                      // 模拟内容，测试自适应和滚动
                      ...List.generate(
                        isExpanded ? 20 : 3,
                        (index) => Padding(
                          padding: const EdgeInsets.symmetric(vertical: 8),
                          child: Text('内容项 ${index + 1}'),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            );
          },
        );
      },
    );
  }
}

关键细节说明： #

• isScrollControlled: true：必须开启，否则BottomSheet默认最大高度为屏幕的1/2，无法达到自定义的更大高度。
• 动态高度控制：通过isExpanded状态切换Container的height属性——null时自动适配子组件高度（即wrap_content），为targetMaxHeight时固定到指定高度。
• 最大高度约束：constraints: BoxConstraints(maxHeight: targetMaxHeight)确保即使内容过多，BottomSheet也不会被撑得超过指定高度。
• 滚动处理：SingleChildScrollView保证展开后内容超出指定高度时，用户可以滚动查看全部内容，避免布局溢出错误。
• 状态管理：用StatefulBuilder在BottomSheet内部维护状态，不需要把状态提升到父组件，代码更简洁封装。

如果你的指定最大高度不需要超过屏幕一半，可以去掉isScrollControlled: true，但保留也不会有问题。

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