Flutter一步步实现x程GridNav网格布局_准备工做

# 本文收获与价值

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

你将使用并熟悉如下Widget:

• Container 以及 BoxDecoration;

• ClipRRect 以及 BorderRadius;

• Row 与 Expanded;

• Stack 与 Positioned;

• FractionallySizedBox;

# 准备工做

• 本文须要你有Flutter的基本知识，文中不会过多介绍各类Widget的具体功能；

• 若是您熟悉或者会使用Chrome进行H5界面调试的话最好不过，没有的话也不影响，我已经将你所须要的所有资源放在了代码中；

好了让咱们开始准备工做吧：

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

   

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

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

3. 在 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
           ),
         ),
       );
     }
   }
   复制代码

4. 新建名为 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();
   }
   复制代码

5. 回到 main.dart 上方添加 import 'package:ctrip_gird_demo/grid_widget.dart'; 导入 GridWidget ,并将 // todo: add girdWidget 替换为 child: GridWidget(),；

6. 准备工做目前告一段落，接下来咱们将使用在Cloumn中使用Row的方式来实现布局，咱们在 1 中能够得出 gridNav 的每行(Row)高为64(H5 的 borderTop 1px 会产生额外的1px高度),下面咱们将开始正式布局代码：

原文连接：携程GridNav布局-准备篇

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