From a7149a29c3c2f7fe0e0377c1e5341a8df445a86a Mon Sep 17 00:00:00 2001 From: Zeew Date: Mon, 14 Jul 2025 15:30:22 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=20=E4=BF=AE=E6=94=B9=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E8=BE=93=E5=85=A5=E6=A1=86=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pureUI/tim_uikit_search_input.dart | 153 +++++++----------- pubspec.yaml | 2 +- 2 files changed, 62 insertions(+), 93 deletions(-) diff --git a/lib/ui/views/TIMUIKitSearch/pureUI/tim_uikit_search_input.dart b/lib/ui/views/TIMUIKitSearch/pureUI/tim_uikit_search_input.dart index 4ebf68d..24c145f 100644 --- a/lib/ui/views/TIMUIKitSearch/pureUI/tim_uikit_search_input.dart +++ b/lib/ui/views/TIMUIKitSearch/pureUI/tim_uikit_search_input.dart @@ -49,101 +49,70 @@ class TIMUIKitSearchInputState extends TIMUIKitState { @override Widget tuiBuild(BuildContext context, TUIKitBuildValue value) { final TUITheme theme = value.theme; - final isDesktopScreen = TUIKitScreenUtils.getFormFactor(context) == DeviceType.Desktop; + final isDesktopScreen = + TUIKitScreenUtils.getFormFactor(context) == DeviceType.Desktop; return Container( - // height: 64, - padding: EdgeInsets.fromLTRB(16, isDesktopScreen ? 16 : 8, 16, 16), - margin: isDesktopScreen ? const EdgeInsets.only(bottom: 2) : null, - decoration: BoxDecoration( - color: isDesktopScreen - ? theme.wideBackgroundColor - : theme.primaryColor, - boxShadow: [ - BoxShadow( - color: theme.weakBackgroundColor ?? hexToColor("E6E9EB"), - offset: const Offset(0.0, 2.0), - ) - ] - ), - child: Row( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Expanded( - child: ConstrainedBox( - constraints: BoxConstraints(maxHeight: isDesktopScreen ? 30 : 36), - child: TextField( - autofocus: widget.isAutoFocus ?? true, - onChanged: (value) async { - final trimValue = value.trim(); - final isEmpty = trimValue.isEmpty; - if(isEmpty != isEmptyInput){ - setState(() { - isEmptyInput = isEmpty ? true : false; - }); - } - widget.onChange(trimValue); - }, - keyboardType: TextInputType.text, - textInputAction: TextInputAction.search, - maxLines: 4, - minLines: 1, - focusNode: widget.focusNode, - controller: textEditingController, - textAlignVertical: TextAlignVertical.center, - textAlign: TextAlign.start, - style: isDesktopScreen ? const TextStyle( - fontSize: 12 - ) : null, - decoration: InputDecoration( - contentPadding: const EdgeInsets.all(0), - border: const OutlineInputBorder(borderSide: BorderSide.none), - hintStyle: TextStyle( - fontSize: isDesktopScreen ? 12 : 14, - color: hexToColor("CCCCCC"), + padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 16), + color: Colors.white, + child: GestureDetector( + onTap: () { + // 当点击搜索栏时，聚焦到输入框 + widget.focusNode.requestFocus(); + }, + child: Container( + height: 42, + decoration: BoxDecoration( + color: const Color(0xFFF4F5F6), + borderRadius: BorderRadius.circular(21), + ), + child: Row( + children: [ + const SizedBox(width: 24), + Expanded( + child: TextField( + autofocus: widget.isAutoFocus ?? true, + onChanged: (value) async { + final trimValue = value.trim(); + final isEmpty = trimValue.isEmpty; + if (isEmpty != isEmptyInput) { + setState(() { + isEmptyInput = isEmpty ? true : false; + }); + } + widget.onChange(trimValue); + }, + keyboardType: TextInputType.text, + textInputAction: TextInputAction.search, + maxLines: 1, + focusNode: widget.focusNode, + controller: textEditingController, + style: const TextStyle( + color: Color(0xFF333333), + fontSize: 14, + ), + decoration: InputDecoration( + border: InputBorder.none, + hintText: "请输入您要搜索的内容", + hintStyle: const TextStyle( + color: Color(0xFFC7CBD1), + fontSize: 15, + ), + contentPadding: EdgeInsets.zero, + isDense: true, + ), ), - fillColor: isDesktopScreen ? hexToColor("f3f3f4") : Colors.white, - filled: true, - isDense: true, - hintText: TIM_t("搜索"), - prefix: widget.prefixText != null - ? Container( - margin: const EdgeInsets.only(right: 8), - child: ConstrainedBox( - constraints: BoxConstraints( - maxWidth: - MediaQuery.of(context).size.width * 0.2), - child: widget.prefixText, - ), - ) - : null, - prefixIcon: widget.prefixIcon, - suffixIcon: isEmptyInput - ? null - : IconButton( - onPressed: () { - textEditingController.clear(); - setState(() { - isEmptyInput = true; - }); - widget.onChange(""); - }, - icon: Icon(Icons.cancel, color: hexToColor("979797")), - ), ), - ), - )), - if(!isDesktopScreen) Container( - margin: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: GestureDetector( - onTap: () { - Navigator.pop(context); - }, - child: Text(TIM_t("取消"), - style: const TextStyle( - color: Colors.white, - )), - )) - ], + Container( + margin: const EdgeInsets.only(right: 24), + child: const Icon( + Icons.search, + color: Color(0xFFC7CBD1), + size: 24, + ), + ), + ], + ), + ), ), ); } diff --git a/pubspec.yaml b/pubspec.yaml index 2bd2635..b038d42 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: tencent_cloud_chat_uikit description: A powerful chat UI component library and business logic for Tencent Cloud Chat, creating seamless in-app chat modules for delightful user experiences. -version: 5.0.0 +version: 5.0.1 homepage: https://trtc.io/products/chat?utm_source=gfs&utm_medium=link&utm_campaign=%E6%B8%A0%E9%81%93&_channel_track_key=k6WgfCKn repository: https://github.com/TencentCloud/chat-uikit-flutter documentation: https://comm.qq.com/im/doc/flutter/en/TUIKit/readme.html