flutter學習--搜索框

主入口文件

繼承StatelessWidget,然後在home屬性中加入SearchBarDemo，這是一個自定義的Widget，主要代碼都在這個文件中。

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()
    );
  }
}

數據文件 asset.dart

asset.dart相當於數據文件，工作中這些數據是後臺傳遞給我們，或者寫成配置文件的，這裏我們就以List的方式代替了。我們在這個文件中定義了兩個List：

• searchList : 這個相當於數據庫中的數據，我們要在這裏進行搜索。

• recentSuggest ： 目前的推薦數據，就是搜索時，自動爲我們進行推薦。

const searchList = [
  "jiejie-大長腿",
  "jiejie-水蛇腰",
  "gege1-帥氣歐巴",
  "gege2-小鮮肉"
];

const recentSuggest = [
  "推薦-1",
  "推薦-2"
];

AppBar的樣式製作

import 'package:flutter/material.dart';
import 'asset.dart';


class SearchBarDemo extends StatefulWidget {
  _SearchBarDemoState createState() => _SearchBarDemoState();
}

class _SearchBarDemoState extends State<SearchBarDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title:Text('SearchBarDemo'),
        actions:<Widget>[
          IconButton(
            icon:Icon(Icons.search),
            onPressed: (){
               print('開始搜索');
            }
          ),
        ]
      )
    );
  }
}

重寫buildActions方法：

buildActions方法時搜索條右側的按鈕執行方法，我們在這裏方法裏放入一個clear圖標。 當點擊圖片時，清空搜索的內容。

 @override
  List<Widget> buildActions(BuildContext context){
    return [
      IconButton(
        icon:Icon(Icons.clear),
        onPressed: ()=>query = "",)
      ];
  }

buildLeading 方法重寫

搜索欄左側的圖標和功能的編寫

 @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
        icon: AnimatedIcon(
            icon: AnimatedIcons.menu_arrow, progress: transitionAnimation),
        onPressed: () => close(context, null));
  }

buildResults方法重寫

buildResults方法，是搜到到內容後的展現，

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

buildSuggestions方法重寫

這個方法主要的作用就是設置推薦，就是我們輸入一個字，然後自動爲我們推送相關的搜索結果

@override
  Widget buildSuggestions(BuildContext context) {
    final suggestionList = query.isEmpty
        ? recentSuggest
        : searchList.where((input) => input.startsWith(query)).toList();
    return ListView.builder(
        itemCount: suggestionList.length,
        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))
                  ])),
            ));
  }
}