Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/td search bar新增Action和onActionClick属性 #273

Merged
merged 5 commits into from
Aug 24, 2024
Merged

Feature/td search bar新增Action和onActionClick属性 #273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ba41ff9
Add files via upload
Limpid-8818 Aug 2, 2024
aa6c653
Add files via upload
Limpid-8818 Aug 2, 2024
f847f62
Add files via upload
Limpid-8818 Aug 2, 2024
528dfe2
Add files via upload
Limpid-8818 Aug 2, 2024
7aceeb4
Add files via upload
Limpid-8818 Aug 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 18 additions & 16 deletions tdesign-component/example/assets/api/search_api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 | 背景颜色 |
30 changes: 30 additions & 0 deletions tdesign-component/example/assets/code/search._buildSearchBarWithAction.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 ?? ''}',
),
)
],
);
}
39 changes: 37 additions & 2 deletions tdesign-component/example/lib/page/td_search_bar_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ class TDSearchBarPage extends StatefulWidget {

class _TDSearchBarPageState extends State<TDSearchBarPage> {
String? inputText;
String? searchText;

@override
Widget build(BuildContext context) {
Expand All @@ -32,8 +33,11 @@ class _TDSearchBarPageState extends State<TDSearchBarPage> {
ExampleModule(title: '组件样式', children: [
ExampleItem(desc: '搜索框形状', builder: _buildSearchBarWithShape),
ExampleItem(desc: '默认状态其他对齐方式', builder: _buildCenterSearchBar),
])
]);
]),
],
test: [
ExampleItem(desc: '获取焦点后显示自定义操作按钮', builder: _buildSearchBarWithAction),
],);
}

@Demo(group: 'search')
Expand Down Expand Up @@ -115,4 +119,35 @@ class _TDSearchBarPageState extends State<TDSearchBarPage> {
},
);
}

@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 ?? ''}',
),
)
],
);
}
}
92 changes: 61 additions & 31 deletions tdesign-component/lib/src/components/search/td_search_bar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ class TDSearchBar extends StatefulWidget {
this.needCancel = false,
this.controller,
this.backgroundColor = Colors.white,
this.action = '',
this.onActionClick,
}) : super(key: key);

/// 预设文案
Expand Down Expand Up @@ -79,6 +81,12 @@ class TDSearchBar extends StatefulWidget {
/// 编辑完成回调
final TDSearchBarCallBack? onEditComplete;

/// 自定义操作文字
final String action;

/// 自定义操作回调
final TDSearchBarEvent? onActionClick;

@override
State<StatefulWidget> createState() => _TDSearchBarState();
}
Expand Down Expand Up @@ -169,6 +177,21 @@ class _TDSearchBarState extends State<TDSearchBar>
: 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(
Expand Down Expand Up @@ -255,37 +278,44 @@ class _TDSearchBarState extends State<TDSearchBar>
),
),
),
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(
Expand Down
Loading