zhiying_base_widget/lib/widgets/custom/search/custom_search_widget.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:zhiying_base_widget/widgets/custom/search/model/custom_search_model.dart';
import 'package:zhiying_comm/zhiying_comm.dart';

///
/// 通用模块的搜索栏
///
class CustomSearchWidget extends StatelessWidget {
  final Map<String, dynamic> data;
  CustomSearchModel model;

  CustomSearchWidget(this.data, {Key key}) : super(key: key) {
    try {
      model = CustomSearchModel.fromJson(jsonDecode(data['data']));
    } catch (e, s) {
      Logger.warn(e, s);
    }
  }

  // 点击事件
  void _onClickListener(BuildContext context, SkipModel skipModel) {
    if (!EmptyUtil.isEmpty(skipModel)) {
      RouterUtil.route(skipModel, model.toJson(), context);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        width: double.infinity,
        padding: EdgeInsets.symmetric(horizontal: ParseUtil.stringParseDouble(model?.leftRightMargin, defVal: 12.5), vertical: 4),
        margin: EdgeInsets.only(top: ParseUtil.stringParseDouble(model?.topMargin)),
        decoration: BoxDecoration(
            color: HexColor.fromHex(model?.bgColor),
            // color: Colors.blueAccent,
            borderRadius: BorderRadius.only(
              bottomRight: Radius.circular(ParseUtil.stringParseDouble(model?.bottomRightRadius)),
              bottomLeft: Radius.circular(ParseUtil.stringParseDouble(model?.bottomLeftRadius)),
              topLeft: Radius.circular(ParseUtil.stringParseDouble(model?.topLeftRadius)),
              topRight: Radius.circular(ParseUtil.stringParseDouble(model?.topRightRadius)),
            )),
        child: _buildMainWidget(context));
  }

  Widget _buildMainWidget(BuildContext context) {
    if (EmptyUtil.isEmpty(model)) return Container();
    Widget rlt;
    switch (model.moduleType) {
      case 'search_1': // 右1图标
        rlt = _buildStyle1Widget(context);
        break;
      case 'search_2': // 无图标
        rlt = _buildStyle2Widget(context);
        break;
      case 'search_3': // 左1右1图标
        rlt = _buildStyle3Widget(context);
        break;
      case 'search_4': // 右按钮
        rlt = _buildStyle4Widget(context);
        break;
      default:
        rlt = Container();
        break;
    }

    return rlt;
  }

