时间戳

首页 > 解决方案 > 在颤振中使用mysql搜索字段

flutter - 在颤振中使用mysql搜索字段

问题描述

我需要添加一个可以在我的列表中搜索的搜索栏。我不知道该怎么做。我是新来的颤振。谢谢你。

import 'package:flutter/material.dart';
import 'package:http/http.dart'as http;
import 'dart:async';
import 'dart:convert';
import './details.dart';

  class WelcomePage extends StatefulWidget {
  @override
  _WelcomePageState createState() => _WelcomePageState();
  }

class _WelcomePageState extends State<WelcomePage> {
  Future<List> getData() async{
    final response=await http.get("http://192.168.1.112/flutter/listview.php");
    return json.decode(response.body);
  }
Icon sr=Icon(Icons.search);
     Widget build(BuildContext context) {
       

    return Scaffold(
      appBar:AppBar(     
  actions: <Widget>[
    IconButton(icon: sr, onPressed: (){})]
    ),
  

      body: FutureBuilder<List>(
        future: getData(),
        builder: (ctx,ss){
          if(ss.hasError)
          {
            print("Error");
          }
          if(ss.hasData)
          {
            return Items(list:ss.data);
          }
          else{
            return CircularProgressIndicator();
          }
        }
        ),
    );

}
}


class Items extends StatelessWidget{
  List list;
  Items({this.list});
  @override
  Widget build (BuildContext context)
  {
    return ListView.builder(
      itemCount: list==null?0:list.length,
      itemBuilder: (ctx,i){
        return new Container(
          padding : const EdgeInsets.all(10),
          child : new Card(
          child :ListTile(
          leading: Icon(Icons.widgets),
          title: Text(list[i]['nom'],style: TextStyle(fontSize:20),),
          subtitle: Text(list[i]['etat']) ,
          onTap: ()=>Navigator.of(context).push(
            MaterialPageRoute(builder: (BuildContext context) =>Details( list,i),
          ),
        )
        )
        )
        );
        
        
      },
    );
  }
  
}

标签： flutter

解决方案

这是做你想做的事的基本方法。您只需要将Items小部件转换为 aStatefulWidget然后TextField使用TextEditingController. 您将能够使用该TextField.onChanged属性调用setState并重建使用文本控制器当前值过滤的列表。

class Items extends StatefulWidget {
  final List list;

  Items({@required this.list});

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

class _ItemsState extends State<Items> {
  final _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    List filteredList = [];
    if (_controller.text != null && _controller.text.isNotEmpty) {
      widget.list.forEach((item) {
        if (item.toString().toLowerCase().contains(_controller.text.toLowerCase()))
          filteredList.add(item);
      });
    } else
      filteredList = widget.list;
    return Column(children: <Widget>[
      TextField(controller: _controller, onChanged: (text) => setState(() {})),
      Expanded(
        child: ListView.builder(
            itemCount: filteredList.length,
            itemBuilder: (context, index) {
              return ListTile(title: Text(filteredList[index].toString()));
            }),
      ),
    ]);
  }
}

推荐阅读