Flutter：点击按钮时如何实现类似键盘弹出的页面内容上推效果？

要实现点击按钮后页面内容像键盘弹出那样上推的效果，核心是通过动画调整页面底部的偏移/内边距，同时配合可滚动组件避免内容溢出，以下是具体实现方案：

实现思路 #

通过状态变量控制页面底部的内边距值，利用Flutter的动画组件（如AnimatedPadding）实现平滑过渡，同时用SingleChildScrollView包裹内容，确保上推后内容可正常滚动。

完整代码示例 #

import 'package:flutter/material.dart';

class PushUpPage extends StatefulWidget {
  const PushUpPage({super.key});

  @override
  State<PushUpPage> createState() => _PushUpPageState();
}

class _PushUpPageState extends State<PushUpPage> {
  // 控制底部偏移量，0为初始状态，200为上推高度（可根据需求调整）
  double _bottomPadding = 0.0;
  // 标记是否处于上推状态
  bool _isPushedUp = false;
  // 模拟键盘高度（可根据屏幕动态计算，这里固定值示例）
  final double _keyboardHeight = 200.0;

  void _togglePushUp() {
    setState(() {
      _isPushedUp = !_isPushedUp;
      _bottomPadding = _isPushedUp ? _keyboardHeight : 0.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('仿键盘上推效果')),
      body: AnimatedPadding(
        // 动画时长设为200ms，和系统键盘弹出时长接近
        duration: const Duration(milliseconds: 200),
        padding: EdgeInsets.only(bottom: _bottomPadding),
        child: SingleChildScrollView(
          child: Column(
            children: [
              // 示例内容：多个输入框和文本
              const TextField(decoration: InputDecoration(hintText: '输入框1')),
              const SizedBox(height: 20),
              const TextField(decoration: InputDecoration(hintText: '输入框2')),
              const SizedBox(height: 20),
              const TextField(decoration: InputDecoration(hintText: '输入框3')),
              const SizedBox(height: 20),
              const Text('示例文本内容'),
              const SizedBox(height: 20),
              const Text('更多内容...'),
              const SizedBox(height: 200), // 占位高度，让页面有足够滚动空间
              // 触发上推的按钮
              ElevatedButton(
                onPressed: _togglePushUp,
                child: Text(_isPushedUp ? '收起上推' : '触发上推'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 调用示例
void main() => runApp(const MaterialApp(home: PushUpPage()));

关键细节说明 #

• 动画过渡：AnimatedPadding会自动处理padding变化的平滑动画，时长设为200ms和系统键盘弹出/收起的动画节奏一致，更贴近原生体验。
• 内容适配：SingleChildScrollView确保页面上推后，超出屏幕的内容可以滚动查看，避免布局溢出错误。
• 高度调整：_keyboardHeight可以根据实际需求修改，也可以通过MediaQuery.of(context).size.height * 0.3这类方式动态计算，适配不同屏幕尺寸。

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