flutter 搜索組件，帶流式佈局搜索記錄

 

流式佈局wrap,flutter中文網

 

代碼：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:monitor/common/style/style_custom.dart';


class DeviceSearchPage extends StatefulWidget {
  List<String> contents = [
    "mc20",
    "sony A6300系列",
    "sony a7",
    "sony 黑卡",
    "iphone xr",
    "'耐克'店鋪",
    "mc20",
    "123",
    "321",
  ];

  List<String> hisArray = [
    "mc20",
    "sony A6300系列",
    "iphone xr",
    "'耐克'店鋪",
    "mc20",
  ];

  @override
  State<StatefulWidget> createState() {
    return _DeviceSearchPageState();
  }
}

class _DeviceSearchPageState extends State<DeviceSearchPage> {
  String searchValue = "";
  TextEditingController _controller = new TextEditingController();

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    double statusHeight = MediaQuery.of(context).padding.top;

    _controller.text = searchValue;
    return Scaffold(
      body: Container(
        color: Colors.white,
        padding: EdgeInsets.fromLTRB(16, statusHeight + 12, 16, 16),
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 36,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color: CustomColors.grey_swallow,
                        borderRadius: BorderRadius.circular(36)),
                    child: Row(
                      children: <Widget>[
                        SizedBox(width: 6),
                        Icon(Icons.search),
                        SizedBox(width: 6),
                        Expanded(
                          flex: 1,
                          child: TextField(
                            decoration: new InputDecoration(
                                hintText: '設備搜索', border: InputBorder.none),
                            style: CustomText.TextSmall,
                            onChanged: (value) {
                              setState(() {
                                searchValue = value;
                              });
                              _controller.text = searchValue;
                            },
                            controller: _controller,
                          ),
                        ),
                        searchValue != ""
                            ? InkWell(
                                onTap: () {
                                  setState(() {
                                    searchValue = "";
                                  });
                                },
                                child: Icon(Icons.close, size: 14),
                              )
                            : Container(),
                        SizedBox(width: 6)
                      ],
                    ),
                  ),
                ),
                SizedBox(width: 8),
                InkWell(
                  onTap: () {
                    Navigator.pop(context);
                  },
                  child: Text("取消"),
                )
              ],
            ),
            SizedBox(
              height: 32,
            ),
            searchValue == ""
                ? getHistoryWidget()
                : getSearchResultWidget()
          ],
        ),
      ),
    );
  }

  ///搜索結果
  Widget getSearchResultWidget() {
    List<String> results = [];
    List.generate(widget.contents.length, (index) {
      if (widget.contents[index].contains(searchValue)) {
        results.add(widget.contents[index]);
      }
    });
    return SingleChildScrollView(
      child: Column(
        children: List.generate(results.length, (index) {
          return InkWell(
              onTap: () {
                _controller.text = results[index];
              },
              child: Container(
                alignment: Alignment.centerLeft,
                padding: EdgeInsets.all(8),
                decoration: BoxDecoration(
                    border: Border(
                        bottom: BorderSide(color: CustomColors.grey_swallow))),
                child: Text(results[index]),
              ));
        }),
      ),
    );
  }

  ///搜索歷史
  Widget getHistoryWidget() {
    return Column(
      children: <Widget>[
        Container(
            alignment: Alignment.centerLeft,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  "搜索歷史",
                  style: CustomText.TextBigBold,
                ),
                InkWell(
                  onTap: showClearDialog,
                  child: Icon(Icons.delete_forever,
                      color: Colors.redAccent, size: 20),
                )
              ],
            )),
        SizedBox(
          height: 26,
        ),
        SingleChildScrollView(
          child: Wrap(
            spacing: 6,
            runSpacing: 6,
            children: List.generate(widget.hisArray.length, (index) {
              return InkWell(
                onTap: () {
                  setState(() {
                    searchValue = widget.hisArray[index];
                  });
                },
                child: Chip(
                  backgroundColor: CustomColors.grey_swallow,
                  label:
                      Text(widget.hisArray[index], style: CustomText.TextSmall),
                ),
              );
            }),
          ),
        )
      ],
    );
  }

  showClearDialog() {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return CupertinoAlertDialog(
            title: Text(""),
            content: Text("確認清除所有搜索記錄嗎？"),
            actions: <Widget>[
              CupertinoDialogAction(
                child: Text("取消"),
                onPressed: () {
                  Navigator.pop(context);
                  print("取消");
                },
              ),
              CupertinoDialogAction(
                child: Text("確定"),
                onPressed: () {
                  setState(() {
                    widget.hisArray = [];
                  });
                  Navigator.pop(context);
                },
              ),
            ],
          );
        });
  }
}