Flutter 实现IOS风格的底部导航栏

第一次知道Flutter的时候，那时它有30K Star,短短半年时间，到如今的52.6K Star,增加迅猛,能够看出的确火爆.

做为一个热(担)爱(心)学(掉)习(队)的程序猿,怎么能错过呢？

话很少说，咱们直接进入正题，如何用flutter实现IOS风格的选项卡功能.

Flutter有个中文网,flutterchina.club/。

这里边介绍的东西很不错,对比着英文网站来看,里面的内容就有些陈旧了。

在查看英文网站的时候,能够看到谷歌提供了不少IOS Cupertino风格的组件,其中有一个 叫作CupertinoTabScaffold,看这个单词，大概能猜出来这是用来实现底部选项卡功能的。

新建项目,IDE会自动帮咱们弄出一个默认main.dart来,咱们删除其中多余的代码，最后像这样：

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //这里须要返回cupertinoTabScaffold组件
    );
  }
}

复制代码

由于咱们要实现IOS Cupertino风格,咱们要在最上面添加一行代码,这样咱们才能顺利使用Cupertino风格组件

import 'package:flutter/cupertino.dart';
复制代码

而后把上边MyApp类中的return MaterialApp 修改成 return CupertinoApp;

仔细查看官方文档后，能够大概理出来以下的思路：

把官网的例子拿过来，改改，就是这个样子了,代码以下：

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          activeColor: CupertinoColors.activeBlue,
          backgroundColor: CupertinoColors.inactiveGray,
          items: [
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.home),
              title: Text("主页")
            ),
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.eye),
              title: Text("发现")
            ),
          ],

        ),
        tabBuilder: (BuildContext context, int index){
          return CupertinoTabView(
            builder: (BuildContext context){
                //点击tab的时候,根据index的值渲染对应的页面
                if(index == 0){
                    return TestPageOne();
                }else{
                    return TestPageTwo();
                }
                //当tab有多个的时候,就可使用switch
            }
          );
        },
      ),
    );
  }
}

复制代码

咱们根据index的变化,返回不一样的页面。新建两个类

class TestPageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: new Text(
            "页面一", 
            style: new TextStyle(fontSize:36.0,
            color: CupertinoColors.activeBlue,
            fontWeight: FontWeight.w800,
    );
  }
}

class TestPageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: new Text(
            "页面二", 
            style: new TextStyle(fontSize:36.0,
            color: Colors.pink,
            fontWeight: FontWeight.w800,
    );
  }
}
复制代码

运行命令 flutter run,跑起来结果以下：

就是这样了,看起来也没什么.

我暂时尚未用Flutter布过局,嵌套写法让我以为有点恶心,层数多了,到时候修改起来会不会吐？？总的来讲,这个Flutter看起来还不错,由于它直接用gpu来渲染,不像weex那样仍是用原生渲染，感受在抹平两个平台的差别上,Flutter 仍是颇有优点的

后面会继续学习,继续分享