Flutter APP入口及主页
2025-09-29 10:07
Flutter
0
0
0
0
标题录入
封面图
在 Flutter 中,**APP 的入口**和**主页(首页)**是通过 `main.dart` 文件中的 `main()` 函数和 `MaterialApp` 或 `CupertinoApp` 来定义的。下面是一个标准的 Flutter APP 入口和主页结构示例: --- ## ✅ 1. Flutter App 的入口(main.dart) Flutter 应用的入口点是 `main.dart` 文件中的 `main()` 函数,通常如下所示: ```dart import 'package:flutter/material.dart'; import 'home_page.dart'; // 导入主页 void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: HomePage(), // 设置主页 ); } } ``` > ✅ `MaterialApp` 是 Flutter 中用于构建 Material Design 风格应用的基础组件。 --- ## ✅ 2. 主页(HomePage)示例 你可以在 `home_page.dart` 文件中创建一个简单的主页: ```dart import 'package:flutter/material.dart'; class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Home Page'), ), body: Center( child: Text('Welcome to the Home Page!'), ), ); } } ``` --- ## 📁 文件结构示例 ``` lib/ ├── main.dart └── home_page.dart ``` --- ## 🔄 更复杂的导航(可选) 如果你的应用有多个页面,可以使用 `Navigator` 或 `BottomNavigationBar` 实现多页面切换。 例如,使用 `BottomNavigationBar`: ```dart class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: BottomNavigation(), ); } } class BottomNavigation extends StatefulWidget { @override _BottomNavigationState createState() => _BottomNavigationState(); } class _BottomNavigationState extends State<BottomNavigation> { int _currentIndex = 0; final List<Widget> _pages = [ HomePage(), SecondPage(), ]; @override Widget build(BuildContext context) { return Scaffold( body: _pages[_currentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, onTap: (index) { setState(() { _currentIndex = index; }); }, items: [ BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'), BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'), ], ), ); } } ``` --- ## 🧾 总结 | 名称 | 说明 | |------------|------------------------------| | `main.dart` | Flutter 应用的入口文件 | | `MyApp` | 使用 `MaterialApp` 包装应用 | | `home` | 指定应用的首页 | | `Scaffold` | 提供基本的 Material 设计布局 | --- 如果你有更具体的场景(比如使用 `CupertinoApp`、`Navigator`、`PageRoute` 等),我可以进一步帮你扩展。需要吗?
上一篇:
Flutter APP代码结构
标题录入,一次不能超过6条
有一种被监视的感觉?
T:0.043847s,M:125.47 KB
返回顶部
留言
留言
评论