Flutter学习-12- 微信项目学习-资源配置

667 阅读2分钟

「这是我参与11月更文挑战的第10天,活动详情查看:2021最后一次更文挑战」。
前言:我么上一篇搭建了项目,但是使用的是系统的图片,那么怎么添加我么自己的icon以及启动图呢。

1. 配置icon和启动图

app启动需要appIcon和启动图这里介绍下iOS和android的设置

1.1 iOS设置

image.png 我们打开项目点击iOS的workspace 使用Xcode打开

image.png 根据尺寸设置相对应的图标和启动图

image.png

需要根据苹果要求放入对应的启动图

image.png 设置项目名称

image.png

1.2 android设置

image.png 我么在android的文件夹中找到srcres中的xml文件 ,我么选择这个labelapp的名字,icon对应的是图标,我们先设置这个图标。启动图片不用写png

image.png 分别对应的一倍图,2倍图,3倍图,高清图。

我么找到设置启动页页面 image.png 我们导入启动图片

image.png

2. 添加图片

我们直接把图片的文件夹拷贝到项目中

image.png 我们之后在yaml中导入

image.png 我们打开后运行下报错

image.png yaml中对格式要求很重要,我们没有对齐报错了。

image.png 我们直接导入这个images文件夹

- images/

我们去item中设置

class _rootPageState extends State<rootPage> {
  @override
  int _currentIndex = 0;
  List<Widget> _pages = [ChatPage(),FriendPage(),DiscoverPage(),MinePage()];
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        body: _pages[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          onTap: (index){
            setState(() {
              _currentIndex = index;

            });
          },

          type: BottomNavigationBarType.fixed,
          fixedColor: Colors.green,
          currentIndex: _currentIndex,
          selectedFontSize: 12,
          items: [
            BottomNavigationBarItem(
                icon: Image.asset('images/tabbar_chat.png', height: 20, width: 20,),
                activeIcon: Image.asset('images/tabbar_chat_hl.png', height: 20, width: 20,),
                label: "微信"),
            BottomNavigationBarItem(
                icon:Image.asset('images/tabbar_friends.png',width: 20,height: 20,),
                activeIcon: Image.asset('images/tabbar_friends_hl.png',width: 20,height: 20,),
                label: '通讯录'),
            BottomNavigationBarItem(
                icon:Image.asset('images/tabbar_discover.png',width: 20,height: 20,),
                activeIcon: Image.asset('images/tabbar_discover_hl.png',width: 20,height: 20,),
                label: '发现'),
            BottomNavigationBarItem(
                icon: Image.asset("images/tabbar_mine.png",width: 20,height: 20,),
                activeIcon: Image.asset('images/tabbar_mine_hl.png',width: 20,height: 20,),
                label: '我的'),
          ],

        ),

      ),
    );
  }
}

image.png