Flutter实现IOS风格的选项卡功能-CSDN博客

第一次知道Flutter的时候，那时它有30K Star,短短半年时间，到现在的52.6K Star,增长迅猛,可以看出的确火爆.

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

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

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

在查看英文网站的时候,可以看到谷歌提供了很多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 还是很有优势的

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