flutter 4

搭建项目 Wechat

• 1.底部栏

创建一个root_page.dart文件存放KRootPage

import 'package:flutter/material.dart';
import 'package:wechat_demo/chat_page.dart';
import 'package:wechat_demo/friends_page.dart';
import 'package:wechat_demo/discover_page.dart';
import 'package:wechat_demo/mine_page.dart';


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

  @override
  State<KRootPage> createState() => _KRootPageState();
}

class _KRootPageState extends State<KRootPage> {
  // ignore: prefer_final_fields
  int _currentIndex = 1;
  final List _pages = const [ChatPage(),FriendsPage(),DiscoverPage(),MinePage()];
  void _onTap(a){
    _currentIndex = a;
    setState((){});
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        body: _pages[_currentIndex],
        // 底部bar
        bottomNavigationBar: BottomNavigationBar(
          // 系统初始化是12.0(这样设置底部bar字体不会变大)
          selectedFontSize: 12.0,
          // 选项
          onTap: _onTap,
          type: BottomNavigationBarType.fixed,
          // 默认选中项
          currentIndex: _currentIndex,
          // 设置选中的颜色
          fixedColor: Colors.green,
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.chat),label: '微信'),
            BottomNavigationBarItem(icon: Icon(Icons.bookmark),label: '通讯录'),
            BottomNavigationBarItem(icon: Icon(Icons.history),label: '发现'),
            BottomNavigationBarItem(icon: Icon(Icons.person),label: '我的')
          ],
        ),
      ),
    );
  }
}

• 2.创建4个dart文件
• chat_page.dart ChatPage
• friends_page.dart FridensPage
• discover_page.dart DiscoverPage
• mine_page.dart MinePage

ChatPage

class ChatPage extends StatefulWidget {
  const ChatPage({Key? key}) : super(key: key);
  @override
  State<ChatPage> createState() => _ChatPageState();
}
class _ChatPageState extends State<ChatPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('微信',style: TextStyle(color: Colors.black),)),
      body: const Center(
        child: Text('微信页面'),
      ),
    );
  }
}

FriendsPage

class FriendsPage extends StatefulWidget {
  const FriendsPage({Key? key}) : super(key: key);
  @override
  State<FriendsPage> createState() => _FriendsPageState();
}
class _FriendsPageState extends State<FriendsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('通信录',style: TextStyle(color: Colors.black),)),
      body: const Center(
        child: Text('通讯录页面'),
      ),
    );
  }
}

DiscoverPage

class DiscoverPage extends StatefulWidget {
  const DiscoverPage({Key? key}) : super(key: key);
  @override
  State<DiscoverPage> createState() => _DiscoverPageState();
}
class _DiscoverPageState extends State<DiscoverPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('发现',style: TextStyle(color: Colors.black),)),
      body: const Center(
        child: Text('发现页面'),
      ),
    );
  }
}

MinePage

class MinePage extends StatefulWidget {
  const MinePage({Key? key}) : super(key: key);
  @override
  State<MinePage> createState() => _MinePageState();
}
class _MinePageState extends State<MinePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('我的',style: TextStyle(color: Colors.black),)),
      body: const Center(
        child: Text('我的页面'),
      ),
    );
  }
}

本地资源文件配置

• 主要介绍android,ios已经很熟悉了

• 查找 android / app / src / main / res / (图标不能用驼峰命名,一律小写加下划线)

• Icon图片配置

  
  

• 启动图片配置

flutter项目中图标的配置

• 1.创建一个images的文件夹，把所有图片都放里面,然后放在flutter工程下方 如:下图

• 2.配置pubspec.yaml
  • 图片 或 三方库 都在这里配置

把images 放在 assets，对输入格式要求非常严格，一定要对齐好，不能或多或少一个空格

搞定了 接下来更换底部bar的图标

更换底部bar的图标

 BottomNavigationBarItem(icon: Image(width: 20,height: 20,image: AssetImage('images/tabbar_chat.png')),activeIcon: Image(width: 20,height: 20,image: AssetImage('images/tabbar_chat_hl.png')),label: '微信'),

            BottomNavigationBarItem(icon: Image(width: 20,height: 20,image: AssetImage('images/tabbar_friends.png')),activeIcon: Image(width: 20,height: 20,image: AssetImage('images/tabbar_friends_hl.png')),label: '通讯录'),

            BottomNavigationBarItem(icon: Image(width: 20,height: 20,image: AssetImage('images/tabbar_discover.png')),activeIcon: Image(width: 20,height: 20,image: AssetImage('images/tabbar_discover_hl.png')),label: '发现'),

            BottomNavigationBarItem(icon: Image(width: 20,height: 20,image: AssetImage('images/tabbar_mine.png')),activeIcon: Image(width: 20,height: 20,image: AssetImage('images/tabbar_mine_hl.png')),label: '我的')

来张图片，憋笑

flutter 篇章就分享到这里了,任何技术都有相应的价值保质期，这也是技术分享的基本素养，希望同行们找到满意的坑。。。