FondleTalk/lib/tools/search/search_page.dart

import 'package:flutter/material.dart';

///搜索
class SearchPage extends StatefulWidget {
  const SearchPage({super.key});

  @override
  State<SearchPage> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  final TextEditingController _chatController = TextEditingController();
  FocusNode myFocusNode = FocusNode();

  String text = "";
  bool isFocusNode = false;

  void _textFieldChanged(String str) {
    text = str;
    setState(() {});
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    myFocusNode.addListener(() {
      if (myFocusNode.hasFocus) {
        print('TextField 获得焦点');
        isFocusNode = true;
      } else {
        print('TextField 失去焦点');
        isFocusNode = false;
      }
      setState(() {});
    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _chatController.dispose();
    myFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFE8EEFC),
      body: Stack(
        children: [
          ///顶部背景
          Container(
            width: double.infinity,
            height: 302,
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                colors: [Color(0xFF4D49FF), Color(0xFFDAA5FF), Color(0x00DEB0FF)], // 三色渐变数组
                begin: Alignment.topCenter, // 渐变开始位置
                end: Alignment.bottomCenter, // 渐变结束位置
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top + 9),
            child: Column(
              children: [
                SizedBox(
                  width: double.infinity,
                  child: Row(
                    children: [
                      Expanded(
                        child: Container(
                          height: 42,
                          alignment: Alignment.centerLeft,
                          margin: EdgeInsets.only(left: 16, right: 10),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.all(Radius.circular(16)),
                          ),
                          child: Row(
                            children: [
                              Container(
                                margin: EdgeInsets.only(left: 8),
                                child: Image(width: 32, image: AssetImage('assets/images/ic_search2.png')),
                              ),
                              Expanded(
                                child: Container(
                                  margin: EdgeInsets.only(left: 5),
                                  padding: EdgeInsets.only(bottom: 10),
                                  child: TextField(
                                    focusNode: myFocusNode,
                                    controller: _chatController,
                                    onChanged: _textFieldChanged,
                                    decoration: InputDecoration(
                                      border: InputBorder.none,
                                      // 移除非聚焦状态下的边框
                                      enabledBorder: InputBorder.none,
                                      // 移除获得焦点但未输入内容时的边框
                                      focusedBorder: InputBorder.none,
                                      // 移除输入时的边框
                                      hintText: "打个招呼吧...",
                                      hintStyle: TextStyle(color: Color(0xFFB6B6B6), fontSize: 13),
                                      suffixStyle: TextStyle(fontSize: 13),
                                    ),
                                  ),
                                ),
                              ),
                              text != ""
                                  ? Container(
                                      width: 21,
                                      margin: EdgeInsets.only(right: 9),
                                      child: GestureDetector(
                                        onTap: () {
                                          _chatController.clear();
                                          text = "";
                                          setState(() {});
                                        },
                                        child: Image(
                                          image: AssetImage('assets/images/ic_empty.png'),
                                        ),
                                      ),
                                    )
                                  : Container(),
                            ],
                          ),
                        ),
                      ),

                      ///添加按钮
                      GestureDetector(
                        onTap: () {
                          Navigator.pop(context);
                        },
                        child: Container(
                            margin: EdgeInsets.only(right: 16),
                            child: Text(
                              '取消',
                              style: TextStyle(fontSize: 16, color: Colors.white),
                            )),
                      )
                    ],
                  ),
                ),
                !isFocusNode
                    ? Container(
                        alignment: Alignment.centerLeft,
                        margin: EdgeInsets.only(left: 16, top: 22),
                        child: Text(
                          '热门搜索',
                          style: TextStyle(color: Colors.white, fontSize: 18),
                        ),
                      )
                    : Container(),
                !isFocusNode
                    ? Container(
                        width: double.infinity,
                        height: 110,
                        margin: EdgeInsets.only(top: 10),
                        child: ListView.builder(
                          itemCount: 6,
                          itemBuilder: (BuildContext context, int index) {
                            return _item1(index);
                          },
                          scrollDirection: Axis.horizontal,
                        ),
                      )
                    : Container(),
                isFocusNode
                    ? Expanded(
                        child: Container(
                          width: double.infinity,
                          height: 110,
                          margin: EdgeInsets.only(top: 10, left: 16, right: 16),
                          child: ListView.builder(
                            itemCount: 6,
                            itemBuilder: (BuildContext context, int index) {
                              return _item2(index);
                            },
                            scrollDirection: Axis.vertical,
                          ),
                        ),
                      )
                    : Container(),
              ],
            ),
          ),
        ],
      ),
    );
  }

  _item1(index) {
    return Container(
      margin: EdgeInsets.only(left: index == 0 ? 16 : 0),
      width: 86,
      height: 106,
      child: Card(
        color: Colors.white,
        child: Column(
          children: [
            Container(
              alignment: Alignment.center,
              margin: EdgeInsets.only(top: 12),
              child: Image(width: 57, image: AssetImage('assets/images/img_head2.png')),
            ),
            Container(
              margin: EdgeInsets.only(top: 8),
              child: Text(
                '撒打算大时代',
                style: TextStyle(color: Color(0xFF616161), fontSize: 11),
              ),
            ),
          ],
        ),
      ),
    );
  }

  _item2(index) {
    return const SizedBox(
      width: double.infinity,
      height: 80,
      child: Card(
        color: Colors.white,
        child: Stack(
          alignment: Alignment.center,
          children: [
            Positioned(
              left: 13,
              child: Image(width: 54, image: AssetImage('assets/images/img_head2.png')),
            ),
            Positioned(
              left: 80,
              top: 19,
              child: Text('菠萝菠萝', style: TextStyle(fontSize: 13)),
            ),
            Positioned(
              left: 80,
              top: 43,
              child: Text('好吃懒做，热爱睡觉，细心', style: TextStyle(fontSize: 12, color: Color(0xFF8B8B8B))),
            ),
          ],
        ),
      ),
    );
  }
}