Flutter一步步实现x程GridNav网格布局_hotel布局与完结

时间  2020-04-12
标签 flutter 步步 实现 gridnav 网格 布局 hotel 完结 繁體版
原文   原文链接

# 本文收获与价值

看完本系列文章后你将可以作出以下100%还原携程 V8.22.0 首页 GridNav 的界面：git

# 准备工做

开始前请github

  1. 按照Flutter一步步实现x程GridNav网格布局_准备工做中的步骤完成准备工做；ide

  2. 按照Flutter一步步实现x程GridNav网格布局_总体布局中添加相关代码；函数

注： 如下所有代码改变都在grid_widget.dart文件中机进行；布局

# 实现hotel行的布局

  1. 将 // todo: add hotel row 替换为post

    child: Row(
  children: <Widget>[
    // todo: add hotel row items
  ],
),
复制代码

  2. 在 Widget _travelRow(){... 函数下面添加以下代码实现flex

    // todo: add imageUrl, imgWidth,title. 
Widget _firstBGimageStack() {
  return Expanded(
    child: FractionallySizedBox(
      widthFactor: 1,
      heightFactor: 1,
      child: Stack(
        alignment: Alignment.bottomRight,
        children: <Widget>[
          _bgImagePositioned(
            _hotelBGImageUrl,
            width: imgWidth,
          ),
          _firstTitlePositioned('酒店'),
        ],
      ),
    ),
    flex: 31,
  );
}

Widget _firstTitlePositioned(String title) {
  return Positioned(
    left: 15,
    top: 25,
    child: Text(
      title,
      style: _titleStyle,
    ),
  );
}

Widget _bgImagePositioned(String imageUrl, {double width = 73}) {
  return Positioned(
    child: Image.network(
      imageUrl,
      width: width,
      fit: BoxFit.fill,
    ),
  );
}

复制代码

    注意：ui

    • _firstBGimageStack 中的 flex: 31 是根据网页端的flex布局的比例来的，下文中 flex: 23 和 flex 46 等均是如此；spa

    • FractionallySizedBox(widthFactor: 1,heightFactor: 1)是用来撑满父节点整个布局空间用的，widthFactor: 1 表明比例表示占满宽, heightFactor: 1表示占满高度；.net

  3. 将以下代码添加到 // todo: add hotel row items 的下方

    _firstBGimageStack(),
复制代码

    保存更改cmd+s,界面热更新以下

  4. 在 Widget _bgImagePositioned(){... 函数下方添加第二列带有背景图的 Stack 布局代码(包括添加左边框):

    // todo: add imageUrl, imgWidth,title. 
Widget _secondBGImageStack() {
  return Expanded(
    child: FractionallySizedBox(
      widthFactor: 1,
      heightFactor: 1,
      child: Container(
        decoration: BoxDecoration(
          border: Border(
            left: _borderSide,
          ),
        ),
        child: Stack(
          alignment: Alignment.bottomLeft,
          children: <Widget>[
            _bgImagePositioned(
              _minsuBGImageUrl,
              width: 37,
            ),
            _commonTitle('民宿·客栈'),
          ],
        ),
      ),
    ),
    flex: 23,
  );
}

Widget _commonTitle(String title) {
  return Center(
    child: Text(
      title,
      style: _titleStyle,
    ),
  );
}
复制代码

  5. 在 _hotelRow()方法的 // todo: add hotel row items 的下方添加 _secondBGImageStack(), , cmd+s 保存后热更新界面以下：

  6. 添加 platform 视图的布局代码，在 Widget _commonTitle(String title){...函数下方添加以下代码：

    Widget _platformBGImageStack() {
  return Expanded(
    child: FractionallySizedBox(
      widthFactor: 1,
      heightFactor: 1,
      child: Container(
        decoration: BoxDecoration(
          border: Border(
            left: _borderSide,
          ),
          gradient: LinearGradient(colors: _platformColors),
        ),
        child: Stack(
          alignment: Alignment.bottomRight,
          children: <Widget>[
            _bgImagePositioned(_platformBGImage, width: 86),
            _platformTitle('机票/火车票+酒店 '),
            // todo: add platform tag
          ],
        ),
      ),
    ),
    flex: 46,
  );
}

Widget _platformTitle(String title) {
  return Center(
    child: Text(
      title,
      style: _platformStyle,
    ),
  );
}
复制代码

    在 _hotelRow()方法的 // todo: add hotel row items 下方添加

    _platformBGImageStack(),
复制代码

    cmd+s保存并热跟新后界面以下：

  7. 实现方便又便宜的布局，在 Widget _platformTitle(String title) {...函数的下方添加以下代码

    Widget _platformTagTilte(String title) {
  return Center(
    child: Padding(
      padding: EdgeInsets.only(
        bottom: 32,
        left: 38,
      ),
      child: Container(
        decoration: BoxDecoration(
          color: Color(0xfff54c45),
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(7),
            topRight: Radius.circular(7),
            bottomRight: Radius.circular(7),
          ),
        ),
        padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
        child: Text(
          title,
          style: TextStyle(
            color: Color(0xffffffff),
            fontSize: 12,
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
    ),
  );
}
复制代码

    而后将 // todo: add platform tag 替换为 _platformTagTilte('方便又便宜'), 随后 cmd+s保存并热跟新后界面效果以下：

至此 hotel 行的布局所有完成🎉

# 完成 flightRow 和 travelRow

前面咱们已经封装好了 _firstBGimageStack 和 _secondBGImageStack 函数，这里咱们给他们添加必要的参数就能实现背景图和标题的更换，如今开始动手吧：

  1. 将备注 // todo: add imageUrl, imgWidth,title. 的 Widget _firstBGimageStack(){正行代码，替换为以下：

    Widget _firstBGimageStack({
  @required String imageUrl,
  double imgWidth = 73,
  String title,
}) {
复制代码

    并将其内部的 _hotelBGImageUrl 替换为传入的 imageUrl, 37 替换为传入的 imgWidth, 酒店替换为传入的 title, 删除 // todo: add imageUrl, imgWidth,title. 备注；

  2. 同 1 中的操做将备注 // todo: add imageUrl, imgWidth,title. 的 Widget _secondBGImageStack() {正行代码，替换为以下：

    Widget _secondBGImageStack({
  @required String imageUrl,
  double imgWidth = 37,
  String title,
}) {
复制代码

    并将其内部的 _minsuBGImageUrl 替换为传入的 imageUrl, 73 替换为传入的 imgWidth, 民宿·客栈替换为传入的 title，删除 // todo: add imageUrl, imgWidth,title. 备注；

  3. 将 _hotelRow 函数内部中调用上述_firstBGimageStack(),_secondBGImageStack()传入相应参数，修改以下

    _firstBGimageStack(
  imageUrl: _hotelBGImageUrl,
  title: '酒店',
),
_secondBGImageStack(
  imageUrl: _minsuBGImageUrl,
  title: '民宿·客栈',
),
复制代码

    并删除 // todo: add hotel row items 的备注，而后 cmd+s保存并热更新后界面应该保持不变；

  4. 添加无背景图的items布局

    Widget _noBGImageStack({@required String title}) {
  return Expanded(
    child: FractionallySizedBox(
      widthFactor: 1,
      heightFactor: 1,
      child: Container(
        decoration: BoxDecoration(
          border: Border(
            left: _borderSide,
          ),
        ),
        child: _commonTitle(title),
      ),
    ),
    flex: 23,
  );
}

Widget _commonTitle(String title) {
  return Center(
    child: Text(
      title,
      style: _titleStyle,
    ),
  );
}
复制代码

  5. 开始替换 _flightRow() 中的 // todo: add flight row 为以下代码;

    child: Row(
  children: <Widget>[
    _firstBGimageStack(
      imageUrl: _flightBGImageUrl,
      imgWidth: 79,
      title: '飞机',
    ),
    _secondBGImageStack(
      imageUrl: _trainBGImage,
      imgWidth: 37,
      title: '火车票',
    ),
    _noBGImageStack(title: '汽车·船票'),
    _noBGImageStack(title: '专车·租车'),
  ],
),
复制代码

    而后 cmd+s 保存并热更新后界面以下：

  6. 一样替换 _travelRow 中的 // todo: add travel row 为以下代码：

    child: Row(
  children: <Widget>[
    _firstBGimageStack(
      imageUrl: _tripBGImage,
      imgWidth: 93,
      title: '旅游',
    ),
    _secondBGImageStack(
      imageUrl: _dingzhiBGImage,
      imgWidth: 61,
      title: '高铁游',
    ),
    _noBGImageStack(title: '邮轮游'),
    _noBGImageStack(title: '定制游'),
  ],
),
复制代码

    而后 cmd+s 保存

至此，本文章所有代码结束，感谢您的阅读，同时但愿您能跟着本身动手亲自试验一下；

原文地址：Flutter实现携程GirdNav布局

附上deom地址

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程