twong-flutter/lib/widgets/search_bar.dart

import 'package:flutter/material.dart';
import 'package:twong/router/index.dart';
import 'package:twong/config/style.dart';
import 'package:twong/utils/image_utils.dart';
import 'package:twong/utils/index.dart';

class SearchBar extends StatefulWidget implements PreferredSizeWidget {
  final Widget leading;
  final Size _size = DStyle.appBarHeight;
  final String search;
  final Function doSearch;
  final bool autoFocus;
  final bool enable;
  final Color color;
  final double elevation;
  final List<Widget> actions;

  SearchBar (this.leading, {Key key, this.actions, this.search, this.doSearch, this.autoFocus = false,
    this.enable = false, this.color = DColors.Main, this.elevation = 3 }): super(key: key);

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

  @override
  Size get preferredSize => _size;
}

class SearchBarState extends State<SearchBar> {
  List<Widget> actions = new List<Widget>();

  onChange (String text) {
    if (text.length < 1) {
      setState(() {
        actions = <Widget>[
          getAction("取消", (){ Navigator.pop(context); }),
        ];
      });
    } else {
      setState(() {
        actions = <Widget>[
          getAction("搜索", (){ widget.doSearch(text); }),
        ];
      });
    }
  }

  Widget getAction(String text, Function onTap) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 60.px,
        child: Center(
          child: Text(text, style: TextStyle(color: Colors.white, fontWeight: FontWeight.w300), textAlign: TextAlign.center),
        ),
      )
    );
  }

  List<Widget> getActions() {
    if (widget.actions != null) actions = widget.actions;
    if(actions.length > 0) return actions;
    if(widget.enable) {
      return <Widget>[getAction("取消", (){ Navigator.pop(context); })];
    } else {
      return null;
    }
  }

  @override
  Widget build(BuildContext context) {
    return PreferredSize(
      preferredSize: widget.preferredSize,
      child: AppBar(
        titleSpacing: 0.0,
        elevation: widget.elevation,
        backgroundColor: widget.color,
        automaticallyImplyLeading: false,
        leading: widget.leading,
        title: GestureDetector(
          onTap: () {
            if (widget.enable) return;
            Navigator.pushNamed(context, RouteNames.search);
          },
          child: Container(
            height: 30,
            margin: EdgeInsets.only(right: 10.px, left: 10.px),
            child: TextField(
              onChanged: onChange,
              style: TextStyle(color: Color.fromARGB(212, 255, 255, 255), fontSize: 14.px, fontWeight: FontWeight.w300),
              enabled: widget.enable,
              autofocus: widget.autoFocus,
              onSubmitted: widget.doSearch,
              textInputAction: TextInputAction.search,
              decoration: InputDecoration(
                hintText: "美妆 护肤 面膜",
                hintStyle: TextStyle(color: Color.fromARGB(212, 255, 255, 255), fontSize: 14.px, fontWeight: FontWeight.w300),
                prefixIcon: Icon(IconFonts.search, color: Color.fromARGB(212, 255, 255, 255), size: 15),
                contentPadding: const EdgeInsets.symmetric(vertical: 4.0),
                border: OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.circular(3)
                ),
              ),
            ),
            decoration: BoxDecoration(
              color: Color.fromARGB(90, 255, 255, 255),
              borderRadius: BorderRadius.circular(3),
            ),
          ),
        ),
        actions: getActions(),
      ),
    );
  }
}