当前位置：首页 > news >正文

Flutter开发 MaterrialApp基本属性介绍

news 2025/11/12 3:04:32

这是目录

- home属性
- routes
- initialRoute
- theme

home属性

class MyApp extends StatelessWidget { //无状态的const MyApp({super.key});// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo', //任务管理窗口中显示的应用程序标题theme: ThemeData(//主题colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),),home: const MyHomePage(title: 'Flutter Demo Home Page222'), //应用程序默认显示的控件);}
}

home属性用于指定进入应用程序后显示的第一个画面。

routes

用于应用程序中页面跳转的路由。
示例
点击“第一个页面”跳转到另一个页面。
在这里插入图片描述

void main() {//入口函数runApp(const MyApp());
}class MyApp extends StatelessWidget {//无状态的const MyApp({super.key});// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo', //任务管理窗口中显示的应用程序标题theme: ThemeData(//主题colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),),home: SecondPage(),routes: {'/main': (BuildContext context) => SecondPage(),'/thrid': (BuildContext context) => ThridPage(),},);}
}class SecondPage extends StatelessWidget {const SecondPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: GestureDetector(onTap: () {print("这是主页面");Navigator.pushNamed(context, "/thrid");//路由},child: Text("第一个页面"),),),);}
}class ThridPage extends StatelessWidget {const ThridPage({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(body: Center(child: GestureDetector(onTap: () {print("这是主页面");},child: Text("第二个页面"),),),),);}
}

initialRoute

用于指定应用程序启动时的初始路由，即应用程序启动后跳转的第一个页面，应用程序中即使设置了home属性，启动后的第一个页面也是initialRoute路由指定的页面。

  Widget build(BuildContext context) {return MaterialApp(........home: SecondPage(),routes: {'/main': (BuildContext context) => SecondPage(),'/thrid': (BuildContext context) => ThridPage(),},initialRoute: "/thrid",onGenerateRoute: (settings) {//home或者initialRoute错误时，会调用return PageRouteBuilder(pageBuilder: (context, animation, secondaryAnimation) {return ThridPage();},);},);}

theme

用于指定应用程序的主题

  Widget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',//任务管理窗口中显示的应用程序标题theme: ThemeData(//主题primaryColor: Colors.green,primarySwatch: Colors.blue,),.......);}