手把手教你实现携程GridNav布局-准备篇

# 本文收获与价值

看完本系列文章后你将能够做出如下100%还原携程 V8.22.0 首页 GridNav 的界面：

你将使用并熟悉以下Widget:

Container 以及 BoxDecoration;
ClipRRect 以及 BorderRadius;
Row 与 Expanded;
Stack 与 Positioned;
FractionallySizedBox;

# 准备工作

本文需要你有Flutter的基本知识，文中不会过多介绍各种Widget的具体功能；
如果您熟悉或者会使用Chrome进行H5界面调试的话最好不过，没有的话也不影响，我已经将你所需要的全部资源放在了代码中；

好了让我们开始准备工作吧：

Chorme打开一个新页面，按 F12 进入调试状态，地址栏输入http://m.ctrip.com/html5/，回车，你将会看到如下界面：

现在你可以查看携程 H5 页面的各种布局和颜色，字体等的配置了(这里不是重点: 相关配置已贴在代码中)；

新建名为ctrip_gird_demo的Flutter工程，我这里使用的是 VSCode ，因为 Android Studio 3.6.2 在我电脑上实在太卡了，各种办法都试了，还是解决不掉卡顿和 CPU占用超高；

在 main.dart 中删除全部代码，并添加如下代码；

 import 'package:flutter/material.dart';

 void main() => runApp(CtripGridApp());

 class CtripGridApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Flutter Demo',
       theme: ThemeData(
         primarySwatch: Colors.blue,
       ),
       home: Scaffold(
         appBar: AppBar(
           title: Text(
             "携程grid布局",
             style: TextStyle(fontSize: 18),
           ),
         ),
         body: Container(
           padding: EdgeInsets.only(top: 146),
           margin: EdgeInsets.only(left: 16, right: 16),
           // todo: add girdWidget
         ),
       ),
     );
   }
 }

新建名为 grid_widget.dart 的文件，并添加我们在1中获得颜色，背景图，字体等的配置代码；

 import 'package:flutter/material.dart';

 class GridWidget extends StatelessWidget {

   final List<Color> _hotelColors = [
     Color(0xfffa5956),
     Color(0xfffb8650),
   ];

   final List<Color> _platformColors = [
     Color(0xffffbc49),
     Color(0xffffd252),
   ];

   final List<Color> _flightColors = [
     Color(0xff4b8fed),
     Color(0xff53bced),
   ];

   final List<Color> _travelColors = [
     Color(0xff34c2aa),
     Color(0xff6cd557),
   ];

   final String _hotelBGImageUrl =
       'https://pic.c-ctrip.com/platform/h5/home/grid-nav-items-hotel@v7.15.png';

   final String _minsuBGImageUrl =
       'https://pic.c-ctrip.com/platform/h5/home/grid-nav-items-minsu@v7.15.png';

   final String _platformBGImage =
       'https://pic.c-ctrip.com/platform/h5/home/grid-nav-items-jhj@v7.15.png';

   final String _flightBGImageUrl =
       'https://pic.c-ctrip.com/platform/h5/home/grid-nav-items-flight@v7.15.png';

   final String _trainBGImage =
       'https://pic.c-ctrip.com/platform/h5/home/grid-nav-items-train.png';

   final String _tripBGImage =
       'https://pic.c-ctrip.com/platform/h5/home/grid-nav-items-travel@v7.15.png';

   final String _dingzhiBGImage =
       'https://pic.c-ctrip.com/platform/h5/home/grid-nav-items-dingzhi@v7.15.png';

   final TextStyle _titleStyle = TextStyle(
     color: Colors.white,
     fontSize: 14,
     fontWeight: FontWeight.w600,
   );

   final TextStyle _platformStyle = TextStyle(
     color: Color(0xffa05416),
     fontSize: 14,
     fontWeight: FontWeight.w600,
   );

   final BorderSide _borderSide = BorderSide(
     color: Color(0xfff2f2f2),
     width: 1,
   );

   final Radius _radius = Radius.circular(8);

   @override
   Widget build(BuildContext context) {
       // todo: add grid rows
     return Container();
 }

回到 main.dart 上方添加 import 'package:ctrip_gird_demo/grid_widget.dart'; 导入 GridWidget ,并将 // todo: add girdWidget 替换为 child: GridWidget(),；
准备工作目前告一段落，接下来我们将使用在Cloumn中使用Row的方式来实现布局，我们在 1 中可以得出 gridNav 的每行(Row)高为64(H5 的 borderTop 1px 会产生额外的1px高度),下面我们将开始正式布局代码：

接下来请移步 Flutter实现携程GirdNav布局_整体布局