Flutter中如何为带TextField的Bottom Sheet设置顶部内边距？

解决步骤 #

1. 移除不必要的嵌套Scaffold
   MyWidget作为父Scaffold的body，无需再嵌套Scaffold，否则会导致MediaQuery上下文获取不准确，同时干扰AppBar的层级显示。

2. 动态计算BottomSheet高度
   放弃固定的MediaQuery.of(context).size.height -80写法，结合顶部预留高度和键盘高度动态计算，确保BottomSheet始终处于AppBar下方，不会覆盖状态栏和AppBar。

3. 优化滚动区域布局
   给消息列表的SingleChildScrollView添加Expanded包裹，让它自动填充剩余空间，避免布局溢出问题。

修改后的完整代码 #

import 'package:flutter/material.dart';

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

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  late ScrollController scrollController;
  List<String> messages = [
    "msg1", "msg2", "msg3", "msg4", "msg5", "msg6", "msg7", "msg8", "msg9", "msg10",
  ];

  @override
  void initState() {
    super.initState();
    scrollController = ScrollController();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          showModalBottomSheet(
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.vertical(top: Radius.circular(25.0)),
            ),
            backgroundColor: Colors.yellow,
            context: context,
            isScrollControlled: true,
            builder: (context) {
              // 顶部预留80像素空间，保证AppBar和状态栏可见
              const topReserveHeight = 80.0;
              final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
              // 动态计算BottomSheet高度：屏幕总高度 - 顶部预留 - 键盘高度
              final bottomSheetHeight = MediaQuery.of(context).size.height - topReserveHeight - keyboardHeight;

              return Padding(
                padding: EdgeInsets.only(bottom: keyboardHeight),
                child: SizedBox(
                  height: bottomSheetHeight,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Expanded(
                        child: SingleChildScrollView(
                          controller: scrollController,
                          child: Column(
                            children: [
                              for (var m in messages) Text(m, style: const TextStyle(fontSize: 18)),
                            ],
                          ),
                        ),
                      ),
                      const SizedBox(height: 16),
                      TextField(
                        textAlign: TextAlign.left,
                        decoration: InputDecoration(
                          hintText: 'Message',
                          contentPadding: const EdgeInsets.all(10),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10.0),
                          ),
                          isDense: true,
                        ),
                        keyboardType: TextInputType.multiline,
                        maxLines: 4,
                        minLines: 1,
                        textInputAction: TextInputAction.send,
                        onSubmitted: (value) {
                          setState(() {
                            messages.add(value);
                            // 提交后自动滚动到最新消息
                            WidgetsBinding.instance.addPostFrameCallback((_) {
                              scrollController.jumpTo(scrollController.position.maxScrollExtent);
                            });
                          });
                        },
                      ),
                      const SizedBox(height: 16),
                    ],
                  ),
                ),
              );
            },
          );
        },
        child: const Text('Show Modal Bottom Sheet'),
      ),
    );
  }
}

关键修改说明 #

• 移除嵌套Scaffold：MyWidget直接返回Center，避免上下文层级混乱导致的布局错误。
• 动态高度计算：通过MediaQuery.of(context).size.height - topReserveHeight - keyboardHeight确保BottomSheet始终在顶部预留的80像素空间下方，无论键盘弹出与否，AppBar和状态栏都能保持可见。
• 滚动区域优化：用Expanded包裹消息列表，让它自动填充BottomSheet的剩余空间，同时添加消息提交后的自动滚动逻辑，提升用户体验。
• UI细节调整：给TextField添加上下间距，优化界面美观度。

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