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

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

「这是我参与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 App

新建项目

  • 设置项目名称为flutter_wechat
设置项目名称

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:主题的设置

3.2 创建根视图

  • 根视图RootPage设置,

先来创建一个文件root_page.dart,设置 tabbar

  • 新建 dart 文件

新建 dart 文件

3.3 设置BottomNavigationBar

  • bottomNavigationBar

Scaffold组件里面有个属性bottomNavigationBar,这个就是相当于我们 OC 中的 tabbar,它是继承自StatefulWidget。通过BottomNavigationBaritems来设置 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是枚举,有fixedshifting两种模式设置。
  • currentIndex:当前选中的是哪个 item,就是底部 4 个 item的切换选中的值,可以通过点击的方法切换改值
  • fixedColor:填充的颜色,item 的填充颜色

bottomNavigationBar设置

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来设置状态的改变。

设置点击事件 微信框架

GitHub项目地址

4. 写在后面

关注我,更多内容持续输出

🌹 喜欢就点个赞吧👍🌹

🌹 觉得有收获的,可以来一波 收藏+关注,以免你下次找不到我😁🌹

🌹欢迎大家留言交流,批评指正,转发请注明出处,谢谢支持!🌹

分类:
iOS
标签:
收藏成功!
已添加到「」, 点击更改