聚成网络网站建设seo是什么简称
目录:
- 1、实现效果图
- 2、工具栏顶部搜索
- 3、工具栏顶部搜索跳转页
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); _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);}void initState() {_focus = FocusNode();_controller = TextEditingController(text: widget.inputValue);super.initState();} Widget build(BuildContext context) {//从全局里拿到cityvar 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); _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;}void initState() {//这个方法在这里调用只走一次Timer.run(_getData);super.initState();}void didChangeDependencies() {//每次加载都会走这个方法//判断上次的城市选择和本次是否相同if (lastCityId != "" &&lastCityId != ScopoedModelHelper.getAreaId(context)) {//刷新数据_getData();}_onChange();super.didChangeDependencies();} 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,),]),);}
}
待完善。。。。。。
https://www.bilibili.com/video/BV1fAPveaExf?spm_id_from=333.788.videopod.episodes&vd_source=1e6f6d5c0620893f1c319968434126de&p=36