基本框架

在Flutter 中利用系统提供的小部件，来实现基础的项目框架的搭建,实例如上图。

1. 重建 main.dart

import 'package:flutter/material.dart';
import 'index_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primaryColor: Color.fromRGBO(67,144,87, 1.0)
        ),
        home: IndexPage(),
      ),
    );
  }
}

我们利用MaterialApp 这个小部件来构建，将根节点设置成了Container 容器，方便我们可以扩展，当然也可以直接利用MaterialApp 来构建，我们将home属性设置为我们初始化的小部件IndexPage,在这个部件中来构建我们基础骨架。

2.构建基础骨架

import 'package:flutter/material.dart';

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
    );
  }
}

这里我们需要使用的是 StatefulWidget.

3. 构建BottomNavigationBar

我们需要 Scaffold 这个脚手架的小部件来构建我们的底部bottomNavigationBar,我们需要利用material 中提供的BottomNavigationBar 来构建.

BottomNavigationBar(
        type:BottomNavigationBarType.fixed,
        items: ,
        currentIndex: ,
        onTap: ,
      )

我们可以发现 BottomNavigationBar 需要提供 items,也就是每一个Item项,我们可以通过创建一个列表的实现：

List<BottomNavigationBarItem> _items = [
      BottomNavigationBarItem(
        icon: Icon(Icons.chat_bubble),
        title: Text('微信')
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.group),
        title: Text('通讯录')
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.directions),
        title: Text('发现')
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.person_outline),
        title: Text('我的')
      )
  ];

BottomNavigationBar 中 currentIndex 指的是当前选择的是哪一个Item项，onTap是一个点击某一项的回调函数，会将当前点击的index传递过来，这样我们就需要定义一个currentIndex变量来进行动态改变:

int _currentIndex = 0;

4. 构建页面

在Scaffold 的 body属性中我们需要设置当前页面，为了方便动态切换页面，我们首先创建与Item相互匹配的页面:

import 'package:flutter/material.dart';

class WeixinPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WeixinPage'),
        elevation: 0.0,
      ),
    );
  }
}

import 'package:flutter/material.dart';

class MemberPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MemberPage'),
        elevation: 0.0,
      ),
    );
  }
}

import 'package:flutter/material.dart';

class FoundPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FoundPage'),
        elevation: 0.0,
      ),
    );
  }
}
import 'package:flutter/material.dart';

class ContactPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ContactPage'),
        elevation: 0.0,
      ),
    );
  }
}

项目结构如下：

项目文件结构

5. 设置页面切换

我们需要在index_page.dart中将之前创建的页面引入，
然后在创建一个页面列表：

 List<Widget> _pages = [
   WeixinPage(),
   FoundPage(),
   MemberPage(),
   ContactPage()
 ];

完整的 Scaffold 如下：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        type:BottomNavigationBarType.fixed,
        items: _items,
        currentIndex: _currentIndex,
        onTap: (index){
          setState(() {
             _currentIndex = index;
          });
        },
      ),
    )

这样我们就实现了基本的项目骨架。

本文实例的代码地址

2020-6-21 补充

1.BottomNavigationBar type的设置

参照源码文档：

  /// If [type] is null then [BottomNavigationBarType.fixed] is used when there
  /// are two or three [items], [BottomNavigationBarType.shifting] otherwise.

意思就是2个或者3个的时候默认设置为 fixed, 4个及以上的默认设置为shifting。

所以我们设置items 4个到5个的话需要手动设置一下类型 type:BottomNavigationBarType.fixed

2. 取消点击水波纹效果

我们切换下面tabbar ，会有水波纹效果，这是系统默认添加的高亮效果，可以全局取消高亮

MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        highlightColor: Colors.transparent // 取消高亮效果
      ),
      home: ...,
    );

3. tabbar 设置图片时，点击切换出现闪烁

设置Image.asset 属性值 gaplessPlayback = true