当前位置：首页 > news >正文

Flutter项目之底部搜索功能实现

news 来源：原创 2025/6/8 20:28:41

1、实现效果图

在这里插入图片描述

2、工具栏顶部搜索

在这里插入图片描述

import 'dart:convert';

import 'package:city_pickers/city_pickers.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_haoke/config.dart';
import 'package:flutter_haoke/pages/home/tab_index/index_recommond_item.dart';
import 'package:flutter_haoke/scopoed_model/city.dart';
import 'package:flutter_haoke/utils/common_toast.dart';
import 'package:flutter_haoke/utils/model/general_type.dart';
import 'package:flutter_haoke/utils/scopoed_mode_helper.dart';
import 'package:flutter_haoke/utils/store.dart';

class SearchBar extends StatefulWidget {
  final bool? showLocation; //是否显示位置
  final void Function()? goBackCallback; //回退
  final String? inputValue; //搜索框值
  final String? defaultInputValue; //默认显示值
  final void Function()? onCancel; //取消按钮
  final bool? showMap; //是否显示地图按钮
  final void Function()? onSearch; //点击搜索框触发
  // final Function? onSearch;
  final ValueChanged<String>? onSearchSubmit; //点击按键回车触发

  const SearchBar(
      {Key? key,
      this.showLocation,
      this.goBackCallback,
      this.inputValue = '',
      this.defaultInputValue = '请输入搜索词',
      this.onCancel,
      this.showMap,
      this.onSearch,
      this.onSearchSubmit})
      : super(key: key);

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

class _SearchBarState extends State<SearchBar> {
  String _searchWord = '';
  late TextEditingController _controller;
  late FocusNode _focus;
  _onClean() {
    _controller.clear();
    setState(() {
      _searchWord = '';
    });
  }

  _onChangeLocation() async {
    //打开第三方的选择页面
    var resultCity = await CityPickers.showCitiesSelector(
        context: context, theme: ThemeData(primarySwatch: Colors.green));
    //选择之后返回选择的数据
    String? cityName = resultCity!.cityName;
    if (cityName == null) return;

    //检测选中的城市是否在 四个城市中
    //查找数组中是否有这个名字 有就返回这个城市model 没有就返回空的类
    var city = Config.availableCitys
        .firstWhere((city) => cityName.startsWith(city.name), orElse: () {
      CommontToast.showToast("该城市暂未开通！");
      return GeneralType('', "");
    });

    //保存选中的城市
    _saveCity(city);
  }

