style(home): improve layout

减少了溢出情况

Signed-off-by: OctagonalStar <[email protected]>

Author: OctagonalStar

lib/main.dart

@@ -102,6 +102,7 @@ class _MyHomePageState extends State<MyHomePage> {
       children: [
         // 侧边导航栏
         NavigationRail(
+          minWidth: MediaQuery.of(context).size.width * 0.05,
           selectedIndex: currentIndex,
           onDestinationSelected: (int index) {
             _onNavigationTapped(index);

lib/pages/home_page.dart

@@ -23,9 +23,9 @@ class HomePage extends StatelessWidget {
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             Container(
-              width: mediaQuery.size.width * 0.32,
+              width: mediaQuery.size.width * 0.30,
               height: mediaQuery.size.height * 0.18,
-              margin: EdgeInsets.all(8.0),
+              margin: EdgeInsets.all(4.0),
               padding: EdgeInsets.all(16.0),
               decoration: BoxDecoration(
                 color: themeColor.secondaryContainer.withAlpha(150),
@@ -56,9 +56,9 @@ class HomePage extends StatelessWidget {
               ),
             ),
             Container(
-              width: mediaQuery.size.width * 0.56,
+              width: mediaQuery.size.width * 0.50,
               height: mediaQuery.size.height * 0.18,
-              margin: EdgeInsets.all(8.0),
+              margin: EdgeInsets.all(4.0),
               padding: EdgeInsets.all(16.0),
               decoration: BoxDecoration(
                 color: themeColor.secondaryContainer.withAlpha(150),
@@ -86,9 +86,9 @@ class HomePage extends StatelessWidget {
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             Container(
-              width: mediaQuery.size.width * 0.54,
+              width: mediaQuery.size.width * 0.50,
               height: mediaQuery.size.height * 0.18,
-              margin: EdgeInsets.all(8.0),
+              margin: EdgeInsets.all(4.0),
               decoration: BoxDecoration(
                 borderRadius: BorderRadius.circular(25.0),
               ),
@@ -114,9 +114,9 @@ class HomePage extends StatelessWidget {
               ),
             ),
             Container(
-              width: mediaQuery.size.width * 0.34,
+              width: mediaQuery.size.width * 0.35,
               height: mediaQuery.size.height * 0.18,
-              margin: EdgeInsets.all(8.0),
+              margin: EdgeInsets.all(4.0),
               decoration: BoxDecoration(
                 borderRadius: BorderRadius.circular(25.0),
               ),

lib/pages/learning_page.dart

@@ -49,7 +49,7 @@ class LearningPage extends StatelessWidget {
                 style: ElevatedButton.styleFrom(
                   backgroundColor: Theme.of(context).colorScheme.onPrimary.withAlpha(150),
                   shadowColor: Colors.transparent,
-                  fixedSize: Size(mediaQuery.size.width * 0.4, mediaQuery.size.height * 0.2),
+                  fixedSize: Size(mediaQuery.size.width * 0.35, mediaQuery.size.height * 0.2),
                   shape: RoundedRectangleBorder(
                     borderRadius: BorderRadiusGeometry.vertical(bottom: Radius.circular(25.0)),
                   ),

lib/pages/test_page.dart

@@ -54,7 +54,7 @@ class TestPage extends StatelessWidget {
             ),
             ElevatedButton.icon(
               icon: Icon(Icons.multitrack_audio, size: 36.0),
-              label: Text('自主\n听写', style: TextStyle(fontSize: 34.0)),
+              label: FittedBox(child: Text('自主\n听写', style: TextStyle(fontSize: 34.0))),
               style: ElevatedButton.styleFrom(
                 backgroundColor: Theme.of(context).colorScheme.onPrimary.withAlpha(150),
                 fixedSize: Size(mediaQuery.size.width * 0.42, mediaQuery.size.height * 0.45,),
@@ -78,9 +78,9 @@ class TestPage extends StatelessWidget {
           mainAxisAlignment: MainAxisAlignment.spaceEvenly,
           children: [
             Container(
-              width: mediaQuery.size.width * 0.58,
+              width: mediaQuery.size.width * 0.50,
               height: mediaQuery.size.height * 0.16,
-              margin: EdgeInsets.all(8.0),
+              margin: EdgeInsets.all(4.0),
               decoration: BoxDecoration(
                 borderRadius: StaticsVar.br,
               ),
@@ -111,9 +111,9 @@ class TestPage extends StatelessWidget {
               ),
             ),
             Container(
-              width: mediaQuery.size.width * 0.32,
+              width: mediaQuery.size.width * 0.30,
               height: mediaQuery.size.height * 0.16,
-              margin: EdgeInsets.all(8.0),
+              margin: EdgeInsets.all(4.0),
               decoration: BoxDecoration(
                 borderRadius: StaticsVar.br,
               ),