  /// 左1右1图标
  Widget _buildStyle3Widget(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        GestureDetector(
            onTap: () => _onClickListener(context, model?.listStyle?.leftCss),
            child: CachedNetworkImage(
              width: 30,
              height: 30,
              imageUrl: model?.listStyle?.leftCss?.image ?? '',
            )),
        // 图标1
        SizedBox(width: 10),
        // 中间
        Expanded(
            child: GestureDetector(
              onTap: () => _onClickListener(context, model?.listStyle?.searchCss),
              behavior: HitTestBehavior.opaque,
              child: Container(
                // height: 30,
                width: double.infinity,
                padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 9),
                decoration: BoxDecoration(borderRadius: BorderRadius.circular(60 / 2), color: HexColor.fromHex(model?.listStyle?.searchCss?.bgColor)),
                child: Row(
                  children: <Widget>[
                    CachedNetworkImage(
                      width: 15,
                      height: 15,
                      imageUrl: model?.listStyle?.searchCss?.image ?? '',
                    ),
                    SizedBox(width: 4),
                    Text(model?.listStyle?.searchCss?.text ?? '输入搜索内容，领券省钱', style: TextStyle(fontSize: 13, color: HexColor.fromHex(model?.listStyle?.searchCss?.textColor??"#FFFFFF")))
                  ],
                ),
              ),
            )),
        SizedBox(width: 10),
        // 图标2
        GestureDetector(
            onTap: () => _onClickListener(context, model?.listStyle?.rightCss),
            child: CachedNetworkImage(
              width: 30,
              height: 30,
              imageUrl: model?.listStyle?.rightCss?.image ?? '',
            )),
      ],
    );
  }

  /// 右按钮
  Widget _buildStyle4Widget(BuildContext context) {
    return GestureDetector(
      onTap: () => _onClickListener(context, model?.listStyle?.rightBtnCss),
      child: Container(
        height: 38,
        padding: EdgeInsets.only(left: 10.5),
        decoration: BoxDecoration(
            border: Border.all(color: HexColor.fromHex(model?.listStyle?.searchCss?.borderColor ?? "")),
            borderRadius: BorderRadius.only(
              bottomRight: Radius.circular(ParseUtil.stringParseDouble(model?.bottomRightRadius)),
              bottomLeft: Radius.circular(ParseUtil.stringParseDouble(model?.bottomLeftRadius)),
              topLeft: Radius.circular(ParseUtil.stringParseDouble(model?.topLeftRadius)),
              topRight: Radius.circular(ParseUtil.stringParseDouble(model?.topRightRadius)),
            )),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            ///搜索图标
            CachedNetworkImage(
              imageUrl: model?.listStyle?.searchCss?.image ?? '',
              width: 16,
              fit: BoxFit.fitWidth,
            ),
            SizedBox(
              width: 4,
            ),
            Expanded(
              child: TextField(
                style: TextStyle(fontSize: 13),
                decoration: InputDecoration(
                    isDense: true,
                    enabled: false,
                    border: InputBorder.none,
                    hintText: model?.listStyle?.searchCss?.text ?? "",
                    hintStyle: TextStyle(color: HexColor.fromHex(model?.listStyle?.searchCss?.textColor ?? ""))),
              ),
            ),
            Container(
              padding: EdgeInsets.only(left: 16, right: 16),
              decoration: BoxDecoration(
                  image: DecorationImage(image: CachedNetworkImageProvider(model?.listStyle?.rightBtnCss?.bgImg ?? ""), fit: BoxFit.fitHeight),
                  borderRadius: BorderRadius.circular(2)),
              height: double.infinity,
              child: Center(
                  child: Text(
                    model?.listStyle?.rightBtnCss?.text ?? "",
                    style: TextStyle(color: HexColor.fromHex(model?.listStyle?.rightBtnCss?.textColor ?? "#FFFFFF"), fontWeight: FontWeight.w500, fontSize: 13),
                  )),
            )
          ],
        ),
      ),
    );
  }

  /// 右1图标
  Widget _buildStyle1Widget(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
            child: GestureDetector(
          onTap: () => _onClickListener(context, model?.listStyle?.searchCss),
          behavior: HitTestBehavior.opaque,
          child: Container(
            // height: 30,
            width: double.infinity,
            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 9),
            decoration: BoxDecoration(borderRadius: BorderRadius.circular(60 / 2), color: HexColor.fromHex(model?.listStyle?.searchCss?.bgColor)),
            child: Row(
              children: <Widget>[
                CachedNetworkImage(
                  width: 15,
                  height: 15,
                  imageUrl: model?.listStyle?.searchCss?.image ?? '',
                ),
                SizedBox(width: 4),
                Text(model?.listStyle?.searchCss?.text ?? '输入搜索内容，领券省钱', style: TextStyle(fontSize: 13, color: HexColor.fromHex(model?.listStyle?.searchCss?.textColor??"#FFFFFF")))
              ],
            ),
          ),
        )),
        SizedBox(width: 10),
        GestureDetector(
            onTap: () => _onClickListener(context, model?.listStyle?.rightCss),
            child: CachedNetworkImage(
              width: 30,
              height: 30,
              imageUrl: model?.listStyle?.rightCss?.image ?? '',
            )),
      ],
    );
  }

  /// 无图标
  Widget _buildStyle2Widget(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () => _onClickListener(context, model?.listStyle?.searchCss),
      child: Container(
        width: double.infinity,
        child: Container(
          width: double.infinity,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(40),
            color: HexColor.fromHex(model?.listStyle?.searchCss?.bgColor ?? '#F9F9F9'),
          ),
          padding: const EdgeInsets.symmetric(vertical: 6),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              /// 搜索按钮
              CachedNetworkImage(
                imageUrl: model?.listStyle?.searchCss?.image ?? '',
                height: 20,
                width: 20,
              ),
              const SizedBox(width: 7.5),

              /// 提示文字
              Text(
                model?.listStyle?.searchCss?.text ?? '搜索更多优惠商品',
                style: TextStyle(fontSize: 14, color: HexColor.fromHex(model?.listStyle?.searchCss?.textColor ?? '#999999')),
              )
            ],
          ),
        ),
      ),
    );
  }
}