Flutter开发 MaterrialApp基本属性介绍

发布于:2025-08-05 ⋅ 阅读:(13) ⋅ 点赞:(0)

home属性

class MyApp extends StatelessWidget { //无状态的

  const MyApp({super.key});

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

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

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

class MyApp extends StatelessWidget {
  //无状态的

  const MyApp({super.key});

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

  
  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});

  
  Widget 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,
      ),
      .......
    );
  }

网站公告

今日签到

点亮在社区的每一天
去签到