Flutter入门（五）微信项目搭建

通过前面几篇对Flutter的了解我相信大家对Flutter的语法以及环境配置都已经掌握. 个人认为学习一门新的语言(快速高效学习) 一定是通过实践,最好的就是带着项目实操,如果你能够仿写下一个项目那么基本就差不多了! 这里我就用微信项目作为本次案例仿写,希望大家喜欢!

微信项目搭建

主要完成底部导航栏功能

1.主APP

首先创建一个根页面的入口

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WeChat',
      //设置主题信息
      theme: ThemeData(
        highlightColor: const Color.fromRGBO(1, 0, 0, 0),
        splashColor: const Color.fromRGBO(1, 0, 0, 0),
        primaryColor: Colors.grey,
      ),
      home: MyHomePage(),
    );
  }
}

• highlightColor 高亮色设置
• splashColor 长按颜色设置
• MyHomePage根页面

2.根页面

根页面其实也可以叫做根控制器，根页面的配置基本和iOS的开发是一致的

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  List _pages = [
    ChatPage(),
    FriendsPage(),
    DiscoverPage(),
    MinePage()
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          fixedColor: Colors.green,
          elevation: 0.0,
          selectedFontSize: 12.0,
          currentIndex: _currentIndex,
          onTap: (index){
            setState(() {
              _currentIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(
                icon: Image(
                  image: AssetImage('images/tabbar_chat.png'),
                  height: 20,
                  width: 20,
              ),
              activeIcon: Image(
                image: AssetImage('images/tabbar_chat_hl.png'),
                height: 20,
                width: 20,
              ),
              label: '微信'
            ),
            BottomNavigationBarItem(
                icon: Image(
                  image: AssetImage('images/tabbar_friends.png'),
                  height: 20,
                  width: 20,
                ),
                activeIcon: Image(
                  image: AssetImage('images/tabbar_friends_hl.png'),
                  height: 20,
                  width: 20,
                ),
                label: '通讯录'
            ),
            BottomNavigationBarItem(
                icon: Image(
                  image: AssetImage('images/tabbar_discover.png'),
                  height: 20,
                  width: 20,
                ),
                activeIcon: Image(
                  image: AssetImage('images/tabbar_discover_hl.png'),
                  height: 20,
                  width: 20,
                ),
                label: '发现'
            ),
            BottomNavigationBarItem(
                icon: Image(
                  image: AssetImage('images/tabbar_mine.png'),
                  height: 20,
                  width: 20,
                ),
                activeIcon: Image(
                  image: AssetImage('images/tabbar_mine_hl.png'),
                  height: 20,
                  width: 20,
                ),
                label: '我'
            ),
          ],
        ),
        body: _pages[_currentIndex],
      ),
    );
  }
}

• 其中 class MyHomePage extends StatefulWidget 这样就能够动态调整也就所谓的状态管理
• 通过BottomNavigationBar来设置底部的四个按钮微信,通讯录,发现,我
• List _pages = [ChatPage(),FriendsPage(),DiscoverPage(),MinePage() ]; 设置一个数组来收集底部四个按钮所对应的页面
• _currentIndex跟踪当前点击的按钮为第几个,从而从_pages数组中取出相对应的页面显示，由于只是在内部使用所以这里设置为了私有属性
• onTap接收用户的点击事件，修改状态
• setState (){}修改完状态后需要更新UI的显示

到这里我们就完成了项目的主界面的搭建，是不是非常简单? 😸 flutter 谁用谁知道

3.启动页&图标设置

iOS设置

打开iOS工程 -> Runner -> 删掉原来 Flutter 的图标

Android 设置

• AndroidManifest.xml -> android:label="微信" 修改项目显示名称
• drawable -> launch_background

   <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/launch_image" />
    </item>

• pubspec.yaml 放开注释 方便后面工程里面的图标设置

  assets:
    - images/

Flutter设置

• 找到工程目录下的pubspec.yaml文件 -> assets:去掉注释 -> 在pubspec.yaml同级目录下创建和下文同名的文件夹(这里为了方便取名叫images) -> images文件夹中放入项目需要的图标

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/

下一篇: 微信项目发现页面