一、类微信界面设计

　　ps：由于flutter框架的便捷性且目前广泛应用于各大APP的开发，因此开发APP我想选用以dart为开发语言的flutter框架。

• 功能说明

1. 完成APP的初步导航栏实现
2. 点击导航栏实现相应页面的跳转。

• 页面展示
• 代码分析：

1. 主函数

   void main() {
     runApp(MyApp()); // runApp里面传入widget，为了增加可复用性将MyApp封装成一个类
   }

2. MyApp类

   class MyApp extends StatelessWidget { // 封装一个类
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: "糖盒子", // APP的名字
         theme: ThemeData(
             primaryColor: Colors.purple, // APP主题颜色
             highlightColor: Colors.transparent, // 去掉主题默认的水波纹和高亮效果
             splashColor: Colors.transparent // 去掉主题默认的水波纹和高亮效果
         ),
         home: MyStackPage(), // 调用封装的MyStackPage()
       );
     }
   }

3. 导航代码

　　由于导航页面需要点击，有动态效果，故使用StatefulWidget（用于有动态效果的widget）

class MyStackPage extends StatefulWidget { // 创建MyStackPage 
  @override
  State<StatefulWidget> createState() {
    return MyStatePageState();  // 调用封装的MyStatePageState()
  }

　　写一个state类。

class MyStatePageState extends State<MyStackPage> {
  var _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
           ......
  }

　　首先，可以将导航栏封装成一个单独的组件，新建components文件夹，并在文件夹下新建tabbar_item.dart（不建议驼峰命名）文件：

class TabBarItem extends BottomNavigationBarItem {
  TabBarItem(String iconName, String title):
      super(
        icon: Image.asset("assets/image/$iconName.png",width: 30,),
        activeIcon: Image.asset("asssts/image/${iconName}_active.png",width: 30,),
        label: "$title"
      );
}

　　再在main.dart文件中调用TabBarItem组件，其中onTap函数用来控制导航栏的点击索引使其点击呈现active状态：

bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,// 查看bottomNavigationBar源码发现要传一个Widget，则传BottomNavigationBar
        type: BottomNavigationBarType.fixed, // 将导航栏的默认动效关闭
        items: [ // 查看items源码发现要传入BottomNavigationBarItem的数组
          TabBarItem("candy", "sweety"),
          TabBarItem("pu", "ilike"),
          TabBarItem("star", "star"),
        ],
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),

　　用IndexedStack组件实现点击切换页面操作：

body: IndexedStack(
        index: _currentIndex,
        children: [
          Sweety(),
          Pu(),
          Star()
        ],
      ),

　　其中Sweety(),Pu(),Star()分别是三个封装的页面：

 　　页面代码如下：

import 'package:flutter/material.dart';

class Sweety extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("小甜饼"),
      ),
      body: Center(
        child: Text("小甜饼",style: TextStyle(fontSize: 50),),
      ),
    );
  }
}

　　至此，基本实现类微信布局结构。

• 源码仓库地址（喜欢就来个star吧~）

https://gitee.com/cean_seven/sweet_app.git