Flutter 底部切换组件 flutter_switch_panel

之前做IM的时候，遇到一个 表情输入框 和 工具输入框 的动画问题。

就是从输入框 切换到 表情输入框的时候，会出现布局闪烁，

后面了解到chat_bottom_container这个包。

这个包基本解决了闪烁问题，

但是用起来比较复杂，还有一些小瑕疵，

结果我友好的回复被作者怼了（还被拉黑了）。。

后面我就自己尝试着做了。

我实现的这个版本简化了很多，但是放弃了键盘隐藏动画。

“简易程度+5。优雅程度-2。”

# 引入组件，可以引用本地，也可以使用远程仓库
  flutter_switch_panel:
    #path: ../flutter_switch_panel // 本地引用方式
    git: 
       url: https://github.com/DMSkin/flutter_switch_panel.git
       # ref: main //分支
       # path: ../flutter_switch_panel  //设置本地路径，但是暂时无效
       # name: flutter_switch_panel //名称

注意：不包含组件样式，这个仓库主要是解决底部切换动画的。

/// 需要设置 键盘高度
final keyBoardHeight = MediaQuery.of(context).viewInsets.bottom;
controller.switchPanelController.setKeyBoardHeight(keyBoardHeight);

/// 需要设置键盘覆盖内容
Scaffold(
  resizeToAvoidBottomInset: false,
)

SwitchPanel(
 panelHeight = 200,
 controller: controller.switchPanelController,
 children: [
    // 表情组件
    _buildEmojiPanel(),
    // 工具组件
    _buildToolPanel(),
  ],
)

// 底部控制器
  late SwitchPanelController switchPanelController;

  @override
  void onInit() {
    /// 初始化控制器
    switchPanelController = SwitchPanelController();
    super.onInit();
  }

  @override
  void onClose() {
    /// 记得销毁控制器
    switchPanelController.dispose();
    super.onClose();
  }

// 关闭键盘
   FocusUtils.unfocus();
   controller.switchPanelController.hide();

   // 显示键盘
   TextField(
     onTap: () async {
        controller.switchPanelController.show();
      }
   )

   // 表情组件
   FocusUtils.unfocus();
   controller.switchPanelController.show(index: 0);

   // 工具组件
   FocusUtils.unfocus();
   controller.switchPanelController.show(index: 1);