flutter實(shí)戰(zhàn)2：為APP增加上下Tab頁(yè)

joyvw 發(fā)布于2019-08-22 15:42 / 779人閱讀

摘要：緊接上一篇的有側(cè)邊欄，這次我們向中加入上下頁(yè)，使之跟趨近主流大部分的信息布局套路，等不及看源碼的同學(xué)可以點(diǎn)擊進(jìn)入我的倉(cāng)庫(kù)下載代碼。子元素為類型的數(shù)組。頁(yè)的內(nèi)容容器，其內(nèi)放置頁(yè)的主體內(nèi)容。

緊接上一篇的有側(cè)邊欄APP，這次我們向APP中加入上下Tab頁(yè)，使之跟趨近主流大部分APP的信息布局套路，等不及看源碼的同學(xué)可以點(diǎn)擊進(jìn)入我的git倉(cāng)庫(kù)下載代碼。

Tab關(guān)鍵元素

TabController

這是Tab頁(yè)的控制器，用于定義Tab標(biāo)簽和內(nèi)容頁(yè)的坐標(biāo)，還可配置標(biāo)簽頁(yè)的切換動(dòng)畫效果等。

TabController一般放入有狀態(tài)控件中使用，以適應(yīng)標(biāo)簽頁(yè)數(shù)量和內(nèi)容有動(dòng)態(tài)變化的場(chǎng)景，如果標(biāo)簽頁(yè)在APP中是靜態(tài)固定的格局，則可以在無(wú)狀態(tài)控件中加入簡(jiǎn)易版的DefaultTabController以提高運(yùn)行效率，畢竟無(wú)狀態(tài)控件要比有狀態(tài)控件更省資源，運(yùn)行效率更快。

TabBar

Tab頁(yè)的Title控件，切換Tab頁(yè)的入口，一般放到AppBar控件下使用，內(nèi)部有*Title屬性。其子元素按水平橫向排列布局，如果需要縱向排列，請(qǐng)使用Column或ListView控件包裝一下。子元素為Tab類型的數(shù)組。

TabBarView

Tab頁(yè)的內(nèi)容容器，其內(nèi)放置Tab頁(yè)的主體內(nèi)容。子元素可以是多個(gè)各種類型的控件。

Tab使用方法 有狀態(tài)控件搭配TabController

Tab頁(yè)的切換搭配了動(dòng)畫，因此到State類上附加一個(gè)SingleTickerProviderStateMixin:

  //定義有狀態(tài)控件
  class HomePage extends StatefulWidget {
    @override
    _HomePageState createState() => new _HomePageState();
  }

  //用于使用到了一點(diǎn)點(diǎn)的動(dòng)畫效果，因此加入了SingleTickerProviderStateMixin
  class _HomePageState extends State with SingleTickerProviderStateMixin{
    ...
  }

然后到有狀態(tài)控件的子類State中初始化控制器TabController：

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(
      vsync: this,     //動(dòng)畫效果的異步處理，默認(rèn)格式，背下來(lái)即可
      length: 3      //需要控制的Tab頁(yè)數(shù)量
    );    
  }
  //當(dāng)整個(gè)頁(yè)面dispose時(shí)，記得把控制器也dispose掉，釋放內(nèi)存
  @override
  void dispose() {
    _tabController .dispose();
    super.dispose();
  }

