Flutter 开源鸿蒙实战 | 极简记账本 Day1项目初始化 底部导航框架搭建欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net系列项目极简记账本6 天完结环境Flutter 3.13 Dart 3.0 鸿蒙适配难度新手友好・可直接运行 本文导读必看本文是极简记账本系列第一篇目标✅ 新建 Flutter 干净项目✅ 配置依赖shared_preferences✅ 搭建4 Tab 底部导航首页 / 记账 / 统计 / 我的✅ 鸿蒙风格基础布局可直接运行✅ 全程无冗余代码适合系列迭代适合人群Flutter 初学者、需要快速完成项目的学生、想练手跨平台 鸿蒙适配的开发者。 一、创建项目 目录说明1.1 创建项目打开终端执行flutter create ledger_app cd ledger_app1.2 项目目录精简版ledger_app/ ├── lib/ │ └── main.dart # 入口 底部导航 ├── pubspec.yaml # 依赖配置⚙️ 二、配置 pubspec.yaml完整可直接复制name: ledger_app description: 极简记账本 - Flutter鸿蒙实战项目 version: 1.0.01 environment: sdk: 3.0.0 4.0.0 dependencies: flutter: sdk: flutter shared_preferences: ^2.2.3 dev_dependencies: flutter_test: sdk: flutter flutter_lints: ^2.0.0 flutter: uses-material-design: true保存后执行flutter pub get 三、main.dart 完整代码可直接运行import package:flutter/material.dart; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); override Widget build(BuildContext context) { return MaterialApp( title: 极简记账本, debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.teal, useMaterial3: true, ), home: const MainBottomPage(), ); } } // 底部导航主页面 class MainBottomPage extends StatefulWidget { const MainBottomPage({super.key}); override StateMainBottomPage createState() _MainBottomPageState(); } class _MainBottomPageState extends StateMainBottomPage { int _currentIndex 0; // 四个子页面 final ListWidget _pageList const [ HomePage(), AddBillPage(), StatisticPage(), MinePage(), ]; override Widget build(BuildContext context) { return Scaffold( body: _pageList[_currentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, type: BottomNavigationBarType.fixed, selectedItemColor: Colors.teal, unselectedItemColor: Colors.grey, onTap: (index) { setState(() { _currentIndex index; }); }, items: const [ BottomNavigationBarItem( icon: Icon(Icons.home_outlined), label: 首页, ), BottomNavigationBarItem( icon: Icon(Icons.add_circle_outline), label: 记账, ), BottomNavigationBarItem( icon: Icon(Icons.bar_chart_outlined), label: 统计, ), BottomNavigationBarItem( icon: Icon(Icons.person_outlined), label: 我的, ), ], ), ); } } // 首页 class HomePage extends StatelessWidget { const HomePage({super.key}); override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text(首页)), body: const Center(child: Text(首页页面 - 待开发)), ); } } // 记账页面 class AddBillPage extends StatelessWidget { const AddBillPage({super.key}); override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text(新增记账)), body: const Center(child: Text(记账页面 - 待开发)), ); } } // 统计页面 class StatisticPage extends StatelessWidget { const StatisticPage({super.key}); override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text(收支统计)), body: const Center(child: Text(统计页面 - 待开发)), ); } } // 我的页面 class MinePage extends StatelessWidget { const MinePage({super.key}); override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text(个人中心)), body: const Center(child: Text(我的页面 - 待开发)), ); } } 四、运行效果配图占位你截图后替换即可启动后默认进入首页底部 4 个 Tab 可正常点击切换整体风格简约适配鸿蒙 / 安卓 /iOS无报错、无警告热重载正常✅ 五、Day1 完成总结今天完成✅ 创建独立项目 ledger_app✅ 配置依赖shared_preferences✅ 搭建 4 Tab 底部导航框架✅ 四个页面骨架完成可切换✅ 代码干净、无冗余、可直接运行明日预告Day2记账页完善收支选择器、金额输入、分类选择本地存储用 shared_preferences 保存账单添加账单功能点击保存即可写入本地 六、系列推荐后续文章Day2记账页面 本地存储已更新Day3首页账单列表 当月收支统计Day4统计页饼图 日期筛选Day5个人中心 数据重置Day6优化 鸿蒙适配 项目总结