Flutter：BottomSheet内SAVE按钮始终显示且避免遮挡txt7的解决办法

核心思路 #

让页面主体内容始终处于SAVE按钮上方，通过给主体添加底部内边距避开按钮高度，同时固定按钮在页面底部，确保其不会被隐藏或遮挡输入框。

方法一：Scaffold bottomSheet + 主体内边距 #

1. 先固定SAVE按钮的高度，方便计算内边距
2. 给Scaffold的body添加底部内边距，值等于按钮高度，确保内容不会被遮挡
3. 直接在bottomSheet中放置按钮，默认会始终显示在底部

const double saveButtonHeight = 60.0;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('页面标题')),
    // 主体内容添加底部内边距，避开按钮高度
    body: Padding(
      padding: EdgeInsets.only(bottom: saveButtonHeight),
      child: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const SizedBox(height: 20),
            TextField(
              decoration: const InputDecoration(
                labelText: 'txt7',
                border: OutlineInputBorder(),
                contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
              ),
            ),
            // 其他页面组件...
          ],
        ),
      ),
    ),
    bottomSheet: Container(
      height: saveButtonHeight,
      width: double.infinity,
      color: Colors.white,
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: ElevatedButton(
        onPressed: () {
          // 执行保存逻辑
        },
        child: const Text('SAVE', style: TextStyle(fontSize: 16)),
      ),
    ),
  );
}

方法二：适配软键盘（避免双重遮挡） #

如果输入框获取焦点后软键盘弹出，可能会和按钮一起遮挡内容，此时可以结合MediaQuery动态调整内边距：

const double saveButtonHeight = 60.0;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('页面标题')),
    body: Builder(
      builder: (context) {
        // 获取软键盘弹出时的底部偏移量
        final keyboardInset = MediaQuery.of(context).viewInsets.bottom;
        return Padding(
          // 内边距 = 按钮高度 + 软键盘高度
          padding: EdgeInsets.only(bottom: saveButtonHeight + keyboardInset),
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                const SizedBox(height: 20),
                TextField(
                  decoration: const InputDecoration(
                    labelText: 'txt7',
                    border: OutlineInputBorder(),
                    contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                  ),
                ),
                // 其他页面组件...
              ],
            ),
          ),
        );
      },
    ),
    bottomSheet: Container(
      height: saveButtonHeight,
      width: double.infinity,
      color: Colors.white,
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: ElevatedButton(
        onPressed: () {
          // 执行保存逻辑
        },
        child: const Text('SAVE', style: TextStyle(fontSize: 16)),
      ),
    ),
  );
}

方法三：Stack布局固定按钮 #

如果不想用bottomSheet，可以直接用Stack将按钮固定在底部，同时给主体内容留好底部空间：

const double saveButtonHeight = 60.0;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('页面标题')),
    body: Stack(
      children: [
        // 主体内容，底部内边距避开按钮高度
        Padding(
          padding: EdgeInsets.only(bottom: saveButtonHeight),
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                const SizedBox(height: 20),
                TextField(
                  decoration: const InputDecoration(
                    labelText: 'txt7',
                    border: OutlineInputBorder(),
                    contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                  ),
                ),
                // 其他页面组件...
              ],
            ),
          ),
        ),
        // 固定在底部的SAVE按钮
        Positioned(
          left: 0,
          right: 0,
          bottom: 0,
          child: Container(
            height: saveButtonHeight,
            color: Colors.white,
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: ElevatedButton(
              onPressed: () {
                // 执行保存逻辑
              },
              child: const Text('SAVE', style: TextStyle(fontSize: 16)),
            ),
          ),
        ),
      ],
    ),
  );
}

注意事项 #

• 按钮高度可以根据需求调整，比如使用Flutter内置的kBottomNavigationBarHeight（约56）来保持风格统一
• 页面内容较多时，必须用SingleChildScrollView包裹，避免内容溢出，同时配合软键盘适配时能自动滚动到输入框位置

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