[移动开发]Flutter-防京东商城项目-通过接口搜索商品数据-16

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

学习目标：
1.通过接口搜索商品

第一步：搜索控制器

var _keywords;

第二步：获取搜索值

child: TextField(
  autofocus: true,
  decoration: InputDecoration(
      border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(30),
          borderSide: BorderSide.none)),



//--------------------------------------------
  onChanged: (value){
    this._keywords=value;
  },
//--------------------------------------------



),

第三步：把搜索值传递到列表页

actions: <Widget>[
  InkWell(
    child: Container(
      height: ScreenAdapter.height(68),
      width: ScreenAdapter.width(80),
      child: Row(
        children: <Widget>[Text("搜索")],
      ),
    ),
    onTap: () {



//--------------------------------------------
        //返回的时候直接返回到首页 
        Navigator.pushReplacementNamed(context, '/productList',arguments: {
            "keywords":this._keywords
        });
//--------------------------------------------




        
    },
  )

第四步：编写列表控制器顶部的搜索栏 用来搜索商品

现在把搜索控制器顶部的搜索栏 复制
复制搜索控制器的搜索栏代码

Widget build(BuildContext context) {
  return Scaffold(






//--------------------------------------------
      appBar: AppBar(
        title: Container(
          child: TextField(
            autofocus: true,
            decoration: InputDecoration(
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(30),
                    borderSide: BorderSide.none)),
            onChanged: (value){
              this._keywords=value;
            },
          ),
          height: ScreenAdapter.height(68),
          decoration: BoxDecoration(
              color: Color.fromRGBO(233, 233, 233, 0.8),
              borderRadius: BorderRadius.circular(30)),
        ),
        actions: <Widget>[
          InkWell(
            child: Container(
              height: ScreenAdapter.height(68),
              width: ScreenAdapter.width(80),
              child: Row(
                children: <Widget>[Text("搜索")],
              ),
            ),
            onTap: () {
  //--------------------------------------------          
                //删除下面的代码
                Navigator.pushReplacementNamed(context, '/productList',arguments: {
                    "keywords":this._keywords
 //--------------------------------------------                   
                });
            },
          )
        ],
      ),
//--------------------------------------------








      body: Container(

第五步：替换掉下面的代码

Widget build(BuildContext context) {
  ScreenAdaper.init(context);

  return Scaffold(
      key: _scaffoldKey,



//--------------------------------------------
      appBar: AppBar(
        title: Text("商品列表"),
        actions: <Widget>[
          Text("")
        ],
      ),
//--------------------------------------------



      endDrawer: Drawer(

5.复制完代码之后把搜索框里面的一个属性true改为false 目的是想进来控制器的时候默认不把键盘弹上来

autofocus: false,

第六步：把外面的搜索值传递进来进行显示

child: TextField(
  autofocus: false,
  decoration: InputDecoration(
      border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(30),
          borderSide: BorderSide.none)),
  onChanged: (value){


//--------------------------------------------
    setState(() {
      this._keywords=value;
    });
//--------------------------------------------




  },
),
height: ScreenAdaper.height(68)

6.1搜索值实时显示

key: _scaffoldKey,
appBar: AppBar(
  title: Container(
    child: TextField(
      controller: this._initKeywordsController,//--------------------------------------
      autofocus: false,
      decoration: InputDecoration(
          border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(30),
              borderSide: BorderSide.none)),
      onChanged: (value){

第七步：.把搜索词传递到列表控制器的搜索框显示

顺便创建搜索属性 值改变的时候用这些值存储起来，然后通过接口调用请求数据
7.1定义3个新的属性并赋值默认值

下面的代码写的地方参考下面的图片位置

//配置search搜索框的值
var _initKeywordsController=new TextEditingController();
var _cid;
var _keywords;

7.2赋值属性

@override
void initState() {
  super.initState();



//--------------------------------------------
  this._cid=widget.arguments["cid"];
  this._keywords=widget.arguments["keywords"];    
  //给search框框赋值 
  this._initKeywordsController.text=this._keywords;
//--------------------------------------------



  
  _getProductListData();
  //监听滚动条滚动事件
  _scrollController.addListener(() {

7.3替换代码 替换红色框的代码
旧的代码

新的代码

//获取商品列表的数据
_getProductListData() async {
  setState(() {
    this.flag = false;
  });






//--------------------------------------------
   var api;
  if(this._keywords==null){
    api ='${Config.domain}api/plist?cid=${this._cid}&page=${this._page}&sort=${this._sort}&pageSize=${this._pageSize}';
  }else{     
    api ='${Config.domain}api/plist?search=${this._keywords}&page=${this._page}&sort=${this._sort}&pageSize=${this._pageSize}';
  }
//--------------------------------------------







  // print(api);
  var result = await Dio().get(api);

第八步：编写点击搜索按键 点击调用搜索接口

actions: <Widget>[
  InkWell(
    child: Container(
      height: ScreenAdapter.height(68),
      width: ScreenAdapter.width(80),
      child: Row(
        children: <Widget>[Text("搜索")],
      ),
    ),
    onTap: () {
       this._subHeaderChange(1);//--------------------------------------------
    },
  )

第九步：解决搜索不到数据重复转圈的问题
9.1创建属性

//是否有搜索的数据
 bool _hasData = true;
1.2计算值
var result = await Dio().get(api);
var productList = new ProductModel.fromJson(result.data);

//判断是否有搜索数据
if(productList.result.length==0 && this._page==1){
  setState(() {
    this._hasData=false; 
  });
}else{
    this._hasData=true; 
}
//判断最后一页有没有数据
if (productList.result.length < this._pageSize) {

1.3应用

      endDrawer: Drawer(
        child: Container(
          child: Text("实现筛选功能"),
        ),
      ),
      body: _hasData?Stack(
        children: <Widget>[
          _productListWidget(),
          _subHeaderWidget(),
        ],
      ):Center(
        child: Text("没有您要浏览的数据")
      )        
    );
}