From ba41ff950cd52378c3c31c77540cb0b4df618b12 Mon Sep 17 00:00:00 2001 From: Limpid-8818 <157373409+Limpid-8818@users.noreply.github.com> Date: Fri, 2 Aug 2024 21:00:00 +0800 Subject: [PATCH 1/5] Add files via upload --- .../example/lib/page/td_search_bar_page.dart | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/tdesign-component/example/lib/page/td_search_bar_page.dart b/tdesign-component/example/lib/page/td_search_bar_page.dart index 4cafaf6cc..ec86723bc 100644 --- a/tdesign-component/example/lib/page/td_search_bar_page.dart +++ b/tdesign-component/example/lib/page/td_search_bar_page.dart @@ -13,6 +13,7 @@ class TDSearchBarPage extends StatefulWidget { class _TDSearchBarPageState extends State { String? inputText; + String? searchText; @override Widget build(BuildContext context) { @@ -27,6 +28,8 @@ class _TDSearchBarPageState extends State { children: [ ExampleItem(desc: '基础搜索框', builder: _buildDefaultSearchBar), ExampleItem(desc: '获取焦点后显示取消按钮', builder: _buildFocusSearchBar), + ExampleItem( + desc: '获取焦点后显示自定义操作按钮', builder: _buildSearchBarWithAction), ], ), ExampleModule(title: '组件样式', children: [ @@ -115,4 +118,35 @@ class _TDSearchBarPageState extends State { }, ); } + + @Demo(group: 'search') + Widget _buildSearchBarWithAction(BuildContext context) { + return Column( + children: [ + TDSearchBar( + placeHolder: '搜索预设文案', + alignment: TDSearchAlignment.left, + action: '搜索', + onActionClick: (String text) { + setState(() { + searchText = text; + }); + }, + onTextChanged: (String text) { + setState(() { + inputText = text; + }); + }, + ), + const SizedBox(height: 10,), + Container( + padding: const EdgeInsets.only(left: 15), + alignment: Alignment.centerLeft, + child: TDText( + '搜索框输入的内容：${searchText ?? ''}', + ), + ) + ], + ); + } } From aa6c653ff02f2c28c0e7e5e9082aeb6a7b947b72 Mon Sep 17 00:00:00 2001 From: Limpid-8818 <157373409+Limpid-8818@users.noreply.github.com> Date: Fri, 2 Aug 2024 21:02:46 +0800 Subject: [PATCH 2/5] Add files via upload --- .../src/components/search/td_search_bar.dart | 92 ++++++++++++------- 1 file changed, 61 insertions(+), 31 deletions(-) diff --git a/tdesign-component/lib/src/components/search/td_search_bar.dart b/tdesign-component/lib/src/components/search/td_search_bar.dart index 4c93e04f5..3b8e6b6ef 100644 --- a/tdesign-component/lib/src/components/search/td_search_bar.dart +++ b/tdesign-component/lib/src/components/search/td_search_bar.dart @@ -38,6 +38,8 @@ class TDSearchBar extends StatefulWidget { this.needCancel = false, this.controller, this.backgroundColor = Colors.white, + this.action = '', + this.onActionClick, }) : super(key: key); /// 预设文案 @@ -79,6 +81,12 @@ class TDSearchBar extends StatefulWidget { /// 编辑完成回调 final TDSearchBarCallBack? onEditComplete; + /// 自定义操作文字 + final String action; + + /// 自定义操作回调 + final TDSearchBarEvent? onActionClick; + @override State createState() => _TDSearchBarState(); } @@ -169,6 +177,21 @@ class _TDSearchBarState extends State : TDTheme.of(context).fontBodyLarge; } + Widget actionBtn(BuildContext context, String? text, {String? action, TDSearchBarEvent? onActionClick} ){ + return GestureDetector( + onTap: (){ + onActionClick!(text??''); + }, + child: Container( + padding: const EdgeInsets.only(left: 16), + child: Text(action!, + style: TextStyle( + fontSize: getSize(context)?.size, + color: TDTheme.of(context).brandNormalColor)), + ), + ); + } + @override Widget build(BuildContext context) { return Container( @@ -255,37 +278,44 @@ class _TDSearchBarState extends State ), ), ), - Offstage( - offstage: cancelBtnHide || !widget.needCancel, - child: GestureDetector( - onTap: () { - _cleanInputText(); - if (widget.onTextChanged != null) { - widget.onTextChanged!(''); - } - if (_animation == null) { - focusNode.unfocus(); - setState(() { - _status = _TDSearchBarStatus.unFocus; - }); - return; - } - setState(() { - _status = _TDSearchBarStatus.animatingToUnFocus; - }); - focusNode.unfocus(); - _animationController.reverse( - from: _animationController.upperBound); - }, - child: Container( - padding: const EdgeInsets.only(left: 16), - child: Text(context.resource.cancel, - style: TextStyle( - fontSize: getSize(context)?.size, - color: TDTheme.of(context).brandNormalColor)), - ), - ), - ), + widget.action.isNotEmpty + ? actionBtn( + context, + controller.text, + action: widget.action, + onActionClick: widget.onActionClick ?? (String text) {}, + ) + : Offstage( + offstage: cancelBtnHide || !widget.needCancel, + child: GestureDetector( + onTap: () { + _cleanInputText(); + if (widget.onTextChanged != null) { + widget.onTextChanged!(''); + } + if (_animation == null) { + focusNode.unfocus(); + setState(() { + _status = _TDSearchBarStatus.unFocus; + }); + return; + } + setState(() { + _status = _TDSearchBarStatus.animatingToUnFocus; + }); + focusNode.unfocus(); + _animationController.reverse( + from: _animationController.upperBound); + }, + child: Container( + padding: const EdgeInsets.only(left: 16), + child: Text(context.resource.cancel, + style: TextStyle( + fontSize: getSize(context)?.size, + color: TDTheme.of(context).brandNormalColor)), + ), + ), + ), ], ), Offstage( From f847f624c6a6c1757f23b9b8f2691a6d595f197c Mon Sep 17 00:00:00 2001 From: Limpid-8818 <157373409+Limpid-8818@users.noreply.github.com> Date: Fri, 2 Aug 2024 21:05:54 +0800 Subject: [PATCH 3/5] Add files via upload --- .../example/assets/api/search_api.md | 34 ++++++++++--------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/tdesign-component/example/assets/api/search_api.md b/tdesign-component/example/assets/api/search_api.md index 299c18a48..46908d44c 100644 --- a/tdesign-component/example/assets/api/search_api.md +++ b/tdesign-component/example/assets/api/search_api.md @@ -2,19 +2,21 @@ ### TDSearchBar #### 默认构造方法 -| 参数 | 类型 | 默认值 | 说明 | -| --- | --- | --- | --- | -| key | | - | | -| placeHolder | String? | - | 预设文案 | -| style | TDSearchStyle? | TDSearchStyle.square | 样式 | -| alignment | TDSearchAlignment? | TDSearchAlignment.left | 对齐方式，居中或这头部对齐 | -| onTextChanged | TDSearchBarEvent? | - | 文字改变回调 | -| onSubmitted | TDSearchBarEvent? | - | 提交回调 | -| onEditComplete | TDSearchBarCallBack? | - | 编辑完成回调 | -| autoHeight | bool | false | 是否自动计算高度 | -| padding | EdgeInsets | const EdgeInsets.fromLTRB(16, 8, 16, 8) | 内部填充 | -| autoFocus | bool | false | 是否自动获取焦点 | -| mediumStyle | bool | false | 是否在导航栏中的样式 | -| needCancel | bool | false | 是否需要取消按钮 | -| controller | TextEditingController? | - | 控制器 | -| backgroundColor | Color? | Colors.white | 背景颜色 | +| 参数 | 类型 | 默认值 | 说明 | +|-----------------|------------------------|-----------------------------------------|---------------| +| key | | - | | +| placeHolder | String? | - | 预设文案 | +| style | TDSearchStyle? | TDSearchStyle.square | 样式 | +| alignment | TDSearchAlignment? | TDSearchAlignment.left | 对齐方式，居中或这头部对齐 | +| onTextChanged | TDSearchBarEvent? | - | 文字改变回调 | +| onSubmitted | TDSearchBarEvent? | - | 提交回调 | +| onEditComplete | TDSearchBarCallBack? | - | 编辑完成回调 | +| autoHeight | bool | false | 是否自动计算高度 | +| padding | EdgeInsets | const EdgeInsets.fromLTRB(16, 8, 16, 8) | 内部填充 | +| autoFocus | bool | false | 是否自动获取焦点 | +| mediumStyle | bool | false | 是否在导航栏中的样式 | +| needCancel | bool | false | 是否需要取消按钮 | +| action | String | ‘’ | 右侧操作按钮文字 | +| onActionClick | TDSearchBarEvent? | - | 右侧操作按钮点击回调 | +| controller | TextEditingController? | - | 控制器 | +| backgroundColor | Color? | Colors.white | 背景颜色 | From 528dfe2082ef6f32160382be625e7a620bddb9a1 Mon Sep 17 00:00:00 2001 From: Limpid-8818 <157373409+Limpid-8818@users.noreply.github.com> Date: Fri, 2 Aug 2024 21:07:01 +0800 Subject: [PATCH 4/5] Add files via upload --- .../code/search._buildSearchBarWithAction.txt | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 tdesign-component/example/assets/code/search._buildSearchBarWithAction.txt diff --git a/tdesign-component/example/assets/code/search._buildSearchBarWithAction.txt b/tdesign-component/example/assets/code/search._buildSearchBarWithAction.txt new file mode 100644 index 000000000..bfab4d164 --- /dev/null +++ b/tdesign-component/example/assets/code/search._buildSearchBarWithAction.txt @@ -0,0 +1,30 @@ + + Widget _buildSearchBarWithAction(BuildContext context) { + return Column( + children: [ + TDSearchBar( + placeHolder: '搜索预设文案', + alignment: TDSearchAlignment.left, + action: '搜索', + onActionClick: (String text) { + setState(() { + searchText = text; + }); + }, + onTextChanged: (String text) { + setState(() { + inputText = text; + }); + }, + ), + const SizedBox(height: 10,), + Container( + padding: const EdgeInsets.only(left: 15), + alignment: Alignment.centerLeft, + child: TDText( + '搜索框输入的内容：${searchText ?? ''}', + ), + ) + ], + ); + } \ No newline at end of file From 7aceeb4cb8cdfdf43649af4a6e659d85845a323c Mon Sep 17 00:00:00 2001 From: Limpid-8818 <157373409+Limpid-8818@users.noreply.github.com> Date: Sat, 3 Aug 2024 10:14:39 +0800 Subject: [PATCH 5/5] Add files via upload --- .../example/lib/page/td_search_bar_page.dart | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/tdesign-component/example/lib/page/td_search_bar_page.dart b/tdesign-component/example/lib/page/td_search_bar_page.dart index ec86723bc..42702a367 100644 --- a/tdesign-component/example/lib/page/td_search_bar_page.dart +++ b/tdesign-component/example/lib/page/td_search_bar_page.dart @@ -28,15 +28,16 @@ class _TDSearchBarPageState extends State { children: [ ExampleItem(desc: '基础搜索框', builder: _buildDefaultSearchBar), ExampleItem(desc: '获取焦点后显示取消按钮', builder: _buildFocusSearchBar), - ExampleItem( - desc: '获取焦点后显示自定义操作按钮', builder: _buildSearchBarWithAction), ], ), ExampleModule(title: '组件样式', children: [ ExampleItem(desc: '搜索框形状', builder: _buildSearchBarWithShape), ExampleItem(desc: '默认状态其他对齐方式', builder: _buildCenterSearchBar), - ]) - ]); + ]), + ], + test: [ + ExampleItem(desc: '获取焦点后显示自定义操作按钮', builder: _buildSearchBarWithAction), + ],); } @Demo(group: 'search')