Flutter实现软键盘与其它区域丝滑切换效果_Android

效果演示

问题产生

本次要解决的问题是实现实现软键盘和其它区域的丝滑切换，我们点击微信的表情和键盘，不难发现输入框可以一直保持稳定，仿佛表情抽屉就藏在软键盘后面。我刚开始的解决思路是，当软键盘收起展示表情抽屉，当表情抽屉收起后展示软键盘，但很快就发现了问题，软键盘与表情抽屉切换的过程中，会造成页面的震荡

问题分析

我录视频后慢倍速分析，发现原因是键盘收缩同时表情抽屉的container开始上升，但键盘收缩的距离不等于container上升的距离，导致输入框不稳定。查阅资料后发现安卓的思路是获取软键盘高度，将输入框控制在一个固定高度，但是flutter各种组件的位置取决于与其它组件的位置关系，除非使用stack图层，才能将输入框设置为固定高度，但这样做会给键盘收起步骤带来困难，因此pass。

解决思路

其实解决方法就在问题分析中，不知道你发现了吗

键盘收缩同时表情抽屉的container开始上升，但键盘收缩的距离不等于container上升的距离，导致输入框不稳定

那我们就让键盘收缩距离等于container上升距离，不就可以保持输入框的高度了吗我们以语音输入区为例，重要步骤主要有两步

获取键盘的最大高度，即输入框底部的距离，我们设置为inputheight
获取键盘的实时高度，使用inputheight-currentkeyboardheight，即可获得voiceinputheight的高度，使用provider实时更新container的高度

provider代码如下

import 'package:flutter/material.dart';  
class providerchatcontent with changenotifier {
  double _voiceinputheight = 0.0;

  double get voiceinputheight => _voiceinputheight;

  void update_voiceinputheight(double newheight) {
    _voiceinputheight = newheight;
    notifylisteners();
  }
}

组件代码如下

import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class yourclassname extends statefulwidget {
  @override
  _yourclassnamestate createstate() => _yourclassnamestate();
}

class _yourclassnamestate extends state<yourclassname> with widgetsbindingobserver {
  timer? _debouncetimer;
  final focusnode _focusnode = focusnode();
  double containerheight = 0.0;
  double inputheight = 0.0; // 假设这是初始输入框的高度
  double voiceinputheight = 0.0;

  @override
  void initstate() {
    super.initstate();
    widgetsbinding.instance.addobserver(this);
  }

  @override
  void dispose() {
    widgetsbinding.instance.removeobserver(this);
    _debouncetimer?.cancel();
    _focusnode.dispose();
    super.dispose();
  }

  // 获取键盘的实时高度
  @override
  void didchangemetrics() {
    super.didchangemetrics();
    if (mounted) {
      final provider = provider.of<providerchatcontent>(context, listen: false);
      final double currentkeyboardheight = edgeinsets.fromwindowpadding(
        widgetsbinding.instance.window.viewinsets,
        widgetsbinding.instance.window.devicepixelratio,
      ).bottom;

      // 设置一个新的计时器
      _debouncetimer?.cancel(); // 取消之前的计时器
      _debouncetimer = timer(const duration(milliseconds: 39), () {
        if (currentkeyboardheight > 0 && _focusnode.hasfocus) {
          setstate(() {
            // 更新 containerheight 为 inputheight 和 currentkeyboardheight 的最大值
            containerheight = max(inputheight, currentkeyboardheight);
          });
        }
      });

      voiceinputheight = inputheight - currentkeyboardheight;
      provider.update_voiceinputheight(voiceinputheight);
    }
  }

  @override
  widget build(buildcontext context) {
    final provider = provider.of<providerchatcontent>(context);
    return scaffold(
      body: column(
        children: [
          row(
            // 此处填写输入框和其它代码
          ),
          container(
            // 此处写你的container
            height: max(provider.voiceinputheight, 0.0), // 使用最大值确保不会有负数的高度
          ),
        ],
      ),
    );
}