flutter 仿微信点击加号 键盘跟面板切换效果

import 'package:flutter/material.dart';

class WeChatLikePage extends StatefulWidget {
  const WeChatLikePage({Key? key}) : super(key: key);

  @override
  _WeChatLikePageState createState() => _WeChatLikePageState();
}

class _WeChatLikePageState extends State<WeChatLikePage> {
  late FocusNode _focusNode;
  bool _showEmoticonPanel = false;

  @override
  void initState() {
    super.initState();
    _focusNode = FocusNode();
    _focusNode.addListener(_onFocusChange);
  }

  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }

  void _onFocusChange() {
    if (_focusNode.hasFocus) {
      setState(() {
        _showEmoticonPanel = false;
      });
    }
  }

  void _toggleEmoticonPanel() {
    if (_showEmoticonPanel) {
      // 如果表情面板显示，则隐藏它
      setState(() {
        _showEmoticonPanel = false;
      });
      // 延迟显示键盘
      Future.delayed(Duration(milliseconds: 200), () {
        _focusNode.requestFocus();
      });
    } else {
      // 如果表情面板没有显示，则显示它，并隐藏键盘
      _focusNode.unfocus();
      setState(() {
        _showEmoticonPanel = true;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("微信点加号切换效果"),
      ),
      body: GestureDetector(
        onTap: () {
          // 点击空白处隐藏键盘和表情面板
          _focusNode.unfocus();
          setState(() {
            _showEmoticonPanel = false;
          });
        },
        child: Stack(
          children: <Widget>[
            ListView.builder(
              itemCount: 30,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text('Item $index'),
                );
              },
            ),
            Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              child: Column(
                children: <Widget>[
                  Container(
                    color: Colors.white,
                    padding: EdgeInsets.symmetric(horizontal: 8),
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: TextField(
                            focusNode: _focusNode,
                            decoration: InputDecoration(
                              hintText: '请输入内容',
                              border: OutlineInputBorder(),
                            ),
                          ),
                        ),
                        IconButton(
                          icon: Icon(Icons.add),
                          onPressed: _toggleEmoticonPanel,
                        ),
                      ],
                    ),
                  ),
                  AnimatedContainer(
                    duration: Duration(milliseconds: 200),
                    height: _showEmoticonPanel ? 200 : 0,
                    padding: EdgeInsets.symmetric(horizontal: 8),
                    color: Colors.grey[200],
                    child: _showEmoticonPanel
                        ? Container(
                      width: 750,
                        child: Text("1111"),
                    )
                        : null,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}