App 级别组件

App 级别组件是 Flutter 应用的基础框架组件，用于构建应用的整体结构、导航系统和主题配置。

核心概念：App 级别组件定义了应用的整体架构，包括入口点、路由管理、主题设置等，是每个 Flutter 应用的基础。

MaterialApp

MaterialApp 是 Material Design 应用的根组件，提供了完整的 Material Design 风格支持。

📱 渲染效果预览

MaterialApp

My App

首页内容

MaterialApp(
  title: 'My App',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: HomePage(),
  routes: {
    '/': (context) => HomePage(),
    '/detail': (context) => DetailPage(),
  },
)
主要属性：
  • title：应用标题
  • theme：主题配置
  • home：首页组件
  • routes：路由表
  • initialRoute：初始路由
  • debugShowCheckedModeBanner：是否显示调试标签

CupertinoApp

CupertinoApp 是 iOS 风格应用的根组件，提供了 iOS 原生外观和感觉。

📱 渲染效果预览
← Navigation Bar

首页内容

CupertinoApp(
  title: 'My App',
  theme: CupertinoThemeData(
    primaryColor: CupertinoColors.systemBlue,
  ),
  home: HomePage(),
  routes: {
    '/': (context) => HomePage(),
    '/detail': (context) => DetailPage(),
  },
)

Scaffold

Scaffold 是 Material Design 的页面布局组件，提供了应用页面的基本结构。

📱 渲染效果预览
AppBar

页面内容

+
Scaffold(
  appBar: AppBar(
    title: Text('My Page'),
  ),
  body: Center(
    child: Text('Page Content'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  drawer: Drawer(
    child: ListView(
      children: [
        DrawerHeader(
          child: Text('Menu'),
        ),
        ListTile(
          title: Text('Item 1'),
          onTap: () {},
        ),
      ],
    ),
  ),
)

Navigator 管理应用的路由栈，用于页面之间的导航。

📱 渲染效果预览
HomePage 当前
DetailPage push 
// 导航到新页面
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailPage(),
  ),
);

// 返回上一页
Navigator.pop(context);

// 替换当前页面
Navigator.pushReplacement(
  context,
  MaterialPageRoute(
    builder: (context) => NewPage(),
  ),
);

Routes

Routes 定义了应用的路由表，用于管理页面路径和对应的页面组件。

// 定义路由表
final routes = {
  '/': (context) => HomePage(),
  '/detail': (context) => DetailPage(),
  '/settings': (context) => SettingsPage(),
};

// 使用命名路由导航
Navigator.pushNamed(context, '/detail');

// 带参数路由
Navigator.pushNamed(
  context,
  '/detail',
  arguments: {'id': 123},
);

Theme

Theme 定义了应用的主题样式，包括颜色、字体、形状等。

ThemeData(
  primarySwatch: Colors.blue,
  scaffoldBackgroundColor: Colors.white,
  cardColor: Colors.white,
  dividerColor: Colors.grey[300],
  textTheme: TextTheme(
    headline1: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
    bodyText1: TextStyle(fontSize: 16),
  ),
  buttonTheme: ButtonThemeData(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
)

Localizations

Localizations 用于应用国际化，支持多语言。

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('zh', 'CN'),
    const Locale('en', 'US'),
  ],
  locale: const Locale('zh', 'CN'),
)
最佳实践：
  • 使用 MaterialApp 或 CupertinoApp 作为应用根组件
  • 配置统一的主题样式，保持应用一致性
  • 使用命名路由管理页面导航
  • 实现国际化支持多语言
  • 合理使用 Scaffold 构建页面结构