在我的手机屏幕键盘显示用于在过滤器功能中搜索匹配大厅后底部溢出 121 像素

Question

我正在尝试为我的比赛大厅实施过滤功能，但问题是，一旦我尝试在 CustomTextField 中搜索任何大厅，我手机的屏幕键盘就会出现，这使我的底部溢出 121 像素。

我在溢出前后发布了过滤器功能的屏幕截图，以便清楚地了解。

请忽略图片中的Circular Logo Error，那只是因为没有提供路径导致的logo显示错误。

代码：

Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
      child: BottomSheet(
        onClosing: () => {},
        builder: (_) {
          return SizedBox(
            height: 595.h,
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 15.w),
              child: Column(
                children: [
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Container(
                      padding: EdgeInsets.only(
                        top: 34.h,
                        left: 40.w,
                      ),
                      child: Text(
                        'Filter',
                        style: Theme.of(context).textTheme.titleMedium?.copyWith(
                              fontSize: 28.sp,
                              fontWeight: FontWeight.w600,
                            ),
                      ),
                    ),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      color: const Color(0xFF2B2B3D),
                      borderRadius: BorderRadius.circular(
                        10.r,
                      ),
                    ),
                    child: CustomTextField(
                      hintText: 'Host Username',
                      controller: _controller,
                      onChanged: (p0) => print(p0),
                    ),
                  ),
                  SizedBox(
                    height: 12.h,
                  ),
                  Container(
                    height: 150.h,
                    decoration: BoxDecoration(
                      color: const Color(0xFF2B2B3D),
                      borderRadius: BorderRadius.circular(
                        10.r,
                      ),
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Expanded(
                          child: ListView(
                            scrollDirection: Axis.horizontal,
                            children: [
                              SizedBox(
                                width: 200.w,
                                child: RadioListTile<String>(
                                  activeColor: Colors.white,
                                  title: Text(
                                    "By Team",
                                    style: Theme.of(context).textTheme.bodyMedium,
                                  ),
                                  value: "team",
                                  groupValue: selectedMatchFilter,
                                  onChanged: (String? value) => setState(() {
                                    selectedMatchFilter = value;
                                  }),
                                ),
                              ),
                              SizedBox(
                                width: 200.w,
                                child: RadioListTile<String>(
                                  activeColor: Colors.white,
                                  title: Text(
                                    "By League",
                                    style: Theme.of(context).textTheme.bodyMedium,
                                  ),
                                  value: "league",
                                  groupValue: selectedMatchFilter,
                                  onChanged: (String? value) => setState(() {
                                    selectedMatchFilter = value;
                                  }),
                                ),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(
                          height: 100.h,
                          child: Row(
                            children: [
                              Expanded(
                                child: ListView.builder(
                                  itemCount: 10,
                                  scrollDirection: Axis.horizontal,
                                  itemBuilder: (context, index) => SizedBox(
                                    height: 100.h,
                                    width: 125.w,
                                    child: TeamLogo(
                                      id: 1,
                                      imgPath: "Barcelona",
                                      teamName: "Barcelona",
                                      selected: false,
                                      notifyParent: () {},
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(top: 5.h),
                    child: const Text(
                      "Matchday",
                      textAlign: TextAlign.center,
                    ),
                  ),
                  Column(
                    children: [
                      RadioListTile<DateTime>(
                        activeColor: Colors.white,
                        title: Text(
                          "Today",
                          style: Theme.of(context).textTheme.bodyMedium,
                        ),
                        value: widget.today,
                        groupValue: selectedMatchDateFilter,
                        onChanged: (DateTime? value) => setState(() {
                          selectedMatchDateFilter = value;
                        }),
                      ),
                      RadioListTile<DateTime>(
                        activeColor: Colors.white,
                        title: Text(
                          "Tomorrow",
                          style: Theme.of(context).textTheme.bodyMedium,
                        ),
                        value: DateTime(DateTime.now().year, DateTime.now().month, DateTime.now().day + 1),
                        groupValue: selectedMatchDateFilter,
                        onChanged: (DateTime? value) => setState(() {
                          selectedMatchDateFilter = value;
                        }),
                      ),
                      RadioListTile<DateTime>(
                        activeColor: Colors.white,
                        title: Row(
                          children: [
                            DropdownButton2<String>(
                              isExpanded: true,
                              buttonHeight: 30.h,
                              buttonWidth: 220.w,
                              items: const [
                                DropdownMenuItem<String>(
                                  value: "",
                                  child: Text("Till Date"),
                                ),
                                DropdownMenuItem<String>(
                                  value: "",
                                  child: Text("Precise Date"),
                                ),
                              ],
                            ),
                            1 == 2
                                ? Checkbox(
                                    value: true,
                                    onChanged: (bool? _value) {},
                                  )
                                : IconButton(
                                    icon: const Icon(Icons.calendar_today),
                                    onPressed: () => showDatePicker(
                                      context: context,
                                      initialDate: DateTime.now(),
                                      firstDate: DateTime(2022, 11, 16),
                                      lastDate: DateTime(2023, 1, 1),
                                    ),
                                  ),
                          ],
                        ),
                        value: DateTime.now(),
                        groupValue: selectedMatchDateFilter,
                        onChanged: (value) {},
                      )
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Text("Premium"),
                      Switch(
                        onChanged: (bool? s) => setState(() {
                          isPremiumFilter = s ?? false;
                        }),
                        value: isPremiumFilter,
                        activeColor: const Color(0xFF182A54),
                        inactiveThumbColor: Colors.white,
                        activeTrackColor: const Color(0xFFD9D9D9),
                        inactiveTrackColor: const Color(0xFFD9D9D9),
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      TextButton(
                        onPressed: () {},
                        child: const Text("Apply"),
                      ),
                      TextButton(
                        onPressed: () {},
                        child: const Text("Clear All"),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

Answer 1

快速解决您的问题。

在您的Scaffold中添加resizeToAvoidBottomInset属性，如下所示：

Scaffold(
  resizeToAvoidBottomInset: true,
 /*...*/
 );

Answer 2

您还可以使用以下内容包装您的小部件以强制对其进行全屏约束，并使其可滚动：

SingleChildScrollView(
  child: ConstrainedBox(
    constraints: BoxConstraints(
      maxHeight: MediaQuery.of(context).size.height,
      maxWidth: MediaQuery.of(context).size.width,
    ),
    child: /*your widgets*/,
  ),
)