flutter 动态搜索框

Widget Search() {
  const List<String> kOptions = ["清华"];

  searchOptions(TextEditingValue textEditingValue) {
    if (textEditingValue.text == '') {
      return const Iterable<String>.empty();
    }
    return kOptions.where((String option) {
      return option.contains(textEditingValue.text.toLowerCase());
    });
  }

  return Column(
    children: [
      Autocomplete<String>(
        optionsBuilder: searchOptions,
        optionsViewBuilder: (context, onSelected, options) {
          // 下拉框内容
          return Container(
            width: 200,
            height: 100,
            padding: const EdgeInsets.only(
              right: 30,
              top: 10,
            ),
            child: Material(
              clipBehavior: Clip.hardEdge,
              borderOnForeground: false,
              borderRadius: BorderRadius.circular(10),
              color: Colors.deepPurple[300],
              child: Padding(
                padding: const EdgeInsets.only(
                  left: 20,
                  right: 20,
                ),
                child: ListView.builder(
                  padding: const EdgeInsets.only(top: 10, right: 20),
                  itemBuilder: (_, index) {
                    final String option = options.elementAt(index);
                    return InkWell(
                      onTap: () => onSelected(option),
                      child: SizedBox(
                        height: 30,
                        child: Text(
                          option,
                          style: TextStyle(
                            color: MyColors.mainColor,
                            fontSize: 18,
                          ),
                        ),
                      ),
                    );
                  },
                  itemCount: options.length,
                ),
              ),
            ),
          );
        },
        fieldViewBuilder: (
          BuildContext context,
          TextEditingController textEditingController,
          FocusNode focusNode,
          VoidCallback onFieldSubmitted,
        ) {
          // 搜索框
          return Container(
            decoration: BoxDecoration(
              color: Colors.deepPurple[300],
              borderRadius: BorderRadius.circular(20),
            ),
            child: TextFormField(
              textAlignVertical: TextAlignVertical.center,
              textAlign: TextAlign.start,
              cursorColor: MyColors.mainColor,
              style: TextStyle(color: MyColors.mainColor),
              controller: textEditingController,
              decoration: InputDecoration(
                border: InputBorder.none,
                suffixIcon: IconButton(
                  onPressed: () => {textEditingController.text = ""},
                  icon: const Icon(Icons.close),
                  color: MyColors.mainColor,
                ),
                prefixIcon: Icon(
                  Icons.search,
                  color: MyColors.mainColor,
                ),
                focusColor: MyColors.mainColor,
                hoverColor: MyColors.mainColor,
                fillColor: MyColors.mainColor,
                label: Text(
                  "搜大学/搜专业",
                  style: TextStyle(
                    color: MyColors.mainColor,
                  ),
                ),
                // hintText: "搜大学/搜专业",
                hintStyle: TextStyle(
                  color: MyColors.mainColor,
                ),
              ),
              focusNode: focusNode,
              onFieldSubmitted: (String value) {
                onFieldSubmitted();
                print('You just typed a new entry  $value');
              },
            ),
          );
        },
        onSelected: (String selection) {
          print('You just selected $selection');
        },
      ),
    ],
  );
}

  

posted @ 2022-08-24 10:36  花泪哲  阅读(144)  评论(0编辑  收藏  举报