0%

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

# 本文收获与价值

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

你将使用并熟悉以下Widget:

  • Container 以及 BoxDecoration;

  • ClipRRect 以及 BorderRadius;

  • RowExpanded;

  • StackPositioned;

  • FractionallySizedBox;

# 准备工作

  • 本文需要你有Flutter的基本知识,文中不会过多介绍各种Widget的具体功能;

  • 如果您熟悉或者会使用Chrome进行H5界面调试的话最好不过,没有的话也不影响,我已经将你所需要的全部资源放在了代码中;

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

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

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

  1. 新建名为ctrip_gird_demoFlutter工程,我这里使用的是 VSCode ,因为 Android Studio 3.6.2 在我电脑上实在太卡了,各种办法都试了,还是解决不掉卡顿CPU占用超高
  1. 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
             ),
           ),
         );
       }
     }
  2. 新建名为 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();
     }
  3. 回到 main.dart 上方添加 import 'package:ctrip_gird_demo/grid_widget.dart'; 导入 GridWidget ,并将 // todo: add girdWidget 替换为 child: GridWidget(),

  4. 准备工作目前告一段落,接下来我们将使用在Cloumn中使用Row的方式来实现布局,我们在 1 中可以得出 gridNav 的每行(Row)高为64(H5borderTop 1px 会产生额外的1px高度),下面我们将开始正式布局代码:

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