feat： 修改搜索输入框样式

lib/ui/views/TIMUIKitSearch/pureUI/tim_uikit_search_input.dart

@@ -49,34 +49,32 @@ class TIMUIKitSearchInputState extends TIMUIKitState<TIMUIKitSearchInput> {
   @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: const EdgeInsets.symmetric(vertical: 14, horizontal: 16),
-      padding: EdgeInsets.fromLTRB(16, isDesktopScreen ? 16 : 8, 16, 16),
+      color: Colors.white,
-      margin: isDesktopScreen ? const EdgeInsets.only(bottom: 2) : null,
+      child: GestureDetector(
+        onTap: () {
+          // 当点击搜索栏时，聚焦到输入框
+          widget.focusNode.requestFocus();
+        },
+        child: Container(
+          height: 42,
           decoration: BoxDecoration(
-          color: isDesktopScreen
+            color: const Color(0xFFF4F5F6),
-              ? theme.wideBackgroundColor
+            borderRadius: BorderRadius.circular(21),
-              : theme.primaryColor,
-          boxShadow: [
-            BoxShadow(
-              color: theme.weakBackgroundColor ?? hexToColor("E6E9EB"),
-              offset: const Offset(0.0, 2.0),
-            )
-          ]
           ),
           child: Row(
-        crossAxisAlignment: CrossAxisAlignment.center,
             children: [
+              const SizedBox(width: 24),
               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){
+                    if (isEmpty != isEmptyInput) {
                       setState(() {
                         isEmptyInput = isEmpty ? true : false;
                       });
@@ -85,66 +83,37 @@ class TIMUIKitSearchInputState extends TIMUIKitState<TIMUIKitSearchInput> {
                   },
                   keyboardType: TextInputType.text,
                   textInputAction: TextInputAction.search,
-              maxLines: 4,
+                  maxLines: 1,
-              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"),
-                ),
-                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,
+                    color: Color(0xFF333333),
-                    )),
+                    fontSize: 14,
-              ))
+                  ),
+                  decoration: InputDecoration(
+                    border: InputBorder.none,
+                    hintText: "请输入您要搜索的内容",
+                    hintStyle: const TextStyle(
+                      color: Color(0xFFC7CBD1),
+                      fontSize: 15,
+                    ),
+                    contentPadding: EdgeInsets.zero,
+                    isDense: true,
+                  ),
+                ),
+              ),
+              Container(
+                margin: const EdgeInsets.only(right: 24),
+                child: const Icon(
+                  Icons.search,
+                  color: Color(0xFFC7CBD1),
+                  size: 24,
+                ),
+              ),
             ],
           ),
+        ),
+      ),
     );
   }
 }

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