我们通过前面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. 最终效果
效果展示
