lift-app/lib/widgets/app_search_bar.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:liftmanager/res/colors.dart';
import 'package:liftmanager/res/dimens.dart';
import 'package:liftmanager/res/gaps.dart';
import 'package:liftmanager/utils/theme_utils.dart';
import 'package:liftmanager/widgets/load_image.dart';
import 'package:liftmanager/internal/search/search_router.dart';
import 'package:liftmanager/routers/fluro_navigator.dart';
import 'package:liftmanager/widgets/search_app_bar.dart' as search;

/// 自定义AppBar
class SearchAppBar extends StatelessWidget implements PreferredSizeWidget {
  const SearchAppBar(
      {Key key,
      this.backgroundColor,
      this.title: "",
      this.centerTitle: "",
      this.actions,
      this.searchWidth,
      this.onPressed,
      this.isBack: true})
      : super(key: key);

  final Color backgroundColor;
  final String title;
  final double searchWidth;
  final String centerTitle;
  final List<Widget> actions;
  final VoidCallback onPressed;
  final bool isBack;

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light,
      child: Container(
        decoration: BoxDecoration(
          gradient: const LinearGradient(
              colors: [Color(0xFF00D9FF), Color(0xFF0287FF)]),
        ),
        child: SafeArea(
          child: Stack(
            alignment: Alignment.centerLeft,
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    alignment: centerTitle.isEmpty
                        ? Alignment.centerLeft
                        : Alignment.center,
                    width: double.infinity,
                    child: Text(title.isEmpty ? centerTitle : title,
                        style: TextStyle(
                          fontSize: Dimens.font_sp18,
                          color: Colours.dark_text,
                        )),
                    padding: const EdgeInsets.symmetric(horizontal: 48.0),
                  )
                ],
              ),
              isBack
                  ? IconButton(
                      onPressed: () {
                        FocusScope.of(context).unfocus();
                        Navigator.maybePop(context);
                      },
                      tooltip: 'Back',
                      padding: const EdgeInsets.all(12.0),
                      icon: Icon(
                        Icons.arrow_back_ios,
                        color: Colours.dark_text,
                      ),
                    )
                  : Gaps.empty,
              GestureDetector(
                  onTap: () {
                    // NavigatorUtils.push(context, SearchRouter.searchPage);
                    // 搜索跳转改为到回调里面触发
                    onPressed();
                  },
                  child: Container(
                    height: 35,
                    width: searchWidth == null ? 400 : searchWidth,
                    margin: const EdgeInsets.only(left: 45.0, right: 15),
                    decoration: BoxDecoration(
                        color: Color(0x33FFFFFF),
                        borderRadius: BorderRadius.circular(17.5)),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        SizedBox(
                          width: 16,
                        ),
                        Icon(
                          Icons.search,
                          color: Colors.white,
                        ),
                        Text(
                          "搜索你需要的关键词",
                          style: TextStyle(color: Colors.white),
                        )
                      ],
                    ),
                  )),
              Positioned(
                right: 0.0,
                child: Theme(
                    data: Theme.of(context).copyWith(
                        buttonTheme: ButtonThemeData(
                      padding: const EdgeInsets.symmetric(horizontal: 16.0),
                      minWidth: 60.0,
                    )),
                    child: rightActions()),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget rightActions() {
    if (this.actions != null && this.actions.isNotEmpty) {
      return Row(
        children: this.actions,
      );
    } else {
      return Container();
    }
  }

  @override
  Size get preferredSize => Size.fromHeight(48.0);
}

// class SearchAppBar2 extends StatefulWidget {
//   const SearchAppBar2({
//     Key key,
//     this.backgroundColor,
//     this.title: "",
//     this.centerTitle: "",
//     this.actions,
//     this.searchWidth,
//     this.onPressed,
//     this.isBack: true,
//     this.hintText: "",
//     this.backImg: "assets/images/icon_back.png",
//   }) : super(key: key);

//   final Color backgroundColor;
//   final String title;
//   final double searchWidth;
//   final String centerTitle;
//   final List<Widget> actions;
//   final VoidCallback onPressed;
//   final bool isBack;
//   final String backImg;
//   final String hintText;

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

// class SearchAppBar2State extends State with AutomaticKeepAliveClientMixin {

class SearchAppBar2 extends StatefulWidget implements PreferredSizeWidget {
  SearchAppBar2({
    Key key,
    this.backgroundColor,
    this.title: "",
    this.isBtn:false,
    this.centerTitle: "",
    this.actions,
    this.searchWidth,
    this.onPressed,
    this.isBack: true,
    this.hintText: "请输入需要搜索的内容",
    this.backImg: "assets/images/icon_back.png",
  }) : super(key: key);

  final Color backgroundColor;
  final String title;
  final double searchWidth;
  final String centerTitle;
  final List<Widget> actions;
  final Function(String) onPressed;
  final bool isBack;
  final String backImg;
  final String hintText;
  final bool isBtn;

  @override
  _SearchAppBar2State createState() => _SearchAppBar2State();

  @override
  Size get preferredSize => Size.fromHeight(48.0);
}

class _SearchAppBar2State extends State<SearchAppBar2> {
  int searchBarType = 1;

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

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light,
      child: Container(
        child: searchBarType == 1
            ? SearchAppBar(
              actions:widget.actions,
              searchWidth:widget.searchWidth,
                onPressed: () {
                  setState(() {
                    searchBarType = 2;
                  });
                },
              )
            : search.SearchAppBar(
                hintText: widget.hintText,
                onPressed: (text) {
                  widget.onPressed(text);
                },
              ),
      ),
    );
  }
}