底部 Tabar 及主页面搭建

如图我们先实现底部 tabbar 的选中及界面的切换功能。

首先我们按照功能模块创建文件夹及根页面文件夹，文件夹的创建大家可以按照自己的习惯来，这里我们就按功能模块来划分文件夹。

main 文件代码实现


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 隐藏 debug 标识
      debugShowCheckedModeBanner: false,
      // 主题设置
      theme: ThemeData (
        primarySwatch: Colors.grey,
        // 设置 item 点击颜色
        highlightColor: Color.fromRGBO(1, 0, 0, 0.0),
        splashColor: Color.fromRGBO(1, 0, 0, 0.0)
      ),
      home: RootPage(),
    );
  }
}
复制代码

根页面代码实现

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

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

class _RootPageState extends State<RootPage> {
  int _currentIndex = 0;
  List <Widget>_pages = [ChatPage(), FriendsPage(), DiscoverPage(), MinePage()];
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        body: _pages[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          // item 点击事件
          onTap: (index){
            setState(() {
              _currentIndex = index;
            });
          },
          // item 选中字体大小
          selectedFontSize: 12.0,
          // 设置 item 样式
          type: BottomNavigationBarType.fixed,
          // item 选中颜色
          fixedColor: Colors.green,
          // 默认选中 item 索引
          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_outline), label: '我'),
          ],
        ),
      ),
    );
  }
}
复制代码

功能页面代码实现

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: Text('微信页面'),
      ),
      body: Center(
        child: Text('微信页面'),
      ),
    );
  }
}
复制代码

这里我们以聊天页面为例，简单创建了一个空的页面，其他页面都是类似，到此我们就实现了基本的页面搭建。

工程资源配置

这里我们主要讲下安卓的资源文件配置。

icon 图标配置

首先我们可以看到这个 xml 文件，再这里我们可以添加 app 的名称，就配置 app 的图标，需要注意的一点是图片名称不能使用驼峰命名。

需要注意一点的是安卓中没有 @1x、@2x 这些概念，但是这几个文件相当于 iOS 中的 @4x、@3x 、@2x 、@1.5x 、@1x 、@0.75x，我们可以将对应的图片资源放到这些文件中。

启动图片配置

如图所示我们在这里添加上启动图片的名称就行，然后把启动图片放到下面对应的文件夹中。

Flutter 工程图片资源配置

当我们需要配置 Flutter 工程图片的时候，我们首先把图片文件拖到 Flutter 工程中，然后配置 pubspec.yaml 文件，如图，我们把 images 文件夹名称添加就行，如果有多个文件夹也是类似在下面添加，这里需要注意一点的是 assets 与上面代码需要对齐，要不然会报错。这里不光可以配置图片资源，一些我们需要用到的三方组件也需要在这里配置。

本地图片使用

// Image(image: AssetImage('图片文件名称/图片名称.后缀')
Image(image: AssetImage('images/tabbar_chat.png')
复制代码

Flutter 项目搭建及工程配置