feat： 修改搜索输入框样式
This commit is contained in:
parent
911d0705d9
commit
a7149a29c3
|
|
@ -49,101 +49,70 @@ 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: 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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue