如何制作浮动搜索栏

Question

我在不同网站上找到的那些在 header 上都有一个搜索图标，搜索栏只在点击时出现，但我想要一个已经存在的搜索栏，但也有一个与之相连的搜索按钮

插图：

Answer 1

试试这个代码（也有使用搜索功能的逻辑）。 如果你喜欢它。

---

完整代码

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool hasFocus = false;
  FocusNode focus = FocusNode();
  TextEditingController searchController = TextEditingController();

  @override
  void initState() {
    super.initState();
    focus.addListener(() {
      onFocusChange();
    });
    searchController.addListener(() {
      filterClints();
    });
  }

  @override
  void dispose() {
    searchController.dispose();
    focus.removeListener(onFocusChange);
    super.dispose();
  }

  void onFocusChange() {
    if (focus.hasFocus) {
      setState(() {
        hasFocus = true;
      });
    } else {
      setState(() {
        hasFocus = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    bool isSearching = searchController.text.isNotEmpty;
    return Scaffold(
      body: Column(
        children: [
          Container(
            child: Padding(
              padding: const EdgeInsets.only(
                left: 5,
                right: 5,
                top: 0,
                bottom: 7,
              ),
              child: TextField(
                focusNode: focus,
                controller: searchController,
                // style: TextStyle(fontSize: 14, ),
                decoration: InputDecoration(
                  hintText: "Search",
                  label: const Text("Search customers & places"),
                  contentPadding: const EdgeInsets.symmetric(vertical: 2),
                  border: OutlineInputBorder(
                    borderRadius: const BorderRadius.all(Radius.circular(50)),
                    borderSide: BorderSide(
                      color: Theme.of(context).colorScheme.primary,
                    ),
                  ),
                  prefixIcon: const Icon(
                    Icons.search,
                  ),
                  suffixIcon: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      if (hasFocus)
                        InkWell(
                          onTap: () {},
                          child: const Icon(
                            Icons.clear,
                            color: Colors.grey,
                          ),
                        ),
                      const SizedBox(
                        width: 10,
                      ),
                      PopupMenuButton(
                        icon: const Icon(Icons.more_vert_sharp,
                            color: Colors.grey),
                        itemBuilder: (context) => [
                          const PopupMenuItem(),
                          PopupMenuItem(),
                        ],
                        onSelected: (value) {},
                      )
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

---

预习

---

您可以更改 textField 中的值 prefixIcon/suffixIcon 以满足您的需要。