Flutter 实现SearchBar

最新推荐文章于 2024-08-27 08:00:15 发布

陈大头铃儿响叮当

最新推荐文章于 2024-08-27 08:00:15 发布

阅读量1.8k

点赞数 1

分类专栏： Flutter

本文链接：https://blog.csdn.net/qq_35469691/article/details/110229836

版权

Flutter 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

依次完成点击TitleBar右边搜索按钮，显示SearchBar，输入要搜索的内容，模拟显示后台返回的数据，并将查询内容加粗加黑，点击键盘确认搜索按钮，显示红色Card，模拟显示数据。

新建asset.dart文件，该文件中新建模拟后台返回的数据

const searchList = [
  "jiejie-A",
  "jiejie-B",
  "jiejie-C",
  "gege--D",
  "gege--E",
  "gege--F",
  "gege--G",
];
const recentSuggest = [
  "推荐-1",
  "推荐-2",
  "推荐-3",
  "推荐-4",
  "推荐-5",
];

main.dart中，引入SearchBarDemo

import 'package:flutter/material.dart';
import 'package:search_bar/widget/search_bar_demo.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      home: SearchBarDemo(),
    );
  }
}

新建search_bar_demo.dart，该类中主要实现搜索功能

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:search_bar/widget/assert.dart';

class SearchBarDemo extends StatefulWidget {
  @override
  SearchBarDemoState createState() => new SearchBarDemoState();
}

class SearchBarDemoState extends State<SearchBarDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SearchBarDemo'),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              showSearch(context: context, delegate: SearchBarDelegate());
            },
          )
        ],
      ),
    );
  }
}

class SearchBarDelegate extends SearchDelegate<String> {
  @override
  List<Widget> buildActions(BuildContext context) {
    //右边图标
    return [
      IconButton(
          icon: Icon(Icons.clear),
          onPressed: () {
            query = "";
          })
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    //左边图标
    return IconButton(
        icon: AnimatedIcon(
          icon: AnimatedIcons.menu_arrow,
          progress: transitionAnimation,
        ),
        onPressed: () {
          close(context, null);
        });
  }

  @override
  Widget buildResults(BuildContext context) {
    return Container(
      width: 100.0,
      height: 100.0,
      child: Card(
        color: Colors.redAccent,
        child: Center(
          child: Text(query),
        ),
      ),
    );
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    final suggestionList = query.isEmpty
        ? recentSuggest
        : searchList.where((element) => element.startsWith(query)).toList();
    return ListView.builder(
      itemBuilder: (context, index) => ListTile(
        title: RichText(
          text: TextSpan(
              text: suggestionList[index].substring(0, query.length),
              style:
                  TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
              children: [
                TextSpan(
                    text: suggestionList[index].substring(query.length),
                    style: TextStyle(color: Colors.grey)),
              ]),
        ),
      ),
      itemCount: suggestionList.length,
    );
  }
}