  _saveCity(GeneralType city) async {
    if (city.name == null ||city.name =="") return;
    //保存到全局
    ScopoedModelHelper.getModel<CityModel>(context).city = city;
    //保存到本地
    var store = await Store.getInstance();
    //转化成json字符串格式
    var cityString = json.encode(city.toJson());
    store.setString(StoreKeys.city, cityString);
  }

 
  @override
  void initState() {
    _focus = FocusNode();
    _controller = TextEditingController(text: widget.inputValue);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    //从全局里拿到city
    var city = ScopoedModelHelper.getModel<CityModel>(context).city;
    if (city.name == null || city.name == "") {
      city = Config.availableCitys.first;
      //存储下此时的city
      _saveCity(city);
    }
    return Container(
        child: Row(
      children: [
        if (widget.showLocation != null)
          Padding(
            padding: EdgeInsets.only(right: 10),
            child: GestureDetector(
              onTap: () {
                _onChangeLocation();
              },
              child: Row(
                children: [
                  Icon(
                    Icons.room,
                    color: Colors.green,
                    size: 15,
                  ),
                  Text(
                    city.name,
                    style: TextStyle(color: Colors.black, fontSize: 14),
                  )
                ],
              ),
            ),
          ),
        if (widget.goBackCallback != null)
          Padding(
            padding: EdgeInsets.only(right: 10),
            child: GestureDetector(
                onTap: widget.goBackCallback,
                child: Icon(
                  Icons.chevron_left,
                  color: Colors.black,
                )),
          ),
        Expanded(
            child: Container(
          height: 34,
          decoration: BoxDecoration(
              color: Colors.grey.shade100,
              borderRadius: BorderRadius.circular(17)),
          margin: EdgeInsets.only(right: 10),
          child: TextField(
            focusNode: _focus,
            controller: _controller,
            style: TextStyle(fontSize: 14),
            onChanged: (value) {
              setState(() {
                _searchWord = value;
              });
            },
            onTap: () {
              //判断没有使用搜索功能则失去焦点
              if (null == widget.onSearchSubmit) {
                _focus.unfocus();
              }
              if(widget.onSearch !=null)widget.onSearch!();
            },
            onSubmitted: widget.onSearchSubmit,
            textInputAction: TextInputAction.search,
            decoration: InputDecoration(
                hintText: widget.defaultInputValue,
                hintStyle: TextStyle(color: Colors.black, fontSize: 14),
                contentPadding: EdgeInsets.only(top: 2, left: -10),
                border: InputBorder.none,
                icon: Padding(
                  padding: EdgeInsets.only(top: 4, left: 8),
                  child: Icon(
                    Icons.search,
                    size: 18,
                    color: Colors.grey,
                  ),
                ),
                suffixIcon: GestureDetector(
                  onTap: _onClean,
                  child: Icon(
                    Icons.clear,
                    size: 18,
                    color:
                        _searchWord == '' ? Colors.grey.shade100 : Colors.grey,
                  ),
                )),
          ),
        )),
        if (widget.onCancel != null)
          Padding(
            padding: EdgeInsets.only(right: 10),
            child: GestureDetector(
              onTap: widget.onCancel,
              child: Text(
                "取消",
                style: TextStyle(color: Colors.black, fontSize: 14),
              ),
            ),
          ),
        if (widget.showMap != null)
          Image.asset("static/icons/widget_search_bar_map.png")
      ],
    ));
  }
}

3、工具栏顶部搜索跳转页

点击搜索进入这个搜索列表页

在这里插入图片描述

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_haoke/pages/home/tab_search/datalist.dart';
import 'package:flutter_haoke/pages/home/tab_search/filter_bar/data.dart';
import 'package:flutter_haoke/pages/home/tab_search/filter_bar/item.dart';
import 'package:flutter_haoke/scopoed_model/room_filter.dart';
import 'package:flutter_haoke/utils/common_picker/index.dart';
import 'package:flutter_haoke/utils/dio_http.dart';
import 'package:flutter_haoke/utils/model/general_type.dart';
import 'package:flutter_haoke/utils/scopoed_mode_helper.dart';

//上次选择的城市ID 用于切换不同数据请求
var lastCityId;

class FilterBar extends StatefulWidget {
  final ValueChanged<FilterBarResult>? onChange;

  const FilterBar({Key? key, this.onChange}) : super(key: key);

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

class _FilterBarState extends State<FilterBar> {
  List<GeneralType> areaList = [];
  List<GeneralType> priceList = [];
  List<GeneralType> rentTypeList = [];
  List<GeneralType> roomTypeList = [];
  List<GeneralType> orientedList = [];
  List<GeneralType> floorList = [];

  bool isAreaActive = false;
  bool isRentTypeActive = false;
  bool isPriceActive = false;
  bool isFilterActive = false;

  String areaId = "";
  String rentTypeId = "";
  String priceId = "";
  List<String> moreIds = [];

//选择区域方法
  _onChangeArea(context) {
    setState(() {
      isAreaActive = true;
    });
    var result = CommonPicker.showPicker(
        context: context,
        options: areaList.map((item) => item.name).toList(),
        value: 0);
    result!.then((index) {
      setState(() {
        areaId = areaList[index].id;
      });
      _onChange();
    }).whenComplete(() {
      setState(() {
        //动作结束的时候调用
        isAreaActive = false;
      });
    });
  }

//选择租金方法
  _onChangeRentType(context) {
    setState(() {
      isRentTypeActive = true;
    });
    var result = CommonPicker.showPicker(
        context: context,
        options: rentTypeList.map((item) => item.name).toList(),
        value: 0);
    result!.then((index) {
      setState(() {
        rentTypeId = rentTypeList[index].id;
      });
      _onChange();
    }).whenComplete(() {
      setState(() {
        //动作结束的时候调用
        isRentTypeActive = false;
      });
    });
  }

