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 仍是頗有優點的

後面會繼續學習,繼續分享