Flutter Chat UI 中自定义输入框的实现方案

背景介绍

在 Flutter Chat UI 项目中，从 v1 升级到 v2 版本后，输入框组件的实现方式发生了变化。v1 版本使用的是 CustomInput 小部件，而 v2 版本则引入了 ComposerBuilder 的概念。这一变化给开发者带来了新的挑战，特别是在需要高度自定义输入框时。

问题分析

在 v2 版本中，开发者尝试了几种不同的方法来实现自定义输入框：

1. 直接使用旧版 CustomInput 小部件：这种方法会导致输入框覆盖在消息列表上方，而不是保留其应有的位置。

2. 使用内置的 Compose 类：虽然提供了一些自定义选项，但仍有诸多限制，如无法自定义 enabled、onChanged、onTap 等重要属性。

3. 继承 Composer 类：这种方法虽然可行，但需要导入未公开的内部类，存在维护风险。

解决方案

使用 ComposerHeightNotifier

项目核心贡献者提供了一个优雅的解决方案：通过 ComposerHeightNotifier 来管理输入框高度。这个方案利用了 Provider 状态管理（作为项目的传递依赖已经存在），可以完美解决输入框位置问题。

自定义 Composer 实现

以下是实现自定义输入框的推荐方案：

class CustomComposer extends StatefulWidget {
  final Widget topWidget;

  const CustomComposer({super.key, required this.topWidget});

  @override
  State<CustomComposer> createState() => _CustomComposerState();
}

class _CustomComposerState extends State<CustomComposer> {
  final _key = GlobalKey();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) => _measure());
  }

  @override
  void didUpdateWidget(covariant CustomComposer oldWidget) {
    super.didUpdateWidget(oldWidget);
    WidgetsBinding.instance.addPostFrameCallback((_) => _measure());
  }

  @override
  Widget build(BuildContext context) {
    final bottomSafeArea = MediaQuery.of(context).padding.bottom;
    final theme = context.watch<ChatTheme>();

    return Positioned(
      left: 0,
      right: 0,
      bottom: 0,
      child: ClipRect(
        child: Container(
          key: _key,
          color: theme.colors.surfaceContainerLow,
          child: Padding(
            padding: EdgeInsets.only(bottom: bottomSafeArea),
            child: widget.topWidget,
          ),
        ),
      ),
    );
  }

  void _measure() {
    if (!mounted) return;

    final renderBox = _key.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox != null) {
      final height = renderBox.size.height;
      final bottomSafeArea = MediaQuery.of(context).padding.bottom;

      context.read<ComposerHeightNotifier>().setHeight(height - bottomSafeArea);
    }
  }
}

实现原理

1. 布局管理：使用 Positioned 小部件将输入框固定在底部
2. 高度测量：通过 GlobalKey 获取渲染对象，计算实际高度
3. 安全区域处理：自动考虑底部安全区域（如iPhone的Home指示条）
4. 高度通知：使用 ComposerHeightNotifier 通知聊天界面输入框高度变化

未来发展方向

项目维护者提到未来可能会增加一个选项，允许将 Composer 放在 Column 中而不是 Stack 中。这种布局方式虽然会失去模糊效果，但可以简化实现，不再需要高度监听机制。

最佳实践建议

1. 对于大多数场景，建议直接使用内置的 Composer 组件
2. 当需要高度自定义时，可以采用上述 CustomComposer 方案
3. 避免直接继承或修改内部类，以保持代码的稳定性和可维护性
4. 关注项目更新，未来可能会有更简单的实现方式

通过这种方案，开发者可以灵活地实现各种自定义输入框需求，同时保持与 Flutter Chat UI 框架的良好集成。