玩Android客户端(1)——搭建主页面

最近在学Flutter，想着画点时间做个app，就做玩Android，可以利用现有的APi进行操作。 第一步：搭建主页面，如下：

主要包括几部分：

• AppBar，包含Drawaer，可以打开
• BottomNavigationBar：底部导航栏，切换时body内容变换
• 图标第三个使用了三方图标，后面重点说下如何使用第三方Icon；如果使用Image作为Icon，那么点击的变色不会存在，而使用Icon就也会跟着变色。

页面结构

主页面是个StatefulWidget，根据下面的tab点击切换index，body根据index加载不同的内容。

使用三方图标

1. 从https://www.iconfont.cn/出下载iconfont.ttf文件，参考后面第一篇文章；
2. 在项目中创建fonts目录，将iconfont.ttf置于该目录下；
3. 在pubspec.yaml中配置font，如下：

 fonts:     - family: AliIcon       fonts:         - asset: fonts/iconfont.ttf

4. 在lib目录下创建ali_icon文件，其内容如下：

import 'package:flutter/widgets.dart';class AliIcons {  static const IconData wechat = const _AliIconData(0xe679);}class _AliIconData extends IconData {  const _AliIconData(int codePoint)      : super(codePoint, fontFamily: 'AliIcon');}

这样就可以像使用Icon(Icons.like)等一样使用Icon了。

5. 使用

    BottomNavigationBarItem(icon: Icon(AliIcons.wechat), title: Text('公众号')),

关于微信公众号对应的0xe679怎么得来的，可以参考后面的第一篇文章。

关于代码，参考该分支代码： https://github.com/wangli135/wan_android/tree/cb81573ee2ff803d12cc3a28fa61af471bb5c4e7

参考

• https://blog.csdn.net/a10615/article/details/81393194
• https://segmentfault.com/a/1190000017978633