添加搜索类别的按钮

Zhoucheng133 · Aug 26, 2024 · d800d06 · d800d06
1 parent f60ec3d
commit d800d06
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 6 deletions.
diff --git a/lib/pages/components/search_box.dart b/lib/pages/components/search_box.dart
@@ -20,7 +20,7 @@ class SearchBox extends SliverPersistentHeaderDelegate {
 
   @override
   bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
-    return false;
+    return true;
   }
 
 }
@@ -30,7 +30,8 @@ class SearchInput extends StatefulWidget {
   final TextEditingController textController;
   final FocusNode focus;
   final VoidCallback search;
-  const SearchInput({super.key, required this.textController, required this.focus, required this.search});
+  final String mode;
+  const SearchInput({super.key, required this.textController, required this.focus, required this.search, required this.mode});
 
   @override
   State<SearchInput> createState() => _SearchInputState();
@@ -65,7 +66,7 @@ class _SearchInputState extends State<SearchInput> {
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
                     Text(
-                      '搜索歌曲，专辑或艺人',
+                      '搜索${widget.mode=="song" ? "歌曲": widget.mode=="album" ? "专辑": "艺人"}',
                       style: GoogleFonts.notoSansSc(
                         color: Colors.grey,
                       ),

diff --git a/lib/pages/components/title_aria.dart b/lib/pages/components/title_aria.dart
@@ -58,4 +58,95 @@ class _TitleAriaState extends State<TitleAria> {
       ),
     );
   }
+}
+
+class SearchTitleArea extends StatefulWidget {
+
+  final ValueChanged changeMode;
+  final String mode;
+
+  const SearchTitleArea({super.key, required this.mode, required this.changeMode});
+
+  @override
+  State<SearchTitleArea> createState() => _SearchTitleAreaState();
+}
+
+class _SearchTitleAreaState extends State<SearchTitleArea> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      decoration: BoxDecoration(
+        color: Colors.grey[100]
+      ),
+      child: Padding(
+        padding: const EdgeInsets.only(left: 30, bottom: 0, right: 30),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            SizedBox(
+              height: 50,
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.start,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
+                  Text(
+                    '搜索',
+                    style: GoogleFonts.notoSansSc(
+                      fontWeight: FontWeight.w300,
+                      color: Colors.black,
+                      fontSize: 35
+                    ),
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                  const SizedBox(width: 10,),
+                  IconButton(
+                    onPressed: (){
+                      if(widget.mode=='song'){
+                        return;
+                      }
+                      widget.changeMode('song');
+                    },
+                    icon: Icon(
+                      Icons.music_note_rounded,
+                      color: widget.mode=='song' ? Colors.black : Colors.grey[300],
+                      size: 30,
+                    )
+                  ),
+                  IconButton(
+                    onPressed: (){
+                      if(widget.mode=='album'){
+                        return;
+                      }
+                      widget.changeMode('album');
+                    },
+                    icon: Icon(
+                      Icons.album_rounded,
+                      color: widget.mode=='album' ? Colors.black : Colors.grey[300],
+                      size: 30,
+                    )
+                  ),
+                  IconButton(
+                    onPressed: (){
+                      if(widget.mode=='artist'){
+                        return;
+                      }
+                      widget.changeMode('artist');
+                    },
+                    icon: Icon(
+                      Icons.mic_rounded,
+                      color: widget.mode=='artist' ? Colors.black : Colors.grey[300],
+                      size: 30,
+                    )
+                  )
+                ],
+              ),
+            ),
+            const SizedBox(height: 20,),
+          ],
+        ),
+      ),
+    );
+  }
 }
diff --git a/lib/pages/search.dart b/lib/pages/search.dart
@@ -16,6 +16,12 @@ class _SearchState extends State<Search> {
   ScrollController controller=ScrollController();
   bool showAppbarTitle=false;
   List ls=[];
+  String mode='song';
+  void changeMode(val){
+    setState(() {
+      mode=val;
+    });
+  }
 
   @override
   void initState() {
@@ -53,14 +59,14 @@ class _SearchState extends State<Search> {
       body: CustomScrollView(
         controller: controller,
         slivers: [
-          const SliverToBoxAdapter(
-            child: TitleAria(title: '搜索', subtitle: "")
+          SliverToBoxAdapter(
+            child: SearchTitleArea(mode: mode, changeMode: (val)=>changeMode(val))
           ),
           SliverPersistentHeader(
             pinned: true,
             delegate: SearchBox(
               (context)=>SearchInput(
-                textController: textController, focus: focus, search: (){},
+                textController: textController, focus: focus, search: (){}, mode: mode,
               ),
             ),
           ),