然后到TabBar和TabBarView中的controller屬性中調(diào)用控制器_tabController

  //標(biāo)簽頁(yè)標(biāo)題
  new TabBar(
          tabs: [    //注意TabBar的子元素為Tab類型的數(shù)組
            new Tab(icon: new Icon(Icons.directions_car)),
            new Tab(icon: new Icon(Icons.directions_transit)),
            new Tab(icon: new Icon(Icons.directions_bike)),
          ]
  //標(biāo)簽頁(yè)內(nèi)容區(qū)域
  new TabBarView(
        children: [
          new Icon(Icons.directions_car),
          new Icon(Icons.directions_transit),
          new Icon(Icons.directions_bike),
        ]

最后，我們把定義好的TabBar和TabBarView安放到需要的地方去，比如：

new Scaffold(
      appBar: new AppBar(
        backgroundColor: Colors.deepOrange,
        title: new Text("title"),
      ),
      ....
      body: new TabBarView(        //TabBarView呈現(xiàn)內(nèi)容，因此放到Scaffold的body中
          controller: _bottomNavigation,      //配置控制器
          children:  [      //注意順序與TabBar保持一直
            new News(data: "參數(shù)值"),    //上一篇定義好的子頁(yè)面
            new TabPage2(),
            new TabPage3(),
          ]
        ),
      bottomNavigationBar: new Material(    //為了適配主題風(fēng)格，包一層Material實(shí)現(xiàn)風(fēng)格套用
        color: Colors.deepOrange,   //底部導(dǎo)航欄主題顏色
        child: new TabBar(        //TabBar導(dǎo)航標(biāo)簽，底部導(dǎo)航放到Scaffold的bottomNavigationBar中
          controller: _bottomNavigation,      //配置控制器
          tabs: _bottomTabs,
          indicatorColor: Colors.white, //tab標(biāo)簽的下劃線顏色
        ),
      ) 
    );

無(wú)狀態(tài)控件搭配DefaultTabController

DefaultTabController要簡(jiǎn)單很多，由于應(yīng)用在無(wú)狀態(tài)控件中，使用DefaultTabController包裹需要用到Tab的頁(yè)面即可：

class TabPage3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  new DefaultTabController(
        length: 3,
        child: new Scaffold(
          appBar: new AppBar(
            backgroundColor: Colors.orangeAccent,
            title: new TabBar(
              tabs: [
                new Tab(icon: new Icon(Icons.directions_car)),
                new Tab(icon: new Icon(Icons.directions_transit)),
                new Tab(icon: new Icon(Icons.directions_bike)),
              ],
              indicatorColor: Colors.white,
            ),
          ),
          body: new TabBarView(
            children: [
              new Icon(Icons.directions_car),
              new Icon(Icons.directions_transit),
              new Icon(Icons.directions_bike),
            ],
          ),
        ),
      );
  }
}

DefaultTabController和TabController的用法差異主要在控制器的定義上，TabBar和TabBarView的使用方法完全相同，通常上下Tab頁(yè)的標(biāo)簽分別安放在Scaffold控件的appBar和bottomNavigationBar屬性上，然后我們把APP填充成下面這個(gè)樣式：

代碼結(jié)構(gòu)

如上圖所示，APP以底部Tab導(dǎo)航欄為主入口，底部每個(gè)Tab中又各自有自己的頂部次級(jí)Tab頁(yè)，因此我們把代碼結(jié)構(gòu)整理一下：

_HomePageState是APP的主頁(yè)面HomePage的子類State

通過(guò)Scaffold底部的bottomNavigationBar屬性擺放TabBar，搭建Tab頁(yè)的標(biāo)簽欄

放入Scaffold的body屬性放入TabBarView，TabBarView的children是三個(gè)外部dart文件定義的控件頁(yè)面

外部dart文件定義的控件頁(yè)面分別又有各自風(fēng)格的Tab標(biāo)簽頁(yè)

Tab頁(yè)的通用屬性可以提前定義到數(shù)組List中，在TabBar和TabBarView通過(guò)遍歷提取List的值創(chuàng)建子元素可以提高代碼的維護(hù)效率：

