gpt4 book ai didi

android - 带有搜索过滤器的Flutter应用 GridView ?

转载 作者:行者123 更新时间:2023-12-01 18:35:06 29 4
gpt4 key购买 nike

在这个颤动的代码中,我在AppBar中实现了带有搜索过滤器的Gridview。
目前仅显示建筑物名称,但我也想显示建筑物地名吗?
有什么办法可以同时过滤建筑物名称和地名?

  • 我也要在gridview中显示建筑物的地名-值
  • 当单击网格项目时,如何获取项目ID?
    import 'package:flutter/material.dart';
    import 'package:realpro/SizeConfig.dart';
    import 'package:realpro/root/dashscreen.dart';

    class SearchList extends StatefulWidget {
    SearchList({ Key key }) : super(key: key);
    @override
    _SearchListState createState() => new _SearchListState();
    }
    class _SearchListState extends State<SearchList>
    {
    Widget appBarTitle = new Text("My Properties", style: new TextStyle(color:
    Colors.white),);
    Icon actionIcon = new Icon(Icons.search, color: Colors.orange,);
    final key = new GlobalKey<ScaffoldState>();
    final TextEditingController _searchQuery = new TextEditingController();
    List<String> _list;
    bool _IsSearching;
    String _searchText = "";
    _SearchListState() {
    _searchQuery.addListener(() {
    if (_searchQuery.text.isEmpty) {
    setState(() {
    _IsSearching = false;
    _searchText = "";
    });
    }
    else {
    setState(() {
    _IsSearching = true;
    _searchText = _searchQuery.text;
    });
    }
    });
    }
    @override
    void initState() {
    super.initState();
    _IsSearching = false;
    init();
    }
    void init() {
    _list = List();
    _list.add("building 1",);
    _list.add("building 2");
    _list.add("building 3");
    _list.add("building 4");
    _list.add("building 5");
    _list.add("building 6");
    _list.add("building 7");
    _list.add("building 8");
    _list.add("building 9");
    _list.add("building 10");
    }
    @override
    Widget build(BuildContext context) {
    SizeConfig().init(context);
    return new Scaffold(
    key: key,
    appBar: buildBar(context),
    body: new GridView.count(
    crossAxisCount: 3,
    padding: EdgeInsets.fromLTRB(10,10,10,10),
    childAspectRatio: 8.0 / 9.0,
    children: _IsSearching ? _buildSearchList() : _buildList(),
    ),
    drawer: Navigationdrawer(),
    );
    }
    List<Uiitem> _buildList() {
    return _list.map((contact) => new Uiitem(contact)).toList();
    }
    List<Uiitem> _buildSearchList() {
    if (_searchText.isEmpty) {
    return _list.map((contact) => new Uiitem(contact))
    .toList();
    }
    else {
    List<String> _searchList = List();
    for (int i = 0; i < _list.length; i++) {
    String name = _list.elementAt(i);
    if (name.toLowerCase().contains(_searchText.toLowerCase())) {
    _searchList.add(name);
    }
    }
    return _searchList.map((contact) => new Uiitem(contact))
    .toList();
    }
    }
    Widget buildBar(BuildContext context) {
    return new AppBar(
    centerTitle: true,
    title: appBarTitle,
    iconTheme: new IconThemeData(color:Colors.orange),
    backgroundColor: Colors.black,
    actions: <Widget>[
    new IconButton(icon: actionIcon, onPressed: () {
    setState(() {
    if (this.actionIcon.icon == Icons.search) {
    this.actionIcon = new Icon(Icons.close, color: Colors.orange,);
    this.appBarTitle = new TextField(
    controller: _searchQuery,
    style: new TextStyle(
    color: Colors.orange,
    ),
    decoration: new InputDecoration(
    hintText: "Search here..",
    hintStyle: new TextStyle(color: Colors.white)
    ),
    );
    _handleSearchStart();
    }
    else {
    _handleSearchEnd();
    }
    });
    },),
    ]
    );
    }
    void _handleSearchStart() {
    setState(() {
    _IsSearching = true;
    });
    }
    void _handleSearchEnd() {
    setState(() {
    this.actionIcon = new Icon(Icons.search, color: Colors.orange,);
    this.appBarTitle =
    new Text("My Properties", style: new TextStyle(color: Colors.white),);
    _IsSearching = false;
    _searchQuery.clear();
    });
    }
    }
    class Uiitem extends StatelessWidget{
    final String name;
    Uiitem(this.name);
    Widget build(BuildContext context){
    return new Card(
    margin: EdgeInsets.fromLTRB(5,5,5,7),
    elevation: 10.0,
    child: InkWell(
    splashColor: Colors.orange,
    onTap: (){
    },
    child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
    AspectRatio(
    aspectRatio: 18.0 / 11.0,
    child: Image.asset('assets/images/build.jpeg',fit: BoxFit.scaleDown,),
    ),
    Padding(
    padding: EdgeInsets.fromLTRB(10.0, 15.0, 0.0,0.0),
    child: Column(crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
    Text(this.name,style: new TextStyle(fontFamily: 'Raleway',fontWeight:
    FontWeight.bold,fontSize: 14.0),
    maxLines: 1,
    ),
    SizedBox(height: 0.0),
    Text('Place',style: new TextStyle(fontFamily: 'Roboto'),),
    ],
    ),
    ),
    ],
    ),
    ),
    );
    }
    }

    enter image description here
  • 最佳答案

    您可以在下面复制粘贴运行完整代码
    步骤1:您可以定义一个具有Building属性的id, name, place
    步骤2:返回搜索列表而不返回List<Uiitem>步骤3:使用GridView.builder并返回Uiitem(_searchList[index]);第4步:Uiitem接受Building,以便您的InkWell可以获取id
    工作演示

    enter image description here

    完整的代码

    import 'package:flutter/material.dart';

    class Building {
    String id;
    String name;
    String place;

    Building({this.id, this.name, this.place});
    }

    class SearchList extends StatefulWidget {
    SearchList({Key key}) : super(key: key);
    @override
    _SearchListState createState() => _SearchListState();
    }

    class _SearchListState extends State<SearchList> {
    Widget appBarTitle = Text(
    "My Properties",
    style: TextStyle(color: Colors.white),
    );
    Icon actionIcon = Icon(
    Icons.search,
    color: Colors.orange,
    );
    final key = GlobalKey<ScaffoldState>();
    final TextEditingController _searchQuery = TextEditingController();
    List<Building> _list;
    List<Building> _searchList = List();

    bool _IsSearching;
    String _searchText = "";
    _SearchListState() {
    _searchQuery.addListener(() {
    if (_searchQuery.text.isEmpty) {
    setState(() {
    _IsSearching = false;
    _searchText = "";
    _buildSearchList();
    });
    } else {
    setState(() {
    _IsSearching = true;
    _searchText = _searchQuery.text;
    _buildSearchList();
    });
    }
    });
    }
    @override
    void initState() {
    super.initState();
    _IsSearching = false;
    init();
    }

    void init() {
    _list = List();
    _list.add(
    Building(id:"1", name: "A 1", place: "google"),
    );
    _list.add(
    Building(id:"2", name: "A 2", place: "google"),
    );
    _list.add(
    Building(id:"3",name: "B 3", place: "facebook"),
    );
    _list.add(
    Building(id:"4",name: "B 4", place: "facebook"),
    );
    _list.add(
    Building(id:"5",name: "C 5", place: "flutter"),
    );
    _searchList = _list;
    }

    @override
    Widget build(BuildContext context) {
    //SizeConfig().init(context);
    return Scaffold(
    key: key,
    appBar: buildBar(context),
    body: GridView.builder(
    itemCount: _searchList.length,
    itemBuilder: (context, index) {
    return Uiitem(_searchList[index]);
    },
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    )

    /* GridView.count(
    crossAxisCount: 3,
    padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
    childAspectRatio: 8.0 / 9.0,
    children: _IsSearching ? _buildSearchList() : _buildList(),
    ),*/
    //drawer: Navigationdrawer(),
    ));
    }

    List<Building> _buildList() {
    return _list; //_list.map((contact) => Uiitem(contact)).toList();
    }

    List<Building> _buildSearchList() {
    if (_searchText.isEmpty) {
    return _searchList =
    _list; //_list.map((contact) => Uiitem(contact)).toList();
    } else {
    /*for (int i = 0; i < _list.length; i++) {
    String name = _list.elementAt(i);
    if (name.toLowerCase().contains(_searchText.toLowerCase())) {
    _searchList.add(name);
    }
    }*/

    _searchList = _list
    .where((element) =>
    element.name.toLowerCase().contains(_searchText.toLowerCase()) ||
    element.place.toLowerCase().contains(_searchText.toLowerCase()))
    .toList();
    print('${_searchList.length}');
    return _searchList; //_searchList.map((contact) => Uiitem(contact)).toList();
    }
    }

    Widget buildBar(BuildContext context) {
    return AppBar(
    centerTitle: true,
    title: appBarTitle,
    iconTheme: IconThemeData(color: Colors.orange),
    backgroundColor: Colors.black,
    actions: <Widget>[
    IconButton(
    icon: actionIcon,
    onPressed: () {
    setState(() {
    if (this.actionIcon.icon == Icons.search) {
    this.actionIcon = Icon(
    Icons.close,
    color: Colors.orange,
    );
    this.appBarTitle = TextField(
    controller: _searchQuery,
    style: TextStyle(
    color: Colors.orange,
    ),
    decoration: InputDecoration(
    hintText: "Search here..",
    hintStyle: TextStyle(color: Colors.white)),
    );
    _handleSearchStart();
    } else {
    _handleSearchEnd();
    }
    });
    },
    ),
    ]);
    }

    void _handleSearchStart() {
    setState(() {
    _IsSearching = true;
    });
    }

    void _handleSearchEnd() {
    setState(() {
    this.actionIcon = Icon(
    Icons.search,
    color: Colors.orange,
    );
    this.appBarTitle = Text(
    "My Properties",
    style: TextStyle(color: Colors.white),
    );
    _IsSearching = false;
    _searchQuery.clear();
    });
    }
    }

    class Uiitem extends StatelessWidget {
    final Building building;
    Uiitem(this.building);

    Widget build(BuildContext context) {
    return Card(
    margin: EdgeInsets.fromLTRB(5, 5, 5, 7),
    elevation: 10.0,
    child: InkWell(
    splashColor: Colors.orange,
    onTap: () {
    print(building.id);
    },
    child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
    AspectRatio(
    aspectRatio: 18.0 / 11.0,
    child: Image.asset(
    'assets/images/build.jpeg',
    fit: BoxFit.scaleDown,
    ),
    ),
    Padding(
    padding: EdgeInsets.fromLTRB(10.0, 15.0, 0.0, 0.0),
    child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
    Text(
    this.building.name,
    style: TextStyle(
    fontFamily: 'Raleway',
    fontWeight: FontWeight.bold,
    fontSize: 14.0),
    maxLines: 1,
    ),
    SizedBox(height: 0.0),
    Text(
    building.place,
    style: TextStyle(fontFamily: 'Roboto'),
    ),
    ],
    ),
    ),
    ],
    ),
    ),
    );
    }
    }

    void main() {
    runApp(MyApp());
    }

    class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
    primarySwatch: Colors.blue,
    ),
    home: SearchList(),
    );
    }
    }

    关于android - 带有搜索过滤器的Flutter应用 GridView ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60797422/

    29 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com