第二章●第十二节：仿写简书App首页

我们通过前面1～12节，简单的了解了基础组件的使用。本节我们将使用前面所说的各类组件，仿写简书首页。

1. 我们先来分析一下简书首页都具有哪些功能

简书App首页功能划分图

按照我们对简书APP首页的拆分，将其划分为五大区域，①底部切换选项卡；②顶部导航条，也叫顶部选项卡；③顶部搜索按钮；④悬浮按钮；⑤内容列表。接下来我们从这五大区域开始分别实现。

2. 各模块代码实现

（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("关注", 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）顶部导航条

我们通过分析，将顶部导航条划分在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）顶部搜索按钮

搜索按钮我们可以通过设置AppBar的actions属性，并使用IconButton组件来实现。

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属性设置悬浮按钮。

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

（5）内容列表

使用容器来将其他组件包装起来，最后以ListView来显示容器内容。

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. 最终效果

效果展示

注：若有侵权，望告知！

---

总目录结构