  //选择价格方法
  _onChangePrice(context) {
    setState(() {
      isPriceActive = true;
    });
    var result = CommonPicker.showPicker(
        context: context,
        options: priceList.map((item) => item.name).toList(),
        value: 0);
    result!.then((index) {
      setState(() {
        priceId = priceList[index].id;
      });
      _onChange();
    }).whenComplete(() {
      setState(() {
        //动作结束的时候调用
        isPriceActive = false;
      });
    });
  }

  _onChangeFliter(context) {
    Scaffold.of(context).openEndDrawer(); //打开右侧的抽屉
  }

  _onChange() {
    //获取选中的数据
    var selectIds = ScopoedModelHelper.getModel<FilterBarModel>(context)
        .selectedList
        .toList();
    if (widget.onChange != null) {
      widget.onChange!(FilterBarResult(
          areaId: areaId,
          priceId: priceId,
          rentTypeId: rentTypeId,
          moreIds: selectIds));
    }
  }

  _getData() async {
//调用网络获取数据
    var cityId = ScopoedModelHelper.getAreaId(context);
    //给本次选择的数据赋值
    lastCityId = cityId;
    var url = "/houses/condition?id=$cityId";
    var result = await DioHttp.of(context).get(url);
    print(result);
    if (!this.mounted) {
      //判断本页面是否存在 如果已销毁 则不用进行以下赋值操作
      return;
    }
    //接口不通 伪造数据赋值情况如下----------假数据-------
    List<GeneralType> areaList = [
      GeneralType('区域1', '11'),
      GeneralType('区域2', '22'),
    ];
    List<GeneralType> priceList = [
      GeneralType('价格1', 'bb'),
      GeneralType('价格2', 'aa'),
    ];
    List<GeneralType> rentTypeList = [
      GeneralType('出租类型1', 'bb'),
      GeneralType('出租类型2', '22'),
    ];
    List<GeneralType> roomTypeList = [
      GeneralType('房屋类型1', '11'),
      GeneralType('房屋类型2', '22'),
    ];
    List<GeneralType> orientedList = [
      GeneralType('方向1', '99'),
      GeneralType('方向2', 'cc'),
    ];
    List<GeneralType> floorList = [
      GeneralType('楼层1', 'aa'),
      GeneralType('楼层2', 'bb'),
    ];
    setState(() {
      this.areaList = areaList;
      this.priceList = priceList;
      this.rentTypeList = rentTypeList;
      this.roomTypeList = roomTypeList;
      this.orientedList = orientedList;
      this.floorList = floorList;
    });

    //接口不通 伪造数据赋值情况如上----------假数据-------

    Map<String, List<GeneralType>> datalist = Map<String, List<GeneralType>>();
    datalist["roomTypeList"] = roomTypeList;
    datalist["orientedList"] = orientedList;
    datalist["floorList"] = floorList;

    //传入所有要展示的数据
    ScopoedModelHelper.getModel<FilterBarModel>(context).dataList = datalist;
  }

  @override
  void initState() {
    //这个方法在这里调用只走一次
    Timer.run(_getData);
    super.initState();
  }

  @override
  void didChangeDependencies() {
    //每次加载都会走这个方法
    //判断上次的城市选择和本次是否相同
    if (lastCityId != "" &&
        lastCityId != ScopoedModelHelper.getAreaId(context)) {
      //刷新数据
      _getData();
    }
    _onChange();
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 41,
      decoration: BoxDecoration(
          border: Border(bottom: BorderSide(width: 1, color: Colors.grey))),
      child: Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
        Item(
          title: "区域",
          isActive: isAreaActive,
          onTap: _onChangeArea,
        ),
        Item(
          title: "方式",
          isActive: isRentTypeActive,
          onTap: _onChangeRentType,
        ),
        Item(
          title: "租金",
          isActive: isPriceActive,
          onTap: _onChangePrice,
        ),
        Item(
          title: "筛选",
          isActive: isFilterActive,
          onTap: _onChangeFliter,
        ),
      ]),
    );
  }
}