dating_touchme_app/lib/pages/home/send_timeline.dart

import 'package:dating_touchme_app/components/page_appbar.dart';
import 'package:dating_touchme_app/config/emoji_config.dart';
import 'package:dating_touchme_app/controller/home/send_timeline_controller.dart';
import 'package:dating_touchme_app/extension/ex_widget.dart';
import 'package:dating_touchme_app/generated/assets.dart';
import 'package:dating_touchme_app/widget/emoji_panel.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class SendTimeline extends StatefulWidget {
  const SendTimeline({super.key});

  @override
  State<SendTimeline> createState() => _SendTimelineState();
}

class _SendTimelineState extends State<SendTimeline> {

  String title = "";
  String message = '';
  final TextEditingController messageController = TextEditingController();

  final FocusNode focusNode = FocusNode();

  bool isEmojiVisible = false;

  @override
  void initState() {
    super.initState();
    focusNode.addListener(() {
      if (focusNode.hasFocus) {
        // 输入框获得焦点（键盘弹起），关闭所有控制面板
        isEmojiVisible = false;
        setState(() {

        });
      }
    });
  }

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



  void toggleEmojiPanel() {
    isEmojiVisible = !isEmojiVisible;
    FocusManager.instance.primaryFocus?.unfocus();
    setState(() {

    });
  }

  void handleEmojiSelected(EmojiItem emoji) {
    // 将表情添加到输入框
    final currentText = messageController.text;
    final emojiText = '[emoji:${emoji.id}]';
    messageController.text = currentText + emojiText;
    // 将光标移到末尾
    messageController.selection = TextSelection.fromPosition(
      TextPosition(offset: messageController.text.length),
    );
    setState(() {}); // 刷新显示
  }


  /// 构建输入框内容（文本+表情）
  List<Widget> buildInputContentWidgets() {
    final List<Widget> widgets = [];
    final text = messageController.value.text;
    final RegExp emojiRegex = RegExp(r'\[emoji:(\d+)\]');

    int lastMatchEnd = 0;
    final matches = emojiRegex.allMatches(text);

    for (final match in matches) {
      // 添加表情之前的文本
      if (match.start > lastMatchEnd) {
        final textPart = text.substring(lastMatchEnd, match.start);
        widgets.add(
          Text(
            textPart,
            style: TextStyle(fontSize: 14.sp, color: Colors.black),
          ),
        );
      }

      // 添加表情图片
      final emojiId = match.group(1);
      if (emojiId != null) {
        final emoji = EmojiConfig.getEmojiById(emojiId);
        if (emoji != null) {
          widgets.add(
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 2.w),
              child: Image.asset(
                emoji.path,
                width: 24.w,
                height: 24.w,
                fit: BoxFit.contain,
              ),
            ),
          );
        }
      }

      lastMatchEnd = match.end;
    }

    // 添加剩余的文本
    if (lastMatchEnd < text.length) {
      final textPart = text.substring(lastMatchEnd);
      widgets.add(
        Text(
          textPart,
          style: TextStyle(fontSize: 14.sp, color: Colors.black),
        ),
      );
    }

    return widgets;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PageAppbar(title: "", right: Container(
        width: 53.w,
        height: 26.w,
        margin: EdgeInsets.only(right: 17.w),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(8.w)),
            color: const Color.fromRGBO(117, 98, 249, 1)
        ),
        child: Center(
          child: Text(
            "发送",
            style: TextStyle(
                fontSize: 13.w,
                color: Colors.white
            ),
          ),
        ),
      ),),
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 17.w, vertical: 10.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
              child: Stack(
                children: [
                  TextField(
                    controller: messageController,

                    focusNode: focusNode,
                    minLines: 1,
                    maxLines: null, // 关键
                    style: TextStyle(
                      fontSize: 14.sp,
                      color: messageController.text.contains('[emoji:')
                          ? Colors.transparent
                          : Colors.black,
                    ),
                    decoration: InputDecoration(
                      contentPadding: EdgeInsets.symmetric(
                          vertical: 0,
                          horizontal: 0
                      ),
                      hintText: "分享你的日常，让缘分更早来临~",
                      hintStyle: TextStyle(
                        fontSize: 14.sp,
                        color: Colors.grey,
                      ),
                      border: const OutlineInputBorder(
                        borderSide: BorderSide.none, // 这将移除边框 // 可选：设置圆角
                      ),
                      // 如果你希望聚焦时和未聚焦时都没有边框，也可以设置 focusedBorder 和 enabledBorder
                      focusedBorder: const OutlineInputBorder(
                        borderSide: BorderSide.none,
                        borderRadius: BorderRadius.all(Radius.circular(8.0)),
                      ),
                      enabledBorder: const OutlineInputBorder(
                        borderSide: BorderSide.none,
                        borderRadius: BorderRadius.all(Radius.circular(8.0)),
                      ),
                    ),
                    onChanged: (value){
                      setState(() {

                      });
                    },
                  ),
                  if (messageController.text.contains('[emoji:'))
                    Positioned.fill(
                      child: IgnorePointer(
                        child: SingleChildScrollView(
                          child: Wrap(
                            children: buildInputContentWidgets(),
                          ),
                        ),
                      ),
                    ),
                ],
              ),
            ),
            Row(
              children: [
                Image.asset(
                  Assets.imagesImg,
                  width: 20.w,
                ),
                SizedBox(width: 25.w,),
                Image.asset(
                  Assets.imagesEmoji,
                  width: 18.w,
                ).onTap(toggleEmojiPanel)
              ],
            ),

            // 表情面板
            EmojiPanel(
              isVisible: isEmojiVisible,
              onEmojiSelected: handleEmojiSelected,
            ),
          ],
        ),
      ),
    );
  }
}