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佈局_總體佈局