20个Flutter实例视频教程-第11节: 一个不简单的搜索条-2

博客地址：

https://jspang.com/post/flutterDemo.html#toc-1b4

 

视频地址：https://www.bilibili.com/video/av39709290/?p=11

 

定义类searchBarDelegate

继承SearhDelegate 并复写里面的方法

需要复写里面的四个方法。我们定义类：searchBarDelegate

重写第一个方法 buildActions

重写的第一个方法：buildActions 就是搜索的时候右边的差号。里面接收 一个上下文。一般我们返回一个IconButton

query就是我们搜索的参数。我们设置为空。

点击事件，一点击的时候就把搜索内容设置为空

第二个方法buildLeading

复写第二个方法：就是最左侧我们返回的箭头

下图中的build单词拼错了后续已经改正过来

 

重写第三个方法：buildResults

再重写我们的搜索结果：buildResults

我们返回Container容器。child里面放Card组件，为了让搜索结果好看一点

为了Card卡片变得好看一些，我们给它一个亮红色

 重写第四个方法buildSuggestions

再重写最重要的一个方法：

用户一边搜索一般提示用户的内容;

这里我们采用三元运算符的方式

 

效果展示

 

 

最终代码

import 'package:flutter/material.dart';
import 'search_bar_demo.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),//轻量级的皮肤
      home: SearchBarDemo()
    );
  }
}

main.dart