好租客-07-首页搜索栏实现

ui效果

注意点

textfield中内容与 prefixIcon, suffixIcon 的内容无法对齐。 所以使用 prefixIcon, suffixIcon 采用自定义实现。

实现代码

import 'package:flutter/material.dart';

class SearchBar extends StatefulWidget {
  final bool showLocation;
  final Function goBackCallback;
  final String inputValue;
  final String defaultInputValue;
  final Function onCancel;
  final bool showMap;
  final Function onSearch;
  final ValueChanged<String> onSearchSubmit;

  SearchBar(
      {this.showLocation,
      this.goBackCallback,
      this.inputValue,
      this.defaultInputValue,
      this.onCancel,
      this.showMap,
      this.onSearch,
      this.onSearchSubmit});

  @override
  _SearchBarState createState() => _SearchBarState();
}

class _SearchBarState extends State<SearchBar> {
  bool showClear = false;
  FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _focusNode.addListener(() {
      if (!_focusNode.hasFocus) {
        print('失去焦点');
      } else {
        if (mounted) {
          setState(() {
            showClear = true;
          });
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 50,
      child: Container(
        // color: Colors.purple,
        //
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Icon(Icons.room, color: Colors.green, size: 22.0),
            Padding(padding: EdgeInsets.only(left: 2)),
            Text(
              "北京",
              style: TextStyle(color: Colors.black, fontSize: 18),
            ),
            IconButton(
                icon: Icon(
                  Icons.chevron_left,
                  size: 30,
                ),
                color: Colors.black87,
                onPressed: () {}),
            Expanded(
                child: Container(
                    height: 40,
                    padding: EdgeInsets.only(left: 15),
                    decoration: BoxDecoration(
                        color: Colors.grey[200],
                        borderRadius: BorderRadius.circular(20)),
                    child: Row(
                      children: [
                        Icon(Icons.search, color: Colors.grey),
                        Padding(padding: EdgeInsets.only(left: 5)),
                        Expanded(
                          child: Container(
                            child: TextField(
                              focusNode: _focusNode,
                              style:
                                  TextStyle(color: Colors.black, fontSize: 18),
                              decoration: InputDecoration(
                                focusedBorder: OutlineInputBorder(
                                    borderSide: BorderSide(
                                        width: 0, color: Colors.transparent)),
                                disabledBorder: OutlineInputBorder(
                                    borderSide: BorderSide(
                                        width: 0, color: Colors.transparent)),
                                enabledBorder: OutlineInputBorder(
                                    borderSide: BorderSide(
                                        width: 0, color: Colors.transparent)),
                                border: OutlineInputBorder(
                                    borderSide: BorderSide(
                                        width: 0, color: Colors.transparent)),
                                contentPadding:
                                    EdgeInsets.symmetric(vertical: 0),
                                hintText: '请输入搜索词',
                                hintStyle:
                                    TextStyle(color: Colors.grey, fontSize: 18),
                              ),
                            ),
                          ),
                        ),
                        if (showClear) Icon(Icons.clear, color: Colors.grey),
                        Padding(padding: EdgeInsets.only(left: 5)),
                        Padding(padding: EdgeInsets.only(left: 10)),
                      ],
                    ))),
            Padding(padding: EdgeInsets.only(left: 10)),
            GestureDetector(
              onTap: widget.onCancel,
              child: Text(
                '取消',
                style: TextStyle(fontSize: 16.0, color: Colors.black),
              ),
            ),
            Padding(padding: EdgeInsets.only(left: 10)),
            Icon(
              Icons.person_pin,
              color: Colors.black,
              size: 24,
            )
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _focusNode.unfocus();
  }
}