zhiying_base_widget/lib/widgets/search/input/search_input_widget.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:zhiying_base_widget/widgets/home/home_quick_entry/cached_network_image_util.dart';
import 'package:zhiying_base_widget/widgets/search/input/model/search_input_model.dart';
import 'package:zhiying_base_widget/widgets/search/input/search_input_sk.dart';
import 'package:zhiying_comm/zhiying_comm.dart';
import 'package:cached_network_image/cached_network_image.dart';

///
/// 搜索页的搜索框
///
class SearchInputWidget extends StatefulWidget {
  final Map<String, dynamic> data;
  SearchInputModel model;

  SearchInputWidget(this.data, {Key key}) : super(key: key) {
    try {
      model = SearchInputModel.fromJson(jsonDecode(data['data']));
    } catch (e) {
      Logger.error(e);
    }
  }

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

class _SearchInputWidgetState extends State<SearchInputWidget> {
  /// 点击搜索按钮
  void _onSearchButtomClick() {}

  FocusNode _focusNode;
  TextEditingController _editingController;

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

  @override
  void initState() {
    _focusNode = FocusNode();
    _editingController = TextEditingController();
    super.initState();
  }

  @override
  void dispose() {
    _focusNode?.unfocus();
    _focusNode?.dispose();
    _editingController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Visibility(
      visible: !EmptyUtil.isEmpty(widget?.model),
      replacement: SearchInputSkeleton(),
      child: _getMainWidget(widget?.model),
    );
  }

  /// 获取主视图
  Widget _getMainWidget(SearchInputModel model) {
    return Container(
      width: double.infinity,
      height: 32,
      margin: const EdgeInsets.only(
        left: 12.5,
        right: 12.5,
      ),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25),
        color: HexColor.fromHex('#F9F9F9'),
      ),
      child: Row(
        children: <Widget>[
          /// 搜索icon
          _getSearchIconWidget(model),
          const SizedBox(width: 7.5),

          /// 搜索输入框
          Expanded(child: _getSearchInputWidget(model)),

          /// 搜索按钮
          _getSearchButtomWidget(model),
        ],
      ),
    );
  }

  /// 搜索icon
  Widget _getSearchIconWidget(SearchInputModel model) {
    return Container(
      height: double.infinity,
      width: 20,
      margin: const EdgeInsets.only(left: 12.5),
      padding: const EdgeInsets.symmetric(vertical: 6),
      child: CachedNetworkImage(
        imageUrl: model?.search_icon ?? '',
      ),
    );
  }

  /// 搜索输入框
  Widget _getSearchInputWidget(SearchInputModel model) {
    return Container(
      height: double.infinity,
      alignment: Alignment.centerLeft,
      // padding: const EdgeInsets.symmetric(vertical: 6),
      child: TextField(
        showCursor: true,
        cursorWidth: 1,
        style: TextStyle(fontSize: 14, color: HexColor.fromHex('#333333')),
        decoration: InputDecoration(
          filled: false,
          // focusColor: Colors.transparent,
          // fillColor: Colors.transparent,
          border: InputBorder.none,
          focusedBorder: InputBorder.none,
          focusedErrorBorder: InputBorder.none,
          errorBorder: InputBorder.none,
          disabledBorder: InputBorder.none,
          enabledBorder: InputBorder.none,
          hintText: '搜索更多优惠商品',
          hintStyle: TextStyle(color: HexColor.fromHex('#999999'), fontSize: 14),
        ),
      ),
    );
  }

  /// 搜索按钮
  Widget _getSearchButtomWidget(SearchInputModel model) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () => _onSearchButtomClick(),
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 17.5, vertical: 6),
        decoration: BoxDecoration(
          gradient: LinearGradient(colors: [HexColor.fromHex('#FD5E5E'), HexColor.fromHex('#FF0100')], begin: Alignment.centerLeft, end: Alignment.centerRight),
          borderRadius: BorderRadius.circular(30),
        ),
        child: Text(
          '搜索',
          style: TextStyle(color: HexColor.fromHex('#FFFFFF'), fontSize: 14),
        ),
      ),
    );
  }

  /// 【弃用】搜索按钮
// Widget _getSearchButtomWidget() {
//   return Material(
//     child: Container(
//       decoration: BoxDecoration(
//         borderRadius: BorderRadius.only(topRight: Radius.circular(25), bottomRight: Radius.circular(25))
//       ),
//       height: double.infinity,
//       width: 63,
//       child: RaisedButton(
//         padding: const EdgeInsets.only(bottom: 6, top: 6, left: 17.5, right: 17.5),
//         shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular( 25)),
//         child: Text('搜索', style: TextStyle( fontSize: 14, color:  HexColor.fromHex('#FFFFFF')),),
//         onPressed: ()=> _onSearchButtomClick(),
//         color: HexColor.fromHex('#FF0100'),
//       ),
//     ),
//   );
// }
}