Flutter点击BottomSheet内输入框出现底部125像素溢出错误如何解决？

问题原因 #

• 代码语法结构错误：原有代码的布局嵌套逻辑混乱，BottomSheet容器下的头部布局、输入框、单选框没有放在同一个根Column内，布局层级完全错乱
• 布局逻辑错误：可滚动内容区未设置弹性适配，键盘唤起后会压缩BottomSheet的可用高度，固定高度的头部+输入区+单选框的总高度超过压缩后的可用高度，触发竖向溢出

修复代码 #

floatingActionButton: InkWell(
  onTap: () {
    _scaffoldKey.currentState!.showBottomSheet(
      (context) => Container(
        height: 70.h,
        width: double.infinity,
        decoration: const BoxDecoration(
          color: Color(pagesBackgroundColor),
          boxShadow: [BoxShadow(color: Color(pagesBackgroundColor))],
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(15),
            topLeft: Radius.circular(15),
          ),
        ),
        // 统一根Column承载所有内容
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 固定头部区域
            Container(
              width: 15.w,
              height: 1.5.w,
              margin: EdgeInsets.only(top: 2.h),
              decoration: const BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(2.0)),
                color: Color(greyColor),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 2.w, top: 2.h),
              child: Align(
                alignment: Alignment.bottomLeft,
                child: Text(
                  "Add new note",
                  style: Theme.of(context).textTheme.headline1,
                ),
              ),
            ),
            // 可滚动区域用Expanded包裹，自动适配剩余高度
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 1.h, vertical: 2.h),
                      child: AutoSizeTextField(
                        textAlign: TextAlign.justify,
                        cursorRadius: Radius.circular(2.w),
                        cursorColor: const Color(accentColor),
                        controller: _textEditingController,
                        minLines: 1,
                        maxLength: 150,
                        maxLines: 4,
                        // 适配键盘唤起的间距
                        scrollPadding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom + 20),
                      ),
                    ),
                    ListTile(
                      title: Text(AppLocalizations.of(context)!.homeTodayTap),
                      leading: Radio(
                        value: 1,
                        groupValue: 1,
                        onChanged: (value) {},
                      ),
                    ),
                    ListTile(
                      title: Text(AppLocalizations.of(context)!.homeTomorowTap),
                      leading: Radio(
                        value: 2,
                        groupValue: 1,
                        onChanged: (value) {},
                      ),
                    ),
                    ListTile(
                      title: Text(AppLocalizations.of(context)!.homeSomeDayTap),
                      leading: Radio(
                        value: 3,
                        groupValue: 1,
                        onChanged: (value) {},
                      ),
                    ),
                    // 底部留空适配键盘
                    SizedBox(height: MediaQuery.of(context).viewInsets.bottom + 10.h,)
                  ],
                ),
              ),
            )
          ],
        ),
      ),
      // 配置BottomSheet适配键盘
      enableDrag: true,
      isScrollControlled: true,
    );
  },
  child: Container(
    clipBehavior: Clip.antiAliasWithSaveLayer,
    height: 11.h,
    width: 10.h,
    decoration: BoxDecoration(
      shape: BoxShape.rectangle,
      borderRadius: BorderRadius.all(Radius.circular(1.w)),
      color: const Color(accentColor),
    ),
    child: Icon(
      Icons.add,
      color: Colors.white,
      size: 9.h,
    ),
  ),
),

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