Flutter 導航設定

weixin_34116110發表於2019-01-25
Flutter

前言

自從flutter1.0版本釋出之後, 一直想繼續對其進行研究, 至於與react-native區別還有flutter初體驗,早在1.0版本沒釋出之前就已經試過了, 本文不在繼續說這些. 直接上手實戰,實踐中遇到問題解決問題,貌似成就感會爆棚.上github上搜尋了一下開源的flutter專案, 發現了一個對於學習flutter專案幫助學習的叫flutter go的專案比較不錯. 索性站在巨人的肩膀上,既有了UI設計, 內容實際意義也比較不錯. 就照著臨摹一個吧.當然是需要一步一步來的. 今天首先說一下專案框架的搭建問題吧.效果圖如下:


1043684-327e35897305e47e.png
1.png

程式碼解析

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _HomeState();
  }
}

接下來是_HomeState的類方法以及定義的變數方法

class _HomeState extends State<Home> {
  int _currentIndex = 0; // 控制跳轉那個底部路由
  var appBarTitles = ['動態', '元件', '收藏', '手冊']; // tabbar顯示的文字
  // 包含的4個子頁面其中PlaceholderWidget為頁面名稱
  final List<Widget> _children = [
    new PlaceholderWidget('動態'),
    new PlaceholderWidget('元件'),
    new PlaceholderWidget('元件'),
    new PlaceholderWidget('手冊'),
  ];
  ...............
}

接下來是核心程式碼部分, 指的說的地方有一下幾點

  • 1,獲取圖片資源需要在pubspec.yaml檔案中, 允許讀取其中該檔案如圖:


    1043684-300723622c3055df.png
    2.png
  • 2, BottomNavigationBar的type屬性在tabbar大於3個的時候應設定為fixed狀態
  • 3, BottomNavigationBar作為MaterialApp架構下的封裝的元件,具有Material Design的設計風格,如果這種分割不被您的設計師看好,讓你改變, 那就自己寫一個BottomNavigationBar吧. 沒別的好辦法.哈哈哈(如果有告訴我聲哈.拜託拜託)
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: new BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        items: [
          new BottomNavigationBarItem(
              activeIcon: getTabImage('assets/images/ic_tab_new_sel.png'),
              icon: getTabImage('assets/images/ic_tab_new.png'),
              title: getTabTitle(0)),
          new BottomNavigationBarItem(
              activeIcon: getTabImage('assets/images/ic_tab_component_sel.png'),
              icon: getTabImage('assets/images/ic_tab_component.png'),
              title: getTabTitle(1)),
          new BottomNavigationBarItem(
              activeIcon: getTabImage('assets/images/ic_tab_save_sel.png'),
              icon: getTabImage('assets/images/ic_tab_save.png'),
              title: getTabTitle(2)),
          new BottomNavigationBarItem(
              activeIcon: getTabImage('assets/images/ic_tab_mine_sel.png'),
              icon: getTabImage('assets/images/ic_tab_mine.png'),
              title: getTabTitle(3)),
        ],
        iconSize: 24.0,
      ),
    );
  }

最後就是3個方法, 在build中使用到, 通俗易懂

void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  Text getTabTitle(int curIndex) {
    var color;
    if (curIndex == _currentIndex) {
      color = Colors.green;
    } else {
      color = Colors.black;
    }
     return new Text(appBarTitles[curIndex],
          style: new TextStyle(fontSize: 14.0, color: color));
  }

  Image getTabImage(path) {
    return new Image.asset(path,
        width: 24.0, height: 24.0, repeat: ImageRepeat.repeat);
  }

最後的最後就是tabbar上的每個子元素的建設,, 本文中只是先建立一下, 為了看效果, 之後的更文中,會改變這段程式碼. 一共4個一個一個來.

class PlaceholderWidget extends StatelessWidget {
  final String text;

  PlaceholderWidget(this.text);

  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Text(text),
    );
  }
}

總結

首先就是不要小看這一小段程式碼,其中包含很多的知識點, 總結一下

  • 1, 裡面有更新狀態程式碼
  • 2, 頁面初始化傳值
  • 3, 圖片資源引入
  • 4, 元件與屬性的簡單用法, 以及執行機制的瞭解

結束語

下篇更新內容包括: 搜尋框, 輪播圖, 列表的應用. 如果時間充裕加上跳轉傳值與回撥吧.

相關文章