Flutter一步步实现x程GridNav网格布局_整体布局

# 本文收获与价值

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

# 准备工作

开始前请先按照Flutter实现携程GirdNav布局_准备工作中的步骤完成准备工作；

注： 以下全部代码改变都在grid_widget.dart文件中机进行；

# 添加整体布局

1. 将 build 函数下方添加如下代码

   Widget _hotelRow() {
     return ClipRRect(
       // todo: add top corner
       child: Container(
         height: 65,
         decoration: BoxDecoration(
           gradient: LinearGradient(
             colors: _hotelColors,
             stops: [0, 0.54],
           ),
         ),
         // todo: add hotel row
       ),
     );
   }
   
   Widget _flightRow() {
     return Container(
       height: 65,
       decoration: BoxDecoration(
         gradient: LinearGradient(
           colors: _flightColors,
           stops: [0, 0.54],
         ),
         // todo: add top border 
       ),
       // todo: add flight row
     );
   }
   
   Widget _travelRow() {
     return ClipRRect(
       // todo: add bottom corner
       child: Container(
         height: 65,
         decoration: BoxDecoration(
           gradient: LinearGradient(
             colors: _travelColors,
             stops: [0, 0.54],
           ),
           // todo: add top border 
         ),
         // todo: add travel row
       ),
     );
   }
   

   ⚠️注意是:ClipRRect⚠️

2. 将 build 函数中的

   // todo: add grid rows
   return Container();
   

   替换为：

   return Column(
     children: <Widget>[
   	_hotelRow(),
   	_flightRow(),
   	_travelRow(),
     ],
   );
   

   F5运行到模拟器,查看

   

3. 添加corner和border:

   将 // todo: add top corner 替换为：

   borderRadius: BorderRadius.only(
     topLeft: const Radius.circular(8),
     topRight: const Radius.circular(8),
   ),
   

   将 // todo: add bottom corner 替换为：

   borderRadius: BorderRadius.only(
     bottomLeft: const Radius.circular(8),
     bottomRight: const Radius.circular(8),
   ),
   

   将两处 // todo: add top border 替换为：

   border: Border(
     top: _borderSide,
   ),
   

   然后 cmd + s 保存更改后界面将会热更新如下：

   

至此，整体页面布局已经结束；

接下来请移步： Flutter实现携程GirdNav布局_hotel布局