前言：终于到了大家最期待的综合实例
阅读完这节内容可以帮你巩固提升！
正文：
老规矩先上效果图，毕竟有图有真相！
源码找我领取哦，在文章最下面~
先分析一下效果图
第一步：实现底部跳转栏
小T这里是五个Tab，所以要先定义五个Dart文件，进行一些初始配置.
然后在main引入这五个界面，并且配置跳转的图标和文字，记得定义跳转指针哦
然后在脚手架使用：
//核心代码
return Scaffold(
body: page[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
items: bottomNavItems,
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
),
);第二步：实现顶部背景和头像（写在testOne.dart文件中）
我们可以分析得出：需要一张背景，一张头像居中且位于背景上层，文字居中.
代码实现：
Container(
alignment: Alignment.center,
child: Stack( //叠层布局，用于将头像放置于背景之上，可以参考小T的这篇布局详解
alignment: Alignment.center, //设置为居中
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width, //设置宽度为屏幕宽度
child: Image.asset(
'images/HomePage/topImage.jpg', //使用本地背景
),
),
Positioned.fill( //虚化图片的组件，可以参考我的进阶常用组件.
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 15,
sigmaY: 15,
),
child: Container(
color: Colors.white10,
),
),
),
Container(
width: 124,
margin: EdgeInsets.only(top: 100),
child: Image.asset("images/HomePage/imageHead.png"),
)
],
)),
Container(
child: Text(
"阿.T",
style: TextStyle(fontSize: 30),
),
),
Row( //一行的文字
mainAxisAlignment: MainAxisAlignment.center, //居中布局
children: [
Image.asset(
"images/HomePage/Gps.png",
width: 24,
),
Padding(
padding: EdgeInsets.all(5.0),
),
Text(
"杭州",
style: TextStyle(fontSize: 20),
),
],
),第三步：实现图片块
分析：我们可以将这一整块看作是一行，里面有两块，左边一块大的图片，右边一堆小图片，然后将右边的图片在细分为两列.
难点：1.主要是懂得Row和Column这两个行和列的布局使用
? 2.图片圆角和图片阴影，使其更为具体
代码实现： （嵌套比较复杂，建议自行理解，看代码说实话真的有点累，自己理解就行）
需要详细代码的就去下载源码，这里就给大家分析一下难点~
图片圆角和图片阴影：
Container(
width: 175,
height: 175,
margin: EdgeInsets.only(left: 14),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(4.0,12.0), //阴影xy轴偏移量
blurRadius: 15.0, //阴影模糊程度
spreadRadius: 1.0 //阴影扩散程度
),
],
borderRadius: BorderRadius.circular(10), //圆角
image: DecorationImage(
image: NetworkImage(
"https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
),
),
),彩蛋：
大家在开发中是不是经常看到这样的线，这个东西怎么实现呢：
代码：
Container(
color: Color.fromARGB(255, 200, 200, 200),
height: 2,
),是不是非常滴简单~
这样这个综合实例就完成了，希望大家有所收获.
欢迎留言纠正 ~
