Merge pull request #410 from Tencent/feature/search_component

demo增加组件搜索功能
Tencent · Dec 17, 2024 · 77bbc0a · 77bbc0a
2 parents 4dd5022 + b3b19ea
commit 77bbc0a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/tdesign-component/example/lib/home.dart b/tdesign-component/example/lib/home.dart
@@ -35,6 +35,7 @@ class MyHomePage extends StatefulWidget {
 
 class _MyHomePageState extends State<MyHomePage> {
   bool useConch = false;
+  String searchText = '';
 
   @override
   void initState() {
@@ -108,7 +109,8 @@ class _MyHomePageState extends State<MyHomePage> {
       return const web.WebMainBody();
     }
     return SafeArea(
-        child: Center(
+        child: Align(
+          alignment: Alignment.topCenter,
       child: SingleChildScrollView(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
@@ -160,6 +162,15 @@ class _MyHomePageState extends State<MyHomePage> {
       ),
     ));
 
+    children.add(TDSearchBar(
+      placeHolder: '请输入组件名称',
+      onTextChanged: (value){
+        setState(() {
+          searchText = value;
+        });
+      },
+    ));
+
     exampleMap.forEach((key, value) {
       children.add(Container(
         alignment: Alignment.topLeft,
@@ -174,6 +185,10 @@ class _MyHomePageState extends State<MyHomePage> {
         ),
       ));
       value.forEach((model) {
+        if(searchText.isNotEmpty && !model.text.toLowerCase().contains(searchText.toLowerCase())){
+          // 如果有搜索文案,不再搜索中的组件不展示
+          return;
+        }
         model.spline = WebMdTool.getSpline(key);
         if (model.isTodo) {
           if (_kShowTodoComponent) {

diff --git a/tdesign-component/lib/src/components/search/td_search_bar.dart b/tdesign-component/lib/src/components/search/td_search_bar.dart
@@ -483,7 +483,7 @@ class _TDSearchBarState extends State<TDSearchBar>
                         maxWidth: box.maxWidth - 51,
                       ),
                       child: TDText(
-                        widget.placeHolder,
+                        widget.placeHolder ?? '',
                         font: getSize(context),
                         textColor: TDTheme.of(context).fontGyColor3,
                         maxLines: 1,