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佈局