Flutter一步步实现x程GridNav网格布局_准备工作#本文收获与价值看完本系列文章后你将能够做出如下100%还原

# 本文收获与价值

看完本系列文章后你将能够做出如下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高度),下面我们将开始正式布局代码：

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

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