20個Flutter實例視頻教程-第10節: 一個不簡單的搜索條-1

20個Flutter實例視頻教程-第10節: 一個不簡單的搜索條-1

視頻地址：

https://www.bilibili.com/video/av39709290/?p=10

博客地址：

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

 

建立demo06：

search_bar_demo.dart

咱們搜索的東西通常和後臺是有交互的，咱們須要一個文件來模擬後臺請求數據：asset.dart

 

 

 

這是一個動態的widget：

 

搜索框放在咱們導航條的右邊的，就是咱們的action屬性，actions接收一個數組。在這裏咱們只放一個放大鏡的圖標。在點擊的時候讓它進入搜索條

 

 

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

 

 

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

class SearchBarDemo extends StatefulWidget {
  @override
  _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('點擊了一下搜索');
            },
          )
        ],
      ),
    );
  }
}

search_bar_demo.dart

 

 

const searchList=[
  "jiejie-大長腿",
  "jiejie-水蛇腰",
  "gege-帥氣歐巴",
  "gege-小鮮肉",
];
//默認的數組
const recentSuggest=[
  "推薦-1",
  "推薦-2"
];

asset.dart