如何在flutter中删除键盘和评论框之间的空格？

Question

我无法删除评论框和键盘之间的空格。

问题请看下图

下面是我的代码

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: Padding(
        padding: const EdgeInsets.all(1.0),
        child: SizedBox(
          height: 48,
          child: TextFormField(
            decoration: InputDecoration(
              suffixIcon: SizedBox(
                width: 90,
                child: Padding(
                  padding: const EdgeInsets.all(13.0),
                  child: Row(
                    children: [

                      const SizedBox(width: 40),
                      RichText(
                          text: const TextSpan(children: [
                        WidgetSpan(
                          child: SizedBox(
                              height: 20,
                              width: 20,
                              child: Icon(
                                Icons.send_outlined,
                                color: AppColors.appColor0,
                              )),
                        )
                      ])),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ),

请告诉我我犯了什么错误。谢谢你。

Answer 1

我遇到了和你一样的情况，我是通过计算新的底部插图来做到的。

首先，您必须将

Scaffold

属性设置为

resizeToAvoidBottomInset: false

然后计算文本字段的新按钮插入。默认底部内边距为 48，因此仅在底部插入大于底部内边距时才计算，以确保内边距始终为正数：

double getBottomInsets() {
   if (MediaQuery.of(context).viewInsets.bottom >
       MediaQuery.of(context).viewPadding.bottom) {
      return MediaQuery.of(context).viewInsets.bottom -
             MediaQuery.of(context).viewPadding.bottom;
   }
   return 0;
}

不需要

setState

只需为您的 FAB 小部件应用填充，它就会自动调整插图：

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Padding(
  padding: EdgeInsets.only(
    bottom: getBottomInsets(),
  ),
  child: YourTextField(),
),

终于键盘和FAB贴合了！

Answer 2

就我而言，我通过主体中的 SingleChildScrollView 解决了这个问题

  body: Column(
    children: [
      Expanded(
        child: SingleChildScrollView(
          reverse: true,
          physics: BouncingScrollPhysics(),
          child: Column(
            children: [
              Container(
                height: mq.height * 0.8,
                color: Colors.white,
                child: Obx(
                  () => ListView.builder(
                    reverse: true,
                    physics: BouncingScrollPhysics(),
                    shrinkWrap: true,
                    scrollDirection: Axis.vertical,
                    itemCount: _c.list.length,
                    itemBuilder: (context, index) {
                      final message = _c.list[index];
                      return MessageCard(message: message);
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 10.0),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(0),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                children: [
                  ElevatedButton(
                    onPressed: () {
                      _c.textC.text = "Tolong catat ";
                      _isFirstTap = true;
                    },
                    style: ElevatedButton.styleFrom(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                    child: Text("Tolong catat"),
                  ),
                  const SizedBox(width: 10),
                  ElevatedButton(
                    onPressed: () {
                      _c.textC.text = "Bantu diingat ";
                      _isFirstTap = true;
                    },
                    style: ElevatedButton.styleFrom(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                    child: Text("Bantu diingat"),
                  ),
                  const SizedBox(width: 10),
                  ElevatedButton(
                    onPressed: () {
                      _c.textC.text = "Hitunglah ";
                      _isFirstTap = true;
                    },
                    style: ElevatedButton.styleFrom(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                    child: Text("Hitunglah "),
                  ),
                  const SizedBox(width: 10),
                  ElevatedButton(
                    onPressed: () {
                      _c.textC.text = " ?";
                      _isFirstTap = true;
                    },
                    style: ElevatedButton.styleFrom(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                    child: Text("?"),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 10),
            Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _c.textC,
                    focusNode: _textFocusNode,
                    keyboardType: TextInputType.multiline,
                    maxLines: null,
                    textAlign: TextAlign.left,
                    onTap: () {
                      if (_isFirstTap) {
                        _isFirstTap = false;
                      }
                    },
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: Colors.grey[200],
                      isDense: true,
                      hintText: "...",
                      hintStyle: TextStyle(fontSize: 12, color: Colors.grey),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(12),
                        borderSide: BorderSide.none,
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                CircleAvatar(
                  backgroundColor: Colors.blue,
                  radius: 25,
                  child: IconButton(
                    icon: const Icon(
                      Icons.send_rounded,
                      color: Colors.white,
                      size: 28,
                    ),
                    onPressed: () {
                      _c.askQuestion();
                      _isFirstTap = true;
                      _c.textC.text = "";
                    },
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ],
  ),

希望这会有所帮助

Answer 3

您应该设置

resizeToAvoidBottomInset: false

并根据键盘是否打开动态添加填充。像这样的东西：

@override
  Widget build(BuildContext context) {
    bool isKeyboardOpen = MediaQuery.of(context).viewInsets.bottom > 0;
    return Scaffold(
      resizeToAvoidBottomInset: false,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: Padding(
        padding: isKeyboardOpen
            ? EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)
            : const EdgeInsets.all(1.0),
        child: SizedBox(
          height: 48,
          child: TextFormField(
            decoration: InputDecoration(
              suffixIcon: SizedBox(
                width: 90,
                child: Padding(
                  padding: const EdgeInsets.all(13.0),
                  child: Row(
                    children: [
                      // Image.asset("assets/images/home_icon/mic.png"),
                      const SizedBox(width: 40),
                      RichText(
                          text: const TextSpan(children: [
                        WidgetSpan(
                          child: SizedBox(
                              height: 20,
                              width: 20,
                              child: Icon(
                                Icons.send_outlined,
                              )),
                        )
                      ])),
                      // Image.asset("assets/images/home_icon/send.png"),
                    ],
                  ),
                ),
              ),
              prefixIcon: Padding(
                padding: const EdgeInsets.all(13.0),
                child: RichText(
                    text: const TextSpan(children: [
                  WidgetSpan(
                    child: SizedBox(
                        height: 20,
                        width: 20,
                        child: Icon(
                          Icons.photo_camera_outlined,
                        )),
                  )
                ])),
              ),
              hintText: 'Add comments...',
              // hintStyle: NewStyles.textValueGreyR14,
              filled: true,
              fillColor: Colors.white,
              contentPadding:
                  const EdgeInsets.symmetric(horizontal: 30, vertical: 0),
              focusedBorder: OutlineInputBorder(
                // borderSide: const BorderSide(color: AppColors.appColor2),
                borderRadius: BorderRadius.circular(100),
              ),
              enabledBorder: OutlineInputBorder(
                // borderSide:
                //     const BorderSide(color: ApplicationColors.chatBGcolorEE),
                borderRadius: BorderRadius.circular(100),
              ),
              errorBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Theme.of(context).errorColor),
                borderRadius: BorderRadius.circular(100),
              ),
            ),
          ),
        ),
      ),
      body: SafeArea(
        child: SizedBox(),
      ),
    );
  }