twong-flutter/lib/pages/search.dart

import 'package:flutter/material.dart';
import 'package:twong/router/index.dart';
import 'package:twong/widgets/search_bar.dart';

class SearchPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _SearchPageState();
  }
}

class _SearchPageState extends State<SearchPage> {
  _doSearch(String text) {
    if (text.trim() == '') return;

    print('search context: ' + text);
    Navigator.pushNamed(context, RouteNames.productList, arguments: text);
  }

  Widget _buildItem (String text) {
    return ActionChip (
      label: new Text(text),
      onPressed: () {
        _doSearch(text);
      },
    );
  }

  Widget _buildSearchHistory () {
    var data = ['口红', 'Gtx1080笔记本电脑', 'Gtx1080','笔记本电脑', 'Gtx1080','笔记本电脑', 'Gtx1080',
      '笔记本电脑', 'Gtx1080笔记本电脑', 'Gtx1080','笔记本电脑', 'Gtx1080','笔记本电脑', 'Gtx1080'];
    List<Widget> widgets = [];
    for(var item in data) {
      widgets.add(_buildItem(item));
    }

    return Wrap(
      spacing: 8.0, // 主轴(水平)方向间距
      children: widgets,
      alignment: WrapAlignment.start, //沿主轴方向居中
    );
  }

  Widget _buildSearchHot () {
    var data = ['笔记本电脑', 'Gtx1080', '笔记本电脑', 'Gtx1080笔记本电脑', 'Gtx1080','笔记本电脑',
      'Gtx1080','笔记本电脑', 'Gtx1080', '笔记本电脑', 'Gtx1080笔记本电脑', 'Gtx1080','笔记本电脑', 'Gtx1080','笔记本电脑', 'Gtx1080'];
    List<Widget> widgets = [];
    for(var item in data) {
      widgets.add(_buildItem(item));
    }

    return Wrap(
      spacing: 8.0, // 主轴(水平)方向间距
      runSpacing: 4.0, // 纵轴（垂直）方向间距
      alignment: WrapAlignment.center, //沿主轴方向居中
      children: widgets,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: SearchBar(null, enable: true, doSearch: _doSearch, autoFocus: true),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.only(left: 14, top: 20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text('历史搜索', style: TextStyle(fontWeight: FontWeight.bold),),
              Container(
                child: _buildSearchHistory(),
              ),
              Text('热门搜索', style: TextStyle(fontWeight: FontWeight.bold),),
              Container(
                child: _buildSearchHot(),
              ),
            ],
          ),
        ),
      )
    );
  }
}