feat： 修改搜索输入框样式
This commit is contained in:
parent
911d0705d9
commit
a7149a29c3
|
|
@ -49,101 +49,70 @@ class TIMUIKitSearchInputState extends TIMUIKitState<TIMUIKitSearchInput> {
|
||||||
@override
|
@override
|
||||||
Widget tuiBuild(BuildContext context, TUIKitBuildValue value) {
|
Widget tuiBuild(BuildContext context, TUIKitBuildValue value) {
|
||||||
final TUITheme theme = value.theme;
|
final TUITheme theme = value.theme;
|
||||||
final isDesktopScreen = TUIKitScreenUtils.getFormFactor(context) == DeviceType.Desktop;
|
final isDesktopScreen =
|
||||||
|
TUIKitScreenUtils.getFormFactor(context) == DeviceType.Desktop;
|
||||||
return Container(
|
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(
|
||||||
decoration: BoxDecoration(
|
onTap: () {
|
||||||
color: isDesktopScreen
|
// 当点击搜索栏时，聚焦到输入框
|
||||||
? theme.wideBackgroundColor
|
widget.focusNode.requestFocus();
|
||||||
: theme.primaryColor,
|
},
|
||||||
boxShadow: [
|
child: Container(
|
||||||
BoxShadow(
|
height: 42,
|
||||||
color: theme.weakBackgroundColor ?? hexToColor("E6E9EB"),
|
decoration: BoxDecoration(
|
||||||
offset: const Offset(0.0, 2.0),
|
color: const Color(0xFFF4F5F6),
|
||||||
)
|
borderRadius: BorderRadius.circular(21),
|
||||||
]
|
),
|
||||||
),
|
child: Row(
|
||||||
child: Row(
|
children: [
|
||||||
crossAxisAlignment: CrossAxisAlignment.center,
|
const SizedBox(width: 24),
|
||||||
children: [
|
Expanded(
|
||||||
Expanded(
|
child: TextField(
|
||||||
child: ConstrainedBox(
|
autofocus: widget.isAutoFocus ?? true,
|
||||||
constraints: BoxConstraints(maxHeight: isDesktopScreen ? 30 : 36),
|
onChanged: (value) async {
|
||||||
child: TextField(
|
final trimValue = value.trim();
|
||||||
autofocus: widget.isAutoFocus ?? true,
|
final isEmpty = trimValue.isEmpty;
|
||||||
onChanged: (value) async {
|
if (isEmpty != isEmptyInput) {
|
||||||
final trimValue = value.trim();
|
setState(() {
|
||||||
final isEmpty = trimValue.isEmpty;
|
isEmptyInput = isEmpty ? true : false;
|
||||||
if(isEmpty != isEmptyInput){
|
});
|
||||||
setState(() {
|
}
|
||||||
isEmptyInput = isEmpty ? true : false;
|
widget.onChange(trimValue);
|
||||||
});
|
},
|
||||||
}
|
keyboardType: TextInputType.text,
|
||||||
widget.onChange(trimValue);
|
textInputAction: TextInputAction.search,
|
||||||
},
|
maxLines: 1,
|
||||||
keyboardType: TextInputType.text,
|
focusNode: widget.focusNode,
|
||||||
textInputAction: TextInputAction.search,
|
controller: textEditingController,
|
||||||
maxLines: 4,
|
style: const TextStyle(
|
||||||
minLines: 1,
|
color: Color(0xFF333333),
|
||||||
focusNode: widget.focusNode,
|
fontSize: 14,
|
||||||
controller: textEditingController,
|
),
|
||||||
textAlignVertical: TextAlignVertical.center,
|
decoration: InputDecoration(
|
||||||
textAlign: TextAlign.start,
|
border: InputBorder.none,
|
||||||
style: isDesktopScreen ? const TextStyle(
|
hintText: "请输入您要搜索的内容",
|
||||||
fontSize: 12
|
hintStyle: const TextStyle(
|
||||||
) : null,
|
color: Color(0xFFC7CBD1),
|
||||||
decoration: InputDecoration(
|
fontSize: 15,
|
||||||
contentPadding: const EdgeInsets.all(0),
|
),
|
||||||
border: const OutlineInputBorder(borderSide: BorderSide.none),
|
contentPadding: EdgeInsets.zero,
|
||||||
hintStyle: TextStyle(
|
isDense: true,
|
||||||
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")),
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
),
|
Container(
|
||||||
)),
|
margin: const EdgeInsets.only(right: 24),
|
||||||
if(!isDesktopScreen) Container(
|
child: const Icon(
|
||||||
margin: const EdgeInsets.fromLTRB(10, 0, 0, 0),
|
Icons.search,
|
||||||
child: GestureDetector(
|
color: Color(0xFFC7CBD1),
|
||||||
onTap: () {
|
size: 24,
|
||||||
Navigator.pop(context);
|
),
|
||||||
},
|
),
|
||||||
child: Text(TIM_t("取消"),
|
],
|
||||||
style: const TextStyle(
|
),
|
||||||
color: Colors.white,
|
),
|
||||||
)),
|
|
||||||
))
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
name: tencent_cloud_chat_uikit
|
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.
|
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
|
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
|
repository: https://github.com/TencentCloud/chat-uikit-flutter
|
||||||
documentation: https://comm.qq.com/im/doc/flutter/en/TUIKit/readme.html
|
documentation: https://comm.qq.com/im/doc/flutter/en/TUIKit/readme.html
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue