devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

3、Flutter项目搭建_创建flutter项目

作者：繁依Fanyi0 | 2024-03-26 22:51:12

赞

踩

创建flutter项目

一、搭建项目

1.1 搭建空壳项目

  • 接上篇的项目搭建、本篇将继续搭建各个界面.
  • 当BottomNavigationBar搭建起来后,在各个界面,没有显示对应的元素,因此我们在包含它的Scaffold中,添加body,这样让每个界面撑起来.每次点击就切换对应的界面.
    • 那么我们创建一个_RootPageState中的私有成员列表_pages,用来存放每个界面的Scaffold界面视图.
    • 在取值时通过currentIndex,获取列表中每个界面的视图._pages[_currentIndex] ;填充在总的Scaffold中.
  1. class _RootPageState extends State<RootPage> {
  2.     final List<Widget>_pages = [Scaffold(
  3.       appBar: AppBar(title: Text("微信"),),
  4.       body: const Center(child: Text("微信页面"),),
  5.     ), Scaffold(
  6.       appBar: AppBar(title: Text("通讯录"),),
  7.       body: const Center(child: Text("通讯录界面"),),
  8.     ), Scaffold(
  9.       appBar: AppBar(title: Text("发现"),),
  10.       body: const Center(child: Text("发现界面"),),
  11.     ), Scaffold(
  12.       appBar: AppBar(title: Text("我"),),
  13.       body: const Center(child: Text("我的界面"),),
  14.     )];
  15.     //6.设置当前BarItems的默认选中Item, 当某一个被选中的时候,这个index值会发生变化.
  16.     int _currentIndex = 0;
  17.     @override
  18.     Widget build(BuildContext context) {
  19.       return  Container(
  20.         child: Scaffold(
  21.           body: _pages[_currentIndex],
  22.           //2.bottomNavigationBar相当于iOS中的TabBar
  23.           bottomNavigationBar: BottomNavigationBar(...),              
  24.           ),
  25.         );
  26.     }
  27. }
  • 填充之后,效果大概如下

1.2 替换填充的界面

  • 在lib文件夹下创建一个pages文件夹Directory,用来存放各个界面.
    • 依次创建chat_page、friends_page、discover_page、mine_page文件.为四个主界面
  • 在chat_page文件中创建一个ChatPage组件
  1. import 'package:flutter/material.dart';
  2.  
  3. class ChatPage extends StatefulWidget {
  4.   const ChatPage({Key? key}) : super(key: key);
  5.   @override
  6.   State<ChatPage> createState() => _ChatPageState();
  7. }
  8. class _ChatPageState extends State<ChatPage> {
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     return Scaffold(
  12.       appBar: AppBar(
  13.         title: const Text("通讯录"),
  14.       ),
  15.       body: const Center(child: 
  16.         Text("通讯录界面"),
  17.       ),
  18.     );
  19.   }
  20. }
  • 来到rootpage中, 首先导入chat_page文件,
  • 然后将_pages中的第一个界面"微信"界面替换为ChatPage.
  1. import 'package:wechat_demo/page/chat_page.dart';
  2. ....
  3. final List<Widget>_pages = [ChatPage(),...];
  4. ....

按照上述方法、依次替换_pages中的其他界面

final List<Widget>_pages = [ const ChatPage(), const FriendsPage(), const DiscoverPage(), const MinePage() ];

1.3 遗留问题

1. 当我们点击NavigationBarItem的时候会存在灰色的水波纹动画,以及高亮的颜色问题

 

    • 这个问题属于Material中主题自带的控件特性.那么就需要来到main.dart中,设置主题的地方修改它的特性.
  1. import 'package:flutter/material.dart';
  2. import 'rootpage.dart';
  3. void main() => runApp(MyApp());
  4. class MyApp extends StatelessWidget {
  5.   const MyApp({super.key});
  6.   @override
  7.   Widget build(BuildContext context) {
  8.     return MaterialApp(
  9.       title: "Flutter Demo",
  10.       theme: ThemeData(
  11.           primarySwatch: Colors.blue,
  12.           //1.高亮颜色问题
  13.           highlightColor: Color.fromRGBO(1, 0, 0,0.0),
  14.           //2.点击后水波纹动画颜色.
  15.           splashColor: Color.fromRGBO(1, 0, 0,0.0),
  16.       ),
  17.       home: RootPage(),
  18.     );}
  19. }

2.点击后字体变大

    • 这个问题属于NavigationBar中的选中文字大小,来到rootpage中,修改选中文字大小属性.默认12.0
  1.    bottomNavigationBar: BottomNavigationBar(
  2.     //选中的文字大小
  3.     selectedFontSize: 12.0,
  4.     //4.如果没有设置相应的type、那么默认情况下BarItem设置的都为白色.设置BarType之后默认为蓝色
  5.     type: BottomNavigationBarType.fixed,
  6.     //5.设置fixed类型后,需要添加一个填充色.这样一个TabBar就设置完毕了.
  7.     fixedColor: Colors.green,
  8.     ...),

二、本地资源文件配置

2.1 安卓中应用名称的修改

  • 来到android文件夹下 app --> src --> main --> AndroidManifest.xml

android:label="微信"

2.2 安卓中图片资源放在哪里?

  • 如图所示:

  • mdpi: 对应1x 像素的图片
  • hdpi: 对应 1.5x像素的图片
  • xhdpi: 对应 2x像素图片
  • xxhdpi: 对应3x像素图片
  • xxxhdpi: 对应4x像素图片

2.3 将Demo的应用图标放入Android指定位置

  • 将App图标的2x和3x图片分别拖入两个文件夹中.并且改名为app_icon

  • 在AndroidManifest.xml文件中配置图标名称

2.4 安卓的启动图

  • 在drawable中,launch_background.xml是启动图的配置,将启动图放入1x文件夹下,打开注释.修改xml中启动图的名字与图片名称匹配

  • 因为放在drawable中不显示,猜测版本问题,放在drawable-21中正常显示.

2.5 在安卓模拟器上验证

  • 打开项目目录对应的终端,执行 flutter run,选择安卓模拟器设备
  1. ~/wechat_demo2 $ flutter run
  2. Multiple devices found:
  3. sdk gphone x86 (mobile)    • emulator-5554                        • android-x86    • Android 11 (API 30)
  4. (emulator)
  5. iPhone 14 Pro Max (mobile) • 8702647C-F052-4CA5-A758-C7BD3CD49057 • ios            •
  6. com.apple.CoreSimulator.SimRuntime.iOS-16-2 (simulator)
  7. macOS (desktop)            • macos                                • darwin-x64     • macOS 12.6.3 21G419
  8. darwin-x64
  9. Chrome (web)               • chrome                               • web-javascript • Google Chrome
  10. 112.0.5615.137
  11. [1]: sdk gphone x86 (emulator-5554)
  12. [2]: iPhone 14 Pro Max (8702647C-F052-4CA5-A758-C7BD3CD49057)
  13. [3]: macOS (macos)
  14. [4]: Chrome (chrome)
  15. Please choose one (To quit, press "q/Q"): 1
  16.  
  17. Using hardware rendering with device sdk gphone x86. If you notice graphics artifacts, consider enabling
  18. software rendering with "--enable-software-rendering".
  19. Launching lib/main.dart on sdk gphone x86 in debug mode...
  20. Running Gradle task 'assembleDebug'...    
  21. ✓  Built build/app/outputs/flutter-apk/app-debug.apk.
  22. Installing build/app/outputs/flutter-apk/app-debug.apk...         93.0s⣯
  23. Syncing files to device sdk gphone x86...                        1,848ms
  24. 声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/320163
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。