Flutter中SlidingUpPanel内嵌TextField唤起键盘时面板上移如何解决？

问题原因 #

默认Scaffold的resizeToAvoidBottomInset属性为true，软键盘唤起时会整体压缩页面高度，导致SlidingUpPanel被同步向上顶起。你给面板添加的SingleChildScrollView仅处理了内容滚动逻辑，没有解决页面整体被顶的根因，所以方案不生效。

解决方案 #

按以下修改即可实现面板固定、内容可滚动的需求：

1. 给Scaffold添加resizeToAvoidBottomInset: false配置，禁止页面整体避让软键盘，保证面板位置固定
2. 给SingleChildScrollView添加底部内边距，取值为当前软键盘高度，避免输入框被软键盘遮挡
   修改后的完整代码如下：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.dark,
  ));
  runApp(_MyApp());
}

class _MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: GoogleFonts.rubikTextTheme(
          Theme.of(context).textTheme,
        ),
      ),
      home: Scaffold(
        // 新增这行，禁止页面避让软键盘
        resizeToAvoidBottomInset: false,
        body: SlidingUpPanel(
          defaultPanelState: PanelState.OPEN,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(30),
            topRight: Radius.circular(30),
          ),
          minHeight: 0,
          maxHeight: 650,
          backdropEnabled: true,
          body: Text("BLA"),
          panel: SingleChildScrollView(
            // 新增底部内边距，适配软键盘高度
            padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
            child: Column(
              // 新增这行，让Column高度适配内容
              mainAxisSize: MainAxisSize.min,
              children: [
                TextField(
                  textInputAction: TextInputAction.done,
                  keyboardType: TextInputType.multiline,
                  decoration: InputDecoration(
                    enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Color.fromRGBO(157, 157, 157, 1),
                        width: 0.5,
                      ),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Color.fromRGBO(157, 157, 157, 1),
                        width: 0.5,
                      ),
                    ),
                  ),
                  maxLines: 15,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

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