//在`StatefulWidget`控件中，可通過(guò)修改下面的數(shù)組，實(shí)現(xiàn)Tab頁(yè)的動(dòng)態(tài)加載
final List myTabs = [
    new Tab(text: "Tab1"),
    new Tab(text: "Tab2"),
    new Tab(text: "Tab3"),
    new Tab(text: "Tab4"),
    new Tab(text: "Tab5"),
    new Tab(text: "Tab6"),
    new Tab(text: "Tab7"),
    new Tab(text: "Tab8"),
    new Tab(text: "Tab9"),
    new Tab(text: "Tab10"),
    new Tab(text: "Tab11"),
  ];

  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        backgroundColor: Colors.orangeAccent,
        title: new TabBar(
          controller: _tabController,
          tabs: myTabs,    //使用Tab類型的數(shù)組呈現(xiàn)Tab標(biāo)簽
          indicatorColor: Colors.white,
          isScrollable: true,   
        ),
      ),
      body: new TabBarView(
        controller: _tabController,
        children: myTabs.map((Tab tab) {    //遍歷List類型的對(duì)象myTabs并提取其屬性值作為子控件的內(nèi)容
          return new Center(child: new Text(tab.text+"   "+widget.data)); //使用參數(shù)值
        }).toList(),
      ),
    );
  }

使用獲取到的參數(shù)

由于StatelessWidget 和StatefulWidget的頁(yè)面構(gòu)建不同，使用從外部獲取到的參數(shù)的方式也略有差異，在這里簡(jiǎn)單總結(jié)下。

StatelessWidget 的獲參和用參方式

定義StatelessWidget 控件時(shí)，添加一個(gè)final類型的變量如pageText，用于為參數(shù)值預(yù)留空間，并在構(gòu)造函數(shù)中加入?yún)?shù)值：

class SidebarPage extends StatelessWidget {
  final String pageText;    //定義一個(gè)常量，用于保存跳轉(zhuǎn)進(jìn)來(lái)獲取到的參數(shù)
  SidebarPage(this.pageText);   //構(gòu)造函數(shù)，獲取參數(shù)
  ...
}

使用參數(shù)時(shí)直接引用即可：

Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text(pageText),),   //將參數(shù)當(dāng)作頁(yè)面標(biāo)題
      body: new Center(
        child: new Text("pageText"),
      ),
    );
  }

從外部傳入?yún)?shù)時(shí)，直接向構(gòu)造函數(shù)中填入?yún)?shù)值即可：

Navigator.of(context).push(new MaterialPageRoute(builder: 
    (BuildContext context) => new SidebarPage("First Page")));    //在new方法時(shí)調(diào)用控件的構(gòu)造函數(shù)傳入?yún)?shù)值

StatefulWidget的獲參和用參方式

相比StatelessWidget 略復(fù)雜。定義構(gòu)造函數(shù)時(shí)需要默認(rèn)聲明key：

class TabPage1 extends StatefulWidget {
  const TabPage1({ Key key , this.data}) : super(key: key); //構(gòu)造函數(shù)中增加參數(shù)
  final String data;    //為參數(shù)分配空間
  @override
  _MyTabbedPageState createState() => new _MyTabbedPageState();
}

使用時(shí)，由于在State子類中實(shí)現(xiàn)具體的頁(yè)面內(nèi)容，因此State子類使用父類TabPage1的參數(shù)時(shí)需要在參數(shù)名前增加一個(gè)widget關(guān)鍵字：

class _MyTabbedPageState extends State {
  ...
  new Center(child: new Text(tab.text+"   "+widget.data));   //使用參數(shù)值，需在參數(shù)名前增加widget前綴
  ...
}

從外部傳入?yún)?shù)時(shí)，需要聲明參數(shù)名：

new TabBarView
    controller: _bottomNavigation,
    children:  [      
      new TabPage1(data: "參數(shù)值"),    //new方法調(diào)用構(gòu)造函數(shù)時(shí)，還需要聲明參數(shù)名稱
      new TabPage2(),
      new TabPage3(),
    ]
  )

好勒，今天就講到這里，大家去下載我的git源碼試試效果吧，代碼中有附加的注釋，對(duì)一些控件屬性的特性也有多帶帶的描述，相信看完源碼之后，大家也可以自行實(shí)現(xiàn)效果了。

