Flutter基础介绍与实作-Day12 Nice to Meet you Widgets-范例实作

前面讲了那麽多关於Basic Widget今天我们就用其中一个来写个小范例吧！

我们用BottomNavigationBar来写一个关於卡片排版的小程序

我们可以使用Card Widget来做有图片、标题和文字叙述的卡片模型
这边有使用了一个AspectRatio的Widget，它是用来控制图片的长宽比，像是我们这边设定的是18：11，fit:BoxFit.fitWidth这行是为了让image可以满版呈现特别加上去的，下面一行的Padding它是设定图片旁边留白的地方，这4个数字分别代表图片到上下左右边框的距离，最下面的SizedBox是指文字间的距离

那上面设定完的卡片会有圆角、阴影，我们这样执行完一个画面只有一个卡片，这不是我们所希望的，所以我们要用GridView Widget，来做出可以上下滑动的Grid系统，甚至可以并排卡片
这里的程序码跟上面的差不多这里就不多做解释了，唯一要说的是crossAxisCount，这个是指每一个横排要放几张卡片

成果
Women

Men

Kid

完整程序码

今日总结
今天这个小范例大家有学起来吗？上面有附上完整的程序码，有兴趣的朋友都可以参考看看喔！