ui: change appbar layout

simon-ding · Nov 4, 2024 · 03f72b9 · 03f72b9
1 parent c17cf75
commit 03f72b9
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 36 deletions.
diff --git a/ui/lib/main.dart b/ui/lib/main.dart
@@ -180,42 +180,52 @@ class _MainSkeletonState extends State<MainSkeleton> {
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
         // Here we take the value from the MyHomePage object that was created by
         // the App.build method, and use it to set our appbar title.
-        title: TextButton(
-          onPressed: () => context.go(WelcomePage.routeTv),
-          child: const Text(
-            "Polaris",
-            overflow: TextOverflow.clip,
-            style: TextStyle(fontSize: 28),
+        leading: Container(
+          alignment: Alignment.centerLeft,
+          child: TextButton(
+            onPressed: () => context.go(WelcomePage.routeTv),
+            child: const Text(
+              "Polaris",
+              overflow: TextOverflow.clip,
+              style: TextStyle(fontSize: 28),
+            ),
           ),
         ),
-
-        actions: [
-          SearchAnchor(
-              builder: (BuildContext context, SearchController controller) {
-            return Container(
-              constraints: const BoxConstraints(maxWidth: 250, maxHeight: 40),
-              child: Opacity(
-                opacity: 0.8,
-                child: SearchBar(
-                  hintText: "搜索...",
-                  leading: const Icon(Icons.search),
-                  controller: controller,
-                  shadowColor: WidgetStateColor.transparent,
-                  backgroundColor: WidgetStatePropertyAll(
-                      Theme.of(context).colorScheme.primaryContainer),
-                  onSubmitted: (value) => context.go(Uri(
-                      path: SearchPage.route,
-                      queryParameters: {'query': value}).toString()),
+        leadingWidth: isSmallScreen(context) ? 0 : 190,
+        title: Container(
+            alignment: Alignment.bottomLeft,
+            child: SizedBox(
+              width: 250,
+              child: TextField(
+                decoration: InputDecoration(
+                  prefixIcon: Icon(
+                    Icons.search,
+                    color: Theme.of(context).colorScheme.primary,
+                  ),
+                  label: Text("在此搜索...",
+                      style: TextStyle(
+                        color: Theme.of(context).colorScheme.primary,
+                      )),
                 ),
+                onSubmitted: (value) {
+                  context.go(Uri(
+                      path: SearchPage.route,
+                      queryParameters: {'query': value}).toString());
+                },
               ),
-            );
-          }, suggestionsBuilder:
-                  (BuildContext context, SearchController controller) {
-            return [Text("dadada")];
-          }),
+            )),
+
+        actions: [
           // IconButton(
           //     onPressed: () => showCalendar(context),
           //     icon: Icon(Icons.calendar_month)),
+          IconButton(
+              onPressed: () => showDonate(context),
+              icon: Icon(
+                Icons.favorite_rounded,
+                color: Colors.red,
+              )),
+
           MenuAnchor(
             menuChildren: [
               MenuItemButton(
@@ -239,12 +249,6 @@ class _MainSkeletonState extends State<MainSkeleton> {
               );
             },
           ),
-          IconButton(
-              onPressed: () => showDonate(context),
-              icon: Icon(
-                Icons.favorite_rounded,
-                color: Colors.red,
-              )),
         ],
       ),
       useDrawer: false,

diff --git a/ui/lib/widgets/utils.dart b/ui/lib/widgets/utils.dart
@@ -1,6 +1,7 @@
 import 'dart:math';
 
 import 'package:flutter/material.dart';
+import 'package:flutter_adaptive_scaffold/flutter_adaptive_scaffold.dart';
 import 'package:intl/intl.dart';
 import 'package:ui/providers/APIs.dart';
 import 'dart:io' show Platform;
@@ -60,5 +61,5 @@ bool isDesktop() {
 
   bool isSmallScreen(BuildContext context) {
     final screenWidth = MediaQuery.of(context).size.width;
-    return screenWidth < 600;
+    return screenWidth < Breakpoints.small.endWidth!.toDouble();
   }