我們通過前面1～12節(jié)，簡單的了解了基礎(chǔ)組件的使用。本節(jié)我們將使用前面所說的各類組件，仿寫簡書首頁。

1. 我們先來分析一下簡書首頁都具有哪些功能

簡書App首頁功能劃分圖

按照我們對簡書APP首頁的拆分，將其劃分為五大區(qū)域，①底部切換選項卡；②頂部導(dǎo)航條，也叫頂部選項卡；③頂部搜索按鈕；④懸浮按鈕；⑤內(nèi)容列表。接下來我們從這五大區(qū)域開始分別實現(xiàn)。

2. 各模塊代碼實現(xiàn)

（1）底部選項卡

使用Scaffold.bottomNavigationBar屬性來顯示底部選項卡。

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  currentIndex: 0,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home, color:  Color.fromRGBO(195, 195, 195, 1.0)),
      activeIcon: Icon(Icons.home, color: Color.fromRGBO(234, 111, 90, 1.0),),
      title: Text("首頁", style: TextStyle(color: Color.fromRGBO(157, 157, 157, 1.0)),),
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.beenhere, color: Color.fromRGBO(195, 195, 195, 1.0)),
        activeIcon: Icon(Icons.home, color: Color.fromRGBO(234, 111, 90, 1.0),),
        title: Text("關(guān)注", style: TextStyle(color:  Color.fromRGBO(157, 157, 157, 1.0)),),
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.favorite, color:  Color.fromRGBO(195, 195, 195, 1.0)),
        activeIcon: Icon(Icons.home, color: Color.fromRGBO(234, 111, 90, 1.0),),
        title: Text("簡書鉆", style: TextStyle(color: Color.fromRGBO(157, 157, 157, 1.0)),)
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.message, color:  Color.fromRGBO(195, 195, 195, 1.0)),
        activeIcon: Icon(Icons.home, color: Color.fromRGBO(234, 111, 90, 1.0),),
        title: Text("消息", style: TextStyle(color: Color.fromRGBO(157, 157, 157, 1.0)),)
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.account_circle, color:  Color.fromRGBO(195, 195, 195, 1.0)),
        activeIcon: Icon(Icons.home, color: Color.fromRGBO(234, 111, 90, 1.0),),
        title: Text("我的", style: TextStyle(color: Color.fromRGBO(157, 157, 157, 1.0)),)
    ),
  ],
),

（2）頂部導(dǎo)航條

我們通過分析，將頂部導(dǎo)航條劃分在AppBar中，將其放置在title屬性中，并使用TabBar組件。

title: TabBar(
  tabs: topTabs,
  controller: _tabController,
  isScrollable: true,
  indicatorColor: Color.fromRGBO(227, 95, 72, 1.0),
  indicatorWeight: 2.0,
  indicatorSize: TabBarIndicatorSize.label,
  indicatorPadding: EdgeInsets.fromLTRB(0, 0, 0, 3.0),
  labelColor: Color.fromRGBO(234, 104, 83, 1.0),
  labelStyle: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w600),
  labelPadding: EdgeInsets.all(8.0),
  unselectedLabelColor: Color.fromRGBO(54, 54, 54, 1.0),
),

（3）頂部搜索按鈕

搜索按鈕我們可以通過設(shè)置AppBar的actions屬性，并使用IconButton組件來實現(xiàn)。

actions: <Widget>[
  IconButton(
    icon: Icon(Icons.search),
    onPressed: (){},
    padding: EdgeInsets.fromLTRB(0, 0, 20.0, 0),
    color: Color.fromRGBO(54, 54, 54, 1.0),
  )
],

（4）懸浮按鈕

使用Scaffold.floatingActionButton屬性設(shè)置懸浮按鈕。

floatingActionButton: FloatingActionButton(
  onPressed: (){},
  child: Icon(Icons.edit),
  backgroundColor: Color.fromRGBO(234, 104, 83, 1.0),
)

（5）內(nèi)容列表

使用容器來將其他組件包裝起來，最后以ListView來顯示容器內(nèi)容。

Container(
  height: 170.0,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Expanded(
        child: Text(
          "【九辯兒】小東西磕我心縫里了2",
          style: TextStyle(
            fontSize: 18.0,
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
      Text(
        "兩人的呼吸交織在一起，馕咬住辯兒的嘴唇，驚的小辮兒嬌軀一顫。馕高興的笑笑，用舌尖曖昧的潤染辯兒的嘴唇，又將白牙輕輕地觸著辯的皓齒。輕悄悄地",
        maxLines: 3,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(
            fontSize: 16.0
        ),
      ),
      Expanded(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.favorite, color: Color.fromRGBO(234, 104, 83, 1.0),),
            Text("1.739", style: TextStyle(color:  Color.fromRGBO(234, 104, 83, 1.0)),),
            Text("天空飛過一條...", style: TextStyle(color: Colors.black54),),
            Text("533閱讀", style: TextStyle(color: Colors.black54)),
            Text("1評論", style: TextStyle(color: Colors.black54)),
            Text("11贊", style: TextStyle(color: Colors.black54)),
            Expanded(
              child: Icon(Icons.clear, color: Colors.black54, size: 14.0,),
            )
          ],
        ),
      )
    ],
  ),
  padding: EdgeInsets.fromLTRB(15.0, 15.0, 15.0, 10.0),
  color: Colors.white,
),

3. 最終效果

效果展示

注：若有侵權(quán)，望告知！

總目錄結(jié)構(gòu)