Flutter开发 MaterrialApp基本属性介绍

这是目录

- home属性
- routes
- initialRoute
- theme

home属性

dart 复制代码

class MyApp extends StatelessWidget { //无状态的

  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget 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

用于应用程序中页面跳转的路由。

示例

点击"第一个页面"跳转到另一个页面。

dart 复制代码

void main() {
  //入口函数
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  //无状态的

  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget 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});

  @override
  Widget 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});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: GestureDetector(
            onTap: () {
              print("这是主页面");
            },
            child: Text("第二个页面"),
          ),
        ),
      ),
    );
  }
}

initialRoute

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

dart 复制代码

  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

用于指定应用程序的主题

dart 复制代码

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