順便分享一個(gè)雷區(qū)，由于當(dāng)初創(chuàng)建這個(gè)項(xiàng)目時(shí)，我使用命令flutter create [APPname1]的方式創(chuàng)建了這個(gè)項(xiàng)目，但我發(fā)現(xiàn)這個(gè)APPname1（代稱，并非真實(shí)名稱）不好聽，想把項(xiàng)目改名為APPname2，于是參考之前寫的安卓怎么打包？,把項(xiàng)目文件夾改名為APPname2，并非常任性的把項(xiàng)目目錄下的_androidappsrcmainAndroidManifest.xml_文件，把package和android:label都改成了APPname2，于是不出意料的悲催了，命令flutter fun報(bào)錯(cuò)，無(wú)法啟動(dòng)APP，還原配置之后，無(wú)法啟動(dòng)APP，即便嘗試通過(guò)全文搜索APPname1，都按規(guī)定格式替換成APPname2，或者逆向改回去，都無(wú)法啟動(dòng)APP，此時(shí)已是凌晨1點(diǎn)。。。妥妥的血淚史，所以鄭重的告誡大家：

不要在項(xiàng)目的各種配置文件中輕易改動(dòng)項(xiàng)目名稱！不要在項(xiàng)目的各種配置文件中輕易改動(dòng)項(xiàng)目名稱！不要在項(xiàng)目的各種配置文件中輕易改動(dòng)項(xiàng)目名稱！否則你就是下一個(gè)在電腦面前捶胸頓足的魚丸。什么？問(wèn)我怎么恢復(fù)的？當(dāng)然是托g(shù)it的福。

感謝大家的支持，請(qǐng)關(guān)注我的Flutter圈子，多多投稿，也可以加入flutter 中文社區(qū)（官方QQ群：338252156）共同成長(zhǎng)，謝謝大家~

GPU云服務(wù)器云服務(wù)器 Tab頁(yè) Tab頁(yè)界面 tab頁(yè)實(shí)現(xiàn) tab頁(yè)html

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93674.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

joyvw

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow2.0安裝

閱讀 3157·2023-04-25 15:02
手把手教你實(shí)現(xiàn)Android真機(jī)遠(yuǎn)程截屏

閱讀 2898·2021-11-23 09:51
寶塔面板docker安裝next-freenom – 為freenom免費(fèi)域名自

閱讀 2069·2021-09-27 13:47
免費(fèi)申請(qǐng)Microsoft 365云端辦公套件對(duì)比本地Office軟件區(qū)別

閱讀 2033·2021-09-13 10:33
前端面試題大集合：來(lái)自真實(shí)大廠的532道面試題(只有題，沒(méi)有答案)

閱讀 1043·2019-08-30 15:54
錯(cuò)誤，刪除

閱讀 2664·2019-08-30 15:53
Bootstrap3.x - 源代碼分析

閱讀 2883·2019-08-29 13:58
CSS: hover選擇器的使用

閱讀 915·2019-08-29 13:54

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

flutter實(shí)戰(zhàn)2：為APP增加上下Tab頁(yè)

相關(guān)文章

flutter實(shí)戰(zhàn)3：解析HTTP請(qǐng)求數(shù)據(jù)和制作新聞分類列表

Flutter交互實(shí)戰(zhàn)－即刻App探索頁(yè)下拉＆拖拽效果

Flutter交互實(shí)戰(zhàn)－即刻App探索頁(yè)下拉＆拖拽效果

發(fā)表評(píng)論

0條評(píng)論

joyvw

男|高級(jí)講師

TA的文章

tensorflow2.0安裝

手把手教你實(shí)現(xiàn)Android真機(jī)遠(yuǎn)程截屏

寶塔面板docker安裝next-freenom – 為freenom免費(fèi)域名自

免費(fèi)申請(qǐng)Microsoft 365云端辦公套件對(duì)比本地Office軟件區(qū)別

前端面試題大集合：來(lái)自真實(shí)大廠的532道面試題(只有題，沒(méi)有答案)

錯(cuò)誤，刪除

Bootstrap3.x - 源代碼分析

CSS: hover選擇器的使用

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

flutter實(shí)戰(zhàn)2：為APP增加上下Tab頁(yè)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！