「这是我参与11月更文应战的第7天，活动详情检查：2021最后一次更文应战」

【Flutter】学习养成记，【程序员必备技术】

【Flutter】微信项目实战！

1. 写在前面

在上篇文章中介绍了Flutter中的Button组件，学了这么多根底组件了，该是实战验证一下学习效果了，那么今天就来个实战项目，建立一下微信的结构吧！

  • 【根底语法合集】

【Flutter】Dart中的var、final 和 const基本运用

【Flutter】Dart数据类型之num

【Flutter】Dart数据类型之String

【Flutter】Dart的数据类型list&Map(数组和字典)

【Flutter】Dart的办法与箭头函数

【Flutter】Dart的办法中的可选参数、办法作为参数传递

【Flutter】Dart中的匿名函数、闭包

【Flutter】Dart中的类和目标

【Flutter】Dart中的构造函数

【Flutter】Dart的工厂构造办法&单例目标&初始化列表

【Flutter】Dart的类办法和目标操作符

【Flutter】Dart中的承继

【Flutter】Dart中的抽象类和接口

【Flutter】Dart中的Mixins混入你知道是什么吗？

  • [根底组件合集]

【Flutter】根底组件【01】Text

【Flutter】根底组件【02】Container

【Flutter】根底组件【03】Scaffold

【Flutter】根底组件【04】Row/Column

【Flutter】根底组件【05】Image

【Flutter】根底组件【06】Icon

【Flutter】根底组件【07】Appbar

【Flutter】根底组件【08】BottomNavigationBar

【Flutter】根底组件【09】Button

2. 新建项目

  • 新建项目

挑选File -> New -> New Flutter Project新建一个 flutter 项目

【Flutter】微信项目实战【01】基本框架搭建

  • 挑选 Flutter App

【Flutter】微信项目实战【01】基本框架搭建

  • 设置项目名称为flutter_wechat
【Flutter】微信项目实战【01】基本框架搭建

3. main.dart

3.1 main函数

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      debugShowCheckedModeBanner: true,//去掉 debug 符号
      theme:ThemeData(
        primarySwatch: Colors.blue,//导航栏色彩
      ),
      home: RootPage(),
    );
  }
}
  • home: 相当于 OC 中的 UITabBarController，这是 APP 的骨架
  • debugShowCheckedModeBanner：去掉 debug的符号，设置 false就不展示
  • theme:主题的设置
【Flutter】微信项目实战【01】基本框架搭建
【Flutter】微信项目实战【01】基本框架搭建

3.2 创立根视图

  • 根视图RootPage设置，

先来创立一个文件root_page.dart，设置 tabbar

  • 新建 dart 文件

【Flutter】微信项目实战【01】基本框架搭建

3.3 设置BottomNavigationBar

  • bottomNavigationBar

在Scaffold组件里边有个特点bottomNavigationBar，这个便是相当于咱们 OC 中的 tabbar，它是承继自StatefulWidget。经过BottomNavigationBar的items来设置 4 个页面，用BottomNavigationBarItem来构造。

bottomNavigationBar: BottomNavigationBar(
        currentIndex: 0,
        fixedColor: Colors.green,
        type: BottomNavigationBarType.fixed,
        items: const [
          BottomNavigationBarItem(
              icon: Icon(Icons.message),
              label: '微信'),
          BottomNavigationBarItem(
              icon: Icon(Icons.bookmark),
              label: '通讯录'),
          BottomNavigationBarItem(
              icon: Icon(Icons.history),
              label: '发现'),
          BottomNavigationBarItem(
              icon: Icon(Icons.person_outline),
              label: '我'),
        ],
      )

3.4 BottomNavigationBar

BottomNavigationBar的一些特点介绍：

  • type：BottomNavigationBarItem的形式，BottomNavigationBarType是枚举，有fixed和shifting两种形式设置。
  • currentIndex:当时选中的是哪个 item，便是底部 4 个 item的切换选中的值，能够经过点击的办法切换改值
  • fixedColor：填充的色彩，item 的填充色彩

【Flutter】微信项目实战【01】基本框架搭建

3.5 创立微信页面

  • 微信界面

一个 BottomNavigationBarItem 对应的页面就相当于 OC 中的 UIViewController。

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  Scaffold(
      appBar: AppBar(
        title: const Text(
          '微信页面',
          style: TextStyle(color: Colors.black),
        ),
      ),
      body:const Center(
        child: Text('微信页面'),
      ),
    );
  }
}
  • BottomNavigationBarItem的切换

BottomNavigationBarItem的切换需求实现onTap 点击办法来进行切换。

//BottomNavigationBar 的点击事情
        onTap: (index) {
          print("index = $index");
          setState(() {
            _currentIndex = index;
          });
        },

在onTap办法的回调里边，能够拿到点击的 item 的值，就能够设置当时需求显现的页面时哪个，经过_currentIndex = index;来改动。

留意： 因为涉及到状况的改动，所以 Widget 有必要运用带状况的StatefulWidget，在回调办法里边，需求运用setState来设置状况的改动。

【Flutter】微信项目实战【01】基本框架搭建
【Flutter】微信项目实战【01】基本框架搭建

GitHub项目地址

4. 写在后面

关注我，更多内容继续输出

  • CSDN
  • 简书

喜欢就点个赞吧

觉得有收获的，能够来一波 保藏+关注，避免你下次找不到我

欢迎大家留言沟通，批评指正，转发请注明出处，谢谢支持！