手把手教你实现携程GridNav布局-整体布局篇

# 本文收获与价值

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

你将使用并熟悉以下Widget:

• Container 以及 BoxDecoration;

• ClipRRect 以及 BorderRadius;

• Row 与 Expanded;

• Stack 与 Positioned;

• FractionallySizedBox;

# 准备工作

开始前请先按照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布局