Flutter MaterialApp

最新推荐文章于 2025-08-23 18:11:29 发布

原创最新推荐文章于 2025-08-23 18:11:29 发布 · 886 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter MaterialApp

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

本文详细介绍了 Flutter 中 MaterialApp 组件的各项参数及其使用方法，包括路由配置、主题设置等关键功能。

参数详解

属性	说明
navigatorKey	导航的key
home	主页
routes	路由(具体如何应用，如何完成跳转路由见详情)
initialRoute	初始路由
onGenerateRoute	生成路由
onUnknownRoute	位置路由
navigatorObservers	导航的观察者
builder	widget的构建
title	最近的应用程序中（任务管理器）快照描述
onGenerateTitle	生成任务管理器显示的标题
color	背景颜色
theme	主题
darkTheme	暗主题
locale	app语言支持
localizationsDelegates	多语言代理
localeListResolutionCallback
localeResolutionCallback	多语言回调
supportedLocales	支持的多语言，默认<Locale>[Locale('en', 'US')]
debugShowMaterialGrid	显示网格，默认false
showPerformanceOverlay	打开性能监控，覆盖在屏幕最上面，默认false
checkerboardRasterCacheImages	打开光栅缓存图像的检查板，默认false
checkerboardOffscreenLayers	打开渲染到屏幕外位图的图层的checkerboarding。，默认false
showSemanticsDebugger	打开一个覆盖图，显示框架报告的可访问性信息显示边框，默认false
debugShowCheckedModeBanner	右上角显示一个debug的图标，默认true

代码示例

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(
    // home: Text('data'),
    home: Scaffold(appBar: AppBar(title: Text('Flutter MaterialApp'),),),

    // 跳转页面配置
    routes: <String, WidgetBuilder>{
      'a':(BuildContext context){
        new aPage();
      },
    } ,

    //初始路由，/ 为根路由，没有home时启动
    initialRoute: '/',

    //生成路由 home和initialRoute都未指定时启动
    onGenerateRoute: (RouteSettings settings) {
      return new MaterialPageRoute<void>(
        settings: settings,
        builder: (BuildContext context) => Text('生成了路由'),
      );
    },

    //未知路由 home、initialRoute、onGenerateRoute都未指定时启动
    onUnknownRoute: (RouteSettings settings) => MaterialPageRoute<void>(
      settings: settings,
      builder: (BuildContext context) => Text('路由找不到了')
    ),

    // 导航观察者
    navigatorObservers : <NavigatorObserver>[MyNavigatorObserver()],

    //这个是直接渲染这个builder，不会走路由，优先渲染这个里面的widget
    builder: (BuildContext context, Widget w) => Text("builder生成新的view"),
    
    //任务管理器 名称
    title: 'MaterialApp属性说明',

    //新的title
    onGenerateTitle: (BuildContext context){return '新的说明';},

    //任务管理器的标题背景颜色
    color: Colors.yellow,

    //主题
    theme: ThemeData(
      primarySwatch: Colors.red, 
      brightness: Brightness.light
    ),

    //暗主题
    darkTheme: ThemeData(
      primarySwatch: Colors.yellow, 
      brightness: Brightness.dark
    ),
    // locale: ,
    // localizationsDelegates: ,
    // localeListResolutionCallback: ,
    // localeResolutionCallback: ,
    supportedLocales :  <Locale>[
      const Locale('en', 'US'),
      const Locale('fi', 'FI'),
    ],
    // debugShowMaterialGrid: false,
    // showPerformanceOverlay: false: ,
    // checkerboardRasterCacheImages: false,
    // checkerboardOffscreenLayers: false,
    // showSemanticsDebugger: false,
    // debugShowCheckedModeBanner: true,
  ));
}






class MyNavigatorObserver extends NavigatorObserver {
  @override
  void didPush(Route route, Route previousRoute) {
    // 当调用Navigator.push时回调
    super.didPush(route, previousRoute);
    //可通过route.settings获取路由相关内容
    print(route.settings);
    print(previousRoute);
  }

  @override
  void didPop(Route route, Route previousRoute) {
    // 当调用Navigator.pop时回调
    super.didPop(route, previousRoute);
    print(route);
    //route.currentResult获取返回内容
    print(previousRoute);
  }

  @override
  void didRemove(Route route, Route previousRoute) {
    // 当调用Navigator.Remove时回调
    super.didRemove(route, previousRoute);
    print(route);
    print(previousRoute);
  }
}

效果图

完整代码

查看完整代码