Flutter学习-11- 微信项目学习-项目搭建

「这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战」。

• 关于我们flutter学习以一个微信项目作为例子学习flutter中的一些组件和思路。
  微信是我们每天都会使用的，我们以微信作为练习项目进行练习flutter的一些UI布局。

1. bottomNavigationBar

在Scaffold中我们之前使用过appbar也就是导航栏，同时它又个底部导航栏类似我们iOS中tabbar。

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(

        appBar: AppBar(
          title: Text("wechant_demo"),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.chat),label: '首页'),
            BottomNavigationBarItem(icon: Icon(Icons.bookmark),label: '通讯录'),
            BottomNavigationBarItem(icon: Icon(Icons.history),label: '发现'),
            BottomNavigationBarItem(icon: Icon(Icons.person),label: '我的'),
          ],

        ),

      ),
    );
  }
}

BottomNavigationBar里面的itmes是必填的，

item为BottomNavigationBarItem，其中icon图标为必填，之前使用title已经废弃了改为label作为标题 我们运行下效果，一开始以为没事设置上，但是仔细看是设置上的。

我么去除一个我的item，就显示出来了，默认选中第一个，还没设置切换的状态。

因为默认底部样式是3个选中是蓝色，超过3个后就是白色，我们可以自己设置一下样式和选中的颜色

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  fixedColor: Colors.green,
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.chat),label: '首页'),
    BottomNavigationBarItem(icon: Icon(Icons.bookmark),label: '通讯录'),
    BottomNavigationBarItem(icon: Icon(Icons.history),label: '发现'),
    BottomNavigationBarItem(icon: Icon(Icons.person),label: '我的'),
  ],

),

效果：

1.2 onTap

我们要实现这个切换的事件，页面的切换 bottomNavigationBar中有一个currentIndex属性，就是选中哪个item进行切换我们根据这个进行切换。ontap点击事件，回返回哪个item下标。

我么只要切换currentIndex为当前的点击index就可以做到切换页面就好。 这里我么把类似我们iOS中的根视图，抽出来作为一个类，同时改为stateful的widget

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

  @override
  _rootPageState createState() => _rootPageState();
}

class _rootPageState extends State<rootPage> {
  @override
  int _currentIndex = 0;
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(

        appBar: AppBar(
          title: Text("wechant_demo"),
        ),
        bottomNavigationBar: BottomNavigationBar(
          onTap: (index){
            setState(() {
              _currentIndex = index;
            });
          },
          type: BottomNavigationBarType.fixed,
          fixedColor: Colors.green,
          currentIndex: _currentIndex,
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.chat),label: '首页'),
            BottomNavigationBarItem(icon: Icon(Icons.bookmark),label: '通讯录'),
            BottomNavigationBarItem(icon: Icon(Icons.history),label: '发现'),
            BottomNavigationBarItem(icon: Icon(Icons.person),label: '我的'),
          ],

        ),

      ),
    );
  }
}

这样我么通过setState()就可以刷新当前所选的item了。

1.3 页面设置

我们分别创建4个页面对应底部导航栏的4个item对应的页面

我们简单的写个标题

import 'package:flutter/material.dart';

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

  @override
  _ChatPageState createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        body: Center(

          child: Text('聊天页面')
        ),
      ),
    );
  }
}

我们把我们创建的4个页面放到一个数组中，通过item点击切换index，取出对应的页面放入scaffold的body中，相当于内容视图不断的切换。

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,
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.chat),label: '首页'),
            BottomNavigationBarItem(icon: Icon(Icons.bookmark),label: '通讯录'),
            BottomNavigationBarItem(icon: Icon(Icons.history),label: '发现'),
            BottomNavigationBarItem(icon: Icon(Icons.person),label: '我的'),
          ],

        ),

      ),
    );
  }
}

1.4 颜色字体设置

我么在MaterialApp中我们可以设置标题

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'wechatDemo',
      home: rootPage(),
    );
  }

主要是给android的app使用 。
我们微信点击的时候没有这个水波文的动画效果，我们也可以在MaterialApp中设置主题色

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'wechatDemo',
      theme: ThemeData(
        highlightColor:const Color.fromRGBO(1, 0, 0, 0.0),
        splashColor: const Color.fromRGBO(1, 0, 0, 0.0),
      ),
      home: rootPage(),
    );
  }
}

highlightColor表示选中的颜色，我们设置透明色，splashColor为松开时候的颜色我们也设置为透明色

theme: ThemeData(
  highlightColor:const Color.fromRGBO(1, 0, 0, 0.0),
  splashColor: const Color.fromRGBO(1, 0, 0, 0.0),
),

我们也可以设置主题色primarySwatch

primarySwatch: Colors.grey

之前我们选中的时候有个字体放大的效果，但是实际上微信是不需要的我们直接设置selectedFontSize

bottomNavigationBar: BottomNavigationBar(
  onTap: (index){
    setState(() {
      _currentIndex = index;

    });
  },

  type: BottomNavigationBarType.fixed,
  fixedColor: Colors.green,
  currentIndex: _currentIndex,
  selectedFontSize: 12,
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.chat),label: '首页'),
    BottomNavigationBarItem(icon: Icon(Icons.bookmark),label: '通讯录'),
    BottomNavigationBarItem(icon: Icon(Icons.history),label: '发现'),
    BottomNavigationBarItem(icon: Icon(Icons.person),label: '我的'),
  ],

),

默认选中是14号字体